diff options
Diffstat (limited to 'sass/vendor/bootstrap/scss/_tables.scss')
| -rw-r--r--[-rwxr-xr-x] | sass/vendor/bootstrap/scss/_tables.scss | 176 |
1 files changed, 87 insertions, 89 deletions
diff --git a/sass/vendor/bootstrap/scss/_tables.scss b/sass/vendor/bootstrap/scss/_tables.scss index 47be2c5..92556ba 100755..100644 --- a/sass/vendor/bootstrap/scss/_tables.scss +++ b/sass/vendor/bootstrap/scss/_tables.scss @@ -3,29 +3,54 @@ // .table { + --#{$variable-prefix}table-bg: #{$table-bg}; + --#{$variable-prefix}table-accent-bg: #{$table-accent-bg}; + --#{$variable-prefix}table-striped-color: #{$table-striped-color}; + --#{$variable-prefix}table-striped-bg: #{$table-striped-bg}; + --#{$variable-prefix}table-active-color: #{$table-active-color}; + --#{$variable-prefix}table-active-bg: #{$table-active-bg}; + --#{$variable-prefix}table-hover-color: #{$table-hover-color}; + --#{$variable-prefix}table-hover-bg: #{$table-hover-bg}; + width: 100%; - max-width: 100%; margin-bottom: $spacer; + color: $table-color; + vertical-align: $table-cell-vertical-align; + border-color: $table-border-color; + + // Target th & td + // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class. + // We use the universal selectors here to simplify the selector (else we would need 6 different selectors). + // Another advantage is that this generates less code and makes the selector less specific making it easier to override. + // stylelint-disable-next-line selector-max-universal + > :not(caption) > * > * { + padding: $table-cell-padding-y $table-cell-padding-x; + background-color: var(--#{$variable-prefix}table-bg); + border-bottom-width: $table-border-width; + box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg); + } - th, - td { - padding: $table-cell-padding; - vertical-align: top; - border-top: $table-border-width solid $table-border-color; + > tbody { + vertical-align: inherit; } - thead th { + > thead { 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; + // Highlight border color between thead, tbody and tfoot. + > :not(:last-child) > :last-child > * { + border-bottom-color: $table-group-separator-color; } +} - .table { - background-color: $body-bg; - } + +// +// Change placement of captions with a class +// + +.caption-top { + caption-side: top; } @@ -34,120 +59,93 @@ // .table-sm { - th, - td { - padding: $table-sm-cell-padding; + // stylelint-disable-next-line selector-max-universal + > :not(caption) > * > * { + padding: $table-cell-padding-y-sm $table-cell-padding-x-sm; } } -// Bordered version +// Border versions +// +// Add or remove borders all around the table and between all the columns. // -// Add borders all around the table and between all the columns. +// When borders are added on all sides of the cells, the corners can render odd when +// these borders do not have the same color or if they are semi-transparent. +// Therefor we add top and border bottoms to the `tr`s and left and right borders +// to the `td`s or `th`s .table-bordered { - border: $table-border-width solid $table-border-color; + > :not(caption) > * { + border-width: $table-border-width 0; - th, - td { - border: $table-border-width solid $table-border-color; - } - - thead { - th, - td { - border-bottom-width: (2 * $table-border-width); + // stylelint-disable-next-line selector-max-universal + > * { + border-width: 0 $table-border-width; } } } +.table-borderless { + // stylelint-disable-next-line selector-max-universal + > :not(caption) > * > * { + border-bottom-width: 0; + } +} // Zebra-striping // // Default zebra-stripe styles (alternating gray and transparent backgrounds) .table-striped { - tbody tr:nth-of-type(odd) { - background-color: $table-bg-accent; + > tbody > tr:nth-of-type(#{$table-striped-order}) { + --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg); + color: var(--#{$variable-prefix}table-striped-color); } } +// Active table +// +// The `.table-active` class can be added to highlight rows or cells + +.table-active { + --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg); + color: var(--#{$variable-prefix}table-active-color); +} // 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; - } + > tbody > tr:hover { + --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg); + color: var(--#{$variable-prefix}table-hover-color); } } -// Table backgrounds +// Table variants // -// 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); +// Table variants set the table cell backgrounds, border colors +// and the colors of the striped, hovered & active tables - -// Inverse styles -// -// Same table markup, but inverted color scheme: dark background and light text. - -.thead-inverse { - th { - color: $table-inverse-color; - background-color: $table-inverse-bg; - } +@each $color, $value in $table-variants { + @include table-variant($color, $value); } -.thead-default { - th { - color: $table-head-color; - background-color: $table-head-bg; - } -} - -.table-inverse { - color: $table-inverse-color; - background-color: $table-inverse-bg; - - th, - td, - thead th { - border-color: $body-bg; - } - - &.table-bordered { - border: 0; - } -} - - - // Responsive tables // -// Add `.table-responsive` to `.table`s and we'll make them mobile friendly by -// enabling horizontal scrolling. Only applies <768px. Everything above that -// will display normally. +// Generate series of `.table-responsive-*` classes for configuring the screen +// size of where your table will overflow. -.table-responsive { - display: block; - width: 100%; - overflow-x: auto; - -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 +@each $breakpoint in map-keys($grid-breakpoints) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - // Prevent double border on horizontal scroll due to use of `display: block;` - &.table-bordered { - border: 0; + @include media-breakpoint-down($breakpoint) { + .table-responsive#{$infix} { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } } } |