.#{$prefix}table {
margin-bottom: 0; border-spacing: 0; border-collapse: separate; border: 1px solid $smoke; @include border-radius(4px); td { background: $white; } tr:hover { background: $cloud; td { background: inherit; } } th, td { padding: 10px 16px; border-top: 0; .#{$prefix}btn-icon { margin-top: -8px; margin-bottom: -8px; } } thead { th { background-color: $light; border-bottom: $table-border-width solid $table-border-color; &:first-child { // stylelint-disable-next-line property-blacklist border-top-left-radius: 4px; } &:last-child { // stylelint-disable-next-line property-blacklist border-top-right-radius: 4px; } } .sort { cursor: pointer; span { position: relative; &::before, &::after { position: absolute; right: -12px; width: 0; height: 0; content: ""; border-style: solid; } &::before { top: 2px; border-color: transparent transparent $slate transparent; border-width: 0 4px 4px; } &::after { bottom: 2px; border-color: $slate transparent transparent transparent; border-width: 4px 4px 0; } } &.sort-up, &.sort-down { span { &::before { border-color: transparent transparent $dark transparent; } &::after { border-color: $dark transparent transparent transparent; } } } } } tbody { tr:not(:last-child) { // stylelint-disable-next-line selector-max-type th, td { border-bottom: 1px solid $table-border-color; } } } .#{$prefix}table-action-list { position: sticky; left: 16px; } &.#{$prefix}table-bordered { tbody { th, td { border-bottom: 0; } } th, td { border-right: $table-border-width solid $table-border-color; border-left: 0; } thead th:last-child, tbody td:last-child { border-right: 0; } } .#{$prefix}table { &__checkbox { width: 32px; padding-right: 0; .#{$prefix}custom-control { padding-left: 16px; margin-bottom: 0; &-label { &::before, &::after { left: -16px; } } } } }
}
.#{$prefix}table-layout-auto {
table-layout: auto !important; // stylelint-disable-line declaration-no-important
}
.#{$prefix}table-sticky {
thead tr th { position: sticky; top: 0; } th:nth-child(1), th:last-child { z-index: 2; } &--left { td:nth-child(1), th:nth-child(1) { position: sticky; left: 0; z-index: 2; } } &--right { td:last-child, th:last-child { position: sticky; right: 0; z-index: 2; } }
}