mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-12 00:24:03 +02:00
Code Issues Releases Wiki Activity

Add color and border-color css variables to tables (#35055)

Browse Source
This commit is contained in:
Geremia Taglialatela
2021-10-11 16:41:43 +02:00
committed by GitHub
parent 8ec6c94522
commit 5b124f647f
2 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
scss/_tables.scss
View File

@@ -3,7 +3,9 @@
// //
.table { .table {
--#{$variable-prefix}table-color: #{$table-color};
--#{$variable-prefix}table-bg: #{$table-bg}; --#{$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-accent-bg: #{$table-accent-bg};
--#{$variable-prefix}table-striped-color: #{$table-striped-color}; --#{$variable-prefix}table-striped-color: #{$table-striped-color};
--#{$variable-prefix}table-striped-bg: #{$table-striped-bg}; --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
@@ -14,9 +16,9 @@
width: 100%; width: 100%;
margin-bottom: $spacer; margin-bottom: $spacer;
color: $table-color; color: var(--#{$variable-prefix}table-color);
vertical-align: $table-cell-vertical-align; vertical-align: $table-cell-vertical-align;
border-color: $table-border-color; border-color: var(--#{$variable-prefix}table-border-color);
// Target th & td // Target th & td
// We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class. // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.

7
scss/mixins/_table-variants.scss
View File

@@ -5,8 +5,11 @@
$hover-bg: mix($color, $background, percentage($table-hover-bg-factor)); $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor)); $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
$active-bg: mix($color, $background, percentage($table-active-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-bg: #{$background};
--#{$variable-prefix}table-border-color: #{$border-color};
--#{$variable-prefix}table-striped-bg: #{$striped-bg}; --#{$variable-prefix}table-striped-bg: #{$striped-bg};
--#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)}; --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
--#{$variable-prefix}table-active-bg: #{$active-bg}; --#{$variable-prefix}table-active-bg: #{$active-bg};
@@ -14,8 +17,8 @@
--#{$variable-prefix}table-hover-bg: #{$hover-bg}; --#{$variable-prefix}table-hover-bg: #{$hover-bg};
--#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)}; --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
color: $color; color: var(--#{$variable-prefix}table-color);
border-color: mix($color, $background, percentage($table-border-factor)); border-color: var(--#{$variable-prefix}table-border-color);
} }
} }
// scss-docs-end table-variant // scss-docs-end table-variant