diff options
| -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 |