diff options
Diffstat (limited to 'src/sass/bootstrap4/_tables.scss')
| -rw-r--r-- | src/sass/bootstrap4/_tables.scss | 193 |
1 files changed, 193 insertions, 0 deletions
diff --git a/src/sass/bootstrap4/_tables.scss b/src/sass/bootstrap4/_tables.scss new file mode 100644 index 0000000..8ec35b9 --- /dev/null +++ b/src/sass/bootstrap4/_tables.scss @@ -0,0 +1,193 @@ +// +// Basic Bootstrap table +// + +.table { + width: 100%; + max-width: 100%; + margin-bottom: $spacer; + + th, + td { + padding: $table-cell-padding; + line-height: $line-height; + vertical-align: top; + border-top: $table-border-width solid $table-border-color; + } + + thead th { + vertical-align: bottom; + border-bottom: (2 * $table-border-width) solid $table-border-color; + } + + tbody + tbody { + border-top: (2 * $table-border-width) solid $table-border-color; + } + + .table { + background-color: $body-bg; + } +} + + +// +// Condensed table w/ half padding +// + +.table-sm { + th, + td { + padding: $table-sm-cell-padding; + } +} + + +// Bordered version +// +// Add borders all around the table and between all the columns. + +.table-bordered { + border: $table-border-width solid $table-border-color; + + th, + td { + border: $table-border-width solid $table-border-color; + } + + thead { + th, + td { + border-bottom-width: (2 * $table-border-width); + } + } +} + + +// Zebra-striping +// +// Default zebra-stripe styles (alternating gray and transparent backgrounds) + +.table-striped { + tbody tr:nth-of-type(odd) { + background-color: $table-bg-accent; + } +} + + +// Hover effect +// +// Placed here since it has to come after the potential zebra striping + +.table-hover { + tbody tr { + @include hover { + background-color: $table-bg-hover; + } + } +} + + +// Table backgrounds +// +// Exact selectors below required to override `.table-striped` and prevent +// inheritance to nested tables. + +// Generate the contextual variants +@include table-row-variant(active, $table-bg-active); +@include table-row-variant(success, $state-success-bg); +@include table-row-variant(info, $state-info-bg); +@include table-row-variant(warning, $state-warning-bg); +@include table-row-variant(danger, $state-danger-bg); + + +// Responsive tables +// +// Wrap your tables in `.table-responsive` and we'll make them mobile friendly +// by enabling horizontal scrolling. Only applies <768px. Everything above that +// will display normally. + +.table-responsive { + display: block; + width: 100%; + min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) + overflow-x: auto; + + // TODO: find out if we need this still. + // + // border: $table-border-width solid $table-border-color; + // -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 +} + + +.thead-inverse { + th { + color: #fff; + background-color: $gray-dark; + } +} +.thead-default { + th { + color: $gray; + background-color: $gray-lighter; + } +} + +.table-inverse { + color: $gray-lighter; + background-color: $gray-dark; + + &.table-bordered { + border: 0; + } + + th, + td, + thead th { + border-color: $gray; + } +} + + +.table-reflow { + thead { + float: left; + } + + tbody { + display: block; + white-space: nowrap; + } + + th, + td { + border-top: $table-border-width solid $table-border-color; + border-left: $table-border-width solid $table-border-color; + + &:last-child { + border-right: $table-border-width solid $table-border-color; + } + } + + thead, + tbody, + tfoot { + &:last-child { + tr:last-child { + th, + td { + border-bottom: $table-border-width solid $table-border-color; + } + } + } + } + + tr { + float: left; + + th, + td { + display: block !important; + border: $table-border-width solid $table-border-color; + } + } +} |
