diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_tables.scss | 27 | ||||
| -rw-r--r-- | scss/_variables.scss | 2 |
2 files changed, 18 insertions, 11 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; |