aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/scss/_tables.scss
diff options
context:
space:
mode:
Diffstat (limited to 'vendor/twbs/bootstrap/scss/_tables.scss')
-rw-r--r--vendor/twbs/bootstrap/scss/_tables.scss194
1 files changed, 80 insertions, 114 deletions
diff --git a/vendor/twbs/bootstrap/scss/_tables.scss b/vendor/twbs/bootstrap/scss/_tables.scss
index 5fd77a4eb..92556ba05 100644
--- a/vendor/twbs/bootstrap/scss/_tables.scss
+++ b/vendor/twbs/bootstrap/scss/_tables.scss
@@ -3,37 +3,65 @@
//
.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%;
margin-bottom: $spacer;
color: $table-color;
- background-color: $table-bg; // Reset for nesting within parents with `background-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;
}
}
//
+// Change placement of captions with a class
+//
+
+.caption-top {
+ caption-side: top;
+}
+
+
+//
// Condensed table w/ half padding
//
.table-sm {
- th,
- td {
- padding: $table-cell-padding-sm;
+ // stylelint-disable-next-line selector-max-universal
+ > :not(caption) > * > * {
+ padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
}
}
@@ -41,29 +69,27 @@
// Border versions
//
// Add or remove 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 {
- th,
- td,
- thead th,
- tbody + tbody {
- border: 0;
+ // stylelint-disable-next-line selector-max-universal
+ > :not(caption) > * > * {
+ border-bottom-width: 0;
}
}
@@ -72,114 +98,54 @@
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
- tbody tr:nth-of-type(#{$table-striped-order}) {
- background-color: $table-accent-bg;
+ > 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() {
- color: $table-hover-color;
- background-color: $table-hover-bg;
- }
+ > tbody > tr:hover {
+ --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
+ color: var(--#{$variable-prefix}table-hover-color);
}
}
-// Table backgrounds
-//
-// Exact selectors below required to override `.table-striped` and prevent
-// inheritance to nested tables.
-
-@each $color, $value in $theme-colors {
- @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
-}
-
-@include table-row-variant(active, $table-active-bg);
-
-
-// Dark styles
+// Table variants
//
-// Same table markup, but inverted color scheme: dark background and light text.
-
-// stylelint-disable-next-line no-duplicate-selectors
-.table {
- .thead-dark {
- th {
- color: $table-dark-color;
- background-color: $table-dark-bg;
- border-color: $table-dark-border-color;
- }
- }
+// Table variants set the table cell backgrounds, border colors
+// and the colors of the striped, hovered & active tables
- .thead-light {
- th {
- color: $table-head-color;
- background-color: $table-head-bg;
- border-color: $table-border-color;
- }
- }
+@each $color, $value in $table-variants {
+ @include table-variant($color, $value);
}
-.table-dark {
- color: $table-dark-color;
- background-color: $table-dark-bg;
-
- th,
- td,
- thead th {
- border-color: $table-dark-border-color;
- }
-
- &.table-bordered {
- border: 0;
- }
-
- &.table-striped {
- tbody tr:nth-of-type(#{$table-striped-order}) {
- background-color: $table-dark-accent-bg;
- }
- }
-
- &.table-hover {
- tbody tr {
- @include hover() {
- color: $table-dark-hover-color;
- background-color: $table-dark-hover-bg;
- }
- }
- }
-}
-
-
// Responsive tables
//
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.
-.table-responsive {
- @each $breakpoint in map-keys($grid-breakpoints) {
- $next: breakpoint-next($breakpoint, $grid-breakpoints);
- $infix: breakpoint-infix($next, $grid-breakpoints);
-
- &#{$infix} {
- @include media-breakpoint-down($breakpoint) {
- display: block;
- width: 100%;
- overflow-x: auto;
- -webkit-overflow-scrolling: touch;
-
- // Prevent double border on horizontal scroll due to use of `display: block;`
- > .table-bordered {
- border: 0;
- }
- }
+@each $breakpoint in map-keys($grid-breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ @include media-breakpoint-down($breakpoint) {
+ .table-responsive#{$infix} {
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
}
}
}