diff options
| -rw-r--r-- | scss/_tables.scss | 27 | ||||
| -rw-r--r-- | scss/_variables.scss | 2 | ||||
| -rw-r--r-- | site/content/docs/5.3/content/tables.md | 6 |
3 files changed, 21 insertions, 14 deletions
diff --git a/scss/_tables.scss b/scss/_tables.scss index 23de7c31b..ebfc00a5c 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -3,6 +3,12 @@ // .table { + // Reset needed for nesting tables + --#{$prefix}table-color-type: initial; + --#{$prefix}table-bg-type: initial; + --#{$prefix}table-color-state: initial; + --#{$prefix}table-bg-state: initial; + // End of reset --#{$prefix}table-color: #{$table-color}; --#{$prefix}table-bg: #{$table-bg}; --#{$prefix}table-border-color: #{$table-border-color}; @@ -16,7 +22,6 @@ width: 100%; margin-bottom: $spacer; - color: var(--#{$prefix}table-color); vertical-align: $table-cell-vertical-align; border-color: var(--#{$prefix}table-border-color); @@ -27,9 +32,11 @@ // stylelint-disable-next-line selector-max-universal > :not(caption) > * > * { padding: $table-cell-padding-y $table-cell-padding-x; + // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb + color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color))); background-color: var(--#{$prefix}table-bg); border-bottom-width: $table-border-width; - box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg); + box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg))); } > tbody { @@ -104,16 +111,16 @@ // For rows .table-striped { > tbody > tr:nth-of-type(#{$table-striped-order}) > * { - --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg); - color: var(--#{$prefix}table-striped-color); + --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color); + --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg); } } // For columns .table-striped-columns { > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) { - --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg); - color: var(--#{$prefix}table-striped-color); + --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color); + --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg); } } @@ -122,8 +129,8 @@ // The `.table-active` class can be added to highlight rows or cells .table-active { - --#{$prefix}table-accent-bg: var(--#{$prefix}table-active-bg); - color: var(--#{$prefix}table-active-color); + --#{$prefix}table-color-state: var(--#{$prefix}table-active-color); + --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg); } // Hover effect @@ -132,8 +139,8 @@ .table-hover { > tbody > tr:hover > * { - --#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg); - color: var(--#{$prefix}table-hover-color); + --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color); + --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg); } } diff --git a/scss/_variables.scss b/scss/_variables.scss index b1fe4ba5a..0288898d3 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -731,7 +731,7 @@ $table-cell-padding-x-sm: .25rem !default; $table-cell-vertical-align: top !default; $table-color: var(--#{$prefix}body-color) !default; -$table-bg: transparent !default; +$table-bg: var(--#{$prefix}body-bg) !default; $table-accent-bg: transparent !default; $table-th-font-weight: null !default; diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md index ba83b43cd..78d9870c0 100644 --- a/site/content/docs/5.3/content/tables.md +++ b/site/content/docs/5.3/content/tables.md @@ -227,8 +227,8 @@ Highlight a table row or cell by adding a `.table-active` class. For the accented tables ([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants): - We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds. -- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);` to layer on top of any specified `background-color`. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is unset by default, we don't have a default box shadow. -- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background. +- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg--state, var(--#{$prefix}table-bg--type, var(--#{$prefix}table-accent-bg)));` to layer on top of any specified `background-color`. It uses custom cascade to override the `box-shadow`, regardless the CSS specificity. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is set to `transparent` by default, we don't have a default box shadow. +- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, either `--bs-table-bg--type` or `--bs-table-bg--state` (by default set to `initial`) are set to a semitransparent color (`--bs-table-striped-bg`, `--bs-table-active-bg` or `--bs-table-hover-bg`) to colorize the background and override default `--bs-table-accent-bg`. - For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color. - Text and border colors are generated the same way, and their colors are inherited by default. @@ -427,7 +427,7 @@ Border styles, active styles, and table variants are not inherited by nested tab </div> ```html -<table class="table table-striped"> +<table class="table table-striped table-bordered"> <thead> ... </thead> |