diff options
| author | Geremia Taglialatela <[email protected]> | 2021-10-11 16:41:43 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2021-10-11 17:41:43 +0300 |
| commit | 5b124f647fd618cef8115f09da61c095e5c85ffe (patch) | |
| tree | 208a0e5fe5f2240d8a020b67a688281d3d77f264 | |
| parent | 8ec6c9452286472ddad12d1af59b173ede22b5ac (diff) | |
| download | bootstrap-5b124f647fd618cef8115f09da61c095e5c85ffe.tar.xz bootstrap-5b124f647fd618cef8115f09da61c095e5c85ffe.zip | |
Add color and border-color css variables to tables (#35055)
| -rw-r--r-- | scss/_tables.scss | 6 | ||||
| -rw-r--r-- | scss/mixins/_table-variants.scss | 7 |
2 files changed, 9 insertions, 4 deletions
diff --git a/scss/_tables.scss b/scss/_tables.scss index e10e4c4e4..30e898b58 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -3,7 +3,9 @@ // .table { + --#{$variable-prefix}table-color: #{$table-color}; --#{$variable-prefix}table-bg: #{$table-bg}; + --#{$variable-prefix}table-border-color: #{$table-border-color}; --#{$variable-prefix}table-accent-bg: #{$table-accent-bg}; --#{$variable-prefix}table-striped-color: #{$table-striped-color}; --#{$variable-prefix}table-striped-bg: #{$table-striped-bg}; @@ -14,9 +16,9 @@ width: 100%; margin-bottom: $spacer; - color: $table-color; + color: var(--#{$variable-prefix}table-color); vertical-align: $table-cell-vertical-align; - border-color: $table-border-color; + border-color: var(--#{$variable-prefix}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. diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss index 9fd0fb02a..cad70a19b 100644 --- a/scss/mixins/_table-variants.scss +++ b/scss/mixins/_table-variants.scss @@ -5,8 +5,11 @@ $hover-bg: mix($color, $background, percentage($table-hover-bg-factor)); $striped-bg: mix($color, $background, percentage($table-striped-bg-factor)); $active-bg: mix($color, $background, percentage($table-active-bg-factor)); + $border-color: mix($color, $background, percentage($table-border-factor)); + --#{$variable-prefix}table-color: #{$color}; --#{$variable-prefix}table-bg: #{$background}; + --#{$variable-prefix}table-border-color: #{$border-color}; --#{$variable-prefix}table-striped-bg: #{$striped-bg}; --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)}; --#{$variable-prefix}table-active-bg: #{$active-bg}; @@ -14,8 +17,8 @@ --#{$variable-prefix}table-hover-bg: #{$hover-bg}; --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)}; - color: $color; - border-color: mix($color, $background, percentage($table-border-factor)); + color: var(--#{$variable-prefix}table-color); + border-color: var(--#{$variable-prefix}table-border-color); } } // scss-docs-end table-variant |