.table {
width: 100%; > thead, > tbody, > tfoot { > tr { > th, > td { padding: $table-padding; vertical-align: top; border-bottom: $table-row-border-bottom; } > th.numeric, > td.numeric { text-align: right; } > th { text-align: left; } } } // set header & footer font weight > thead, > tfoot { > tr > th { font-weight: $font-weight-semibold; } } // align header text to bottom and header borders > thead > tr > th { border-bottom: $table-header-border-bottom; border-top: 0; vertical-align: bottom; } // set footer borders > tfoot > tr > th { border-top: $table-footer-border-top; border-bottom: $table-footer-border-bottom; } // common table caption > caption { text-align: left; font-size: $table-caption-font-size; padding: $table-padding; border-bottom: $table-header-border-bottom; margin-bottom: building-units(1); }
}
.table-hover {
> tbody > tr { > th, > td { @include transition(all $transition-time-out $transition-function); } } > tbody > tr:hover { > th, > td { color: $table-font-color-hover; background-color: $table-bgr-color-hover; @include transition($transition-time-in, '-duration'); } }
}
.table-striped {
@include table-striped-variant($table-gray-odd-font-color, $table-gray-odd-bgr-color);
}
@include table-row-variant('positive', $table-font-color-positive, $table-bgr-color-positive, $background-color-regular); @include table-row-variant('warning', $table-font-color-warning, $table-bgr-color-warning, $background-color-regular); @include table-row-variant('negative', $table-font-color-negative, $table-bgr-color-negative, $background-color-regular); @include table-row-variant('brand', $table-font-color-brand, $table-bgr-color-brand, $background-color-regular); @include table-row-variant('inactive', $table-font-color-inactive, $table-bgr-color-inactive, $background-color-regular);
.table-small {
> thead, > tbody, > tfoot { > tr { > th, > td { font-size: $font-size-xsmall; padding: $table-padding-small; } } } > caption { font-size: $font-size-regular; }
}
.table-responsive {
overflow-x: auto; min-height: .01%; // Workaround for IE9 bug @media (max-width: #{$grid-extra-small-max}px) { width: 100%; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; border: 1px solid $table-row-border-bottom; .table { margin-bottom: 0; // Ensure the content doesn't wrap > thead, > tbody, > tfoot { > tr { > th, > td { white-space: nowrap; } } } } }
}