mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-01 17:32:41 +02:00
Add Sass variable for CSS variable prefix (#31684)
* Add Sass variable for CSS variable prefix * Update other --bs-* var instances
This commit is contained in:
@@ -3,14 +3,14 @@
|
||||
//
|
||||
|
||||
.table {
|
||||
--bs-table-bg: #{$table-bg};
|
||||
--bs-table-accent-bg: transparent;
|
||||
--bs-table-striped-color: #{$table-striped-color};
|
||||
--bs-table-striped-bg: #{$table-striped-bg};
|
||||
--bs-table-active-color: #{$table-active-color};
|
||||
--bs-table-active-bg: #{$table-active-bg};
|
||||
--bs-table-hover-color: #{$table-hover-color};
|
||||
--bs-table-hover-bg: #{$table-hover-bg};
|
||||
--#{$variable-prefix}table-bg: #{$table-bg};
|
||||
--#{$variable-prefix}table-accent-bg: transparent;
|
||||
--#{$variable-prefix}table-striped-color: #{$table-striped-color};
|
||||
--#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
|
||||
--#{$variable-prefix}table-active-color: #{$table-active-color};
|
||||
--#{$variable-prefix}table-active-bg: #{$table-active-bg};
|
||||
--#{$variable-prefix}table-hover-color: #{$table-hover-color};
|
||||
--#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
|
||||
|
||||
width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
@@ -25,8 +25,8 @@
|
||||
// stylelint-disable-next-line selector-max-universal
|
||||
> :not(caption) > * > * {
|
||||
padding: $table-cell-padding-y $table-cell-padding-x;
|
||||
background-color: var(--bs-table-bg);
|
||||
background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
|
||||
background-color: var(--#{$variable-prefix}table-bg);
|
||||
background-image: linear-gradient(var(--#{$variable-prefix}table-accent-bg), var(--#{$variable-prefix}table-accent-bg));
|
||||
border-bottom-width: $table-border-width;
|
||||
}
|
||||
|
||||
@@ -99,8 +99,8 @@
|
||||
|
||||
.table-striped {
|
||||
> tbody > tr:nth-of-type(#{$table-striped-order}) {
|
||||
--bs-table-accent-bg: var(--bs-table-striped-bg);
|
||||
color: var(--bs-table-striped-color);
|
||||
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
|
||||
color: var(--#{$variable-prefix}table-striped-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -109,8 +109,8 @@
|
||||
// The `.table-active` class can be added to highlight rows or cells
|
||||
|
||||
.table-active {
|
||||
--bs-table-accent-bg: var(--bs-table-active-bg);
|
||||
color: var(--bs-table-active-color);
|
||||
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
|
||||
color: var(--#{$variable-prefix}table-active-color);
|
||||
}
|
||||
|
||||
// Hover effect
|
||||
@@ -119,8 +119,8 @@
|
||||
|
||||
.table-hover {
|
||||
> tbody > tr:hover {
|
||||
--bs-table-accent-bg: var(--bs-table-hover-bg);
|
||||
color: var(--bs-table-hover-color);
|
||||
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
|
||||
color: var(--#{$variable-prefix}table-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user