sass.n2o.components.Table.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
The newest version!
.n2o-table {
    th,
    td {
        vertical-align: middle;
    }

    .n2o-table-row {
        box-sizing: border-box;
        border-left: 0.3rem solid transparent;
        outline: none;
    }

    .row-click {
        cursor: pointer;
    }

    &.has-focus {
        tbody {
            .n2o-table-row:focus {
                box-sizing: border-box;
                border-left: 0.2rem solid $input-focus-border-color;
            }
        }
    }

    .n2o-table-btn {
        .btn-link:not(:first-child),
        .btn-group:not(:first-child) > .btn-link {
            &::before {
                content: "|";
                display: inline-block;
                position: absolute;
                left: 0;
                color: $gray;
            }
        }

        .n2o-dropdown-icon {
            transition: all 0.15s linear;
            margin: 0 0 0 5px;
            padding: 0;
        }

        .btn-group.show {
            .n2o-dropdown-icon {
                transform: rotate(180deg);
            }
        }
    }
}

.text-align-top {
    .n2o-table {
        th,
        td {
            vertical-align: top;
        }
    }
}

.text-align-bottom {
    .n2o-table {
        th,
        td {
            vertical-align: bottom;
        }
    }
}

@include table-row-variant(blue, $blue);
@include table-row-variant(purple, $purple);
@include table-row-variant(indigo, $indigo);
@include table-row-variant(pink, $pink);
@include table-row-variant(red, $red);
@include table-row-variant(orange, $orange);
@include table-row-variant(yellow, $yellow);
@include table-row-variant(green, $green);
@include table-row-variant(teal, $teal);
@include table-row-variant(cyan, $cyan);