kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

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

This commit is contained in:
Geremia Taglialatela 2021-10-11 16:41:43 +02:00 committed by GitHub
parent 8ec6c94522
commit 5b124f647f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
scss/_tables.scss
View File

@ -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.

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

@ -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