mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 09:05:47 +02:00
Code Issues Releases Wiki Activity

Add Sass variable for CSS variable prefix (#31684)

Browse Source 
* Add Sass variable for CSS variable prefix

* Update other --bs-* var instances
This commit is contained in:
Mark Otto
2020-09-29 22:32:58 -07:00
committed by GitHub
parent 7e195a8d22
commit 3cf51c6ac9
9 changed files with 56 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/mixins/_gradients.scss
View File

@@ -4,7 +4,7 @@
background-color: $color;
@if $enable-gradients {
background-image: var(--bs-gradient);
background-image: var(--#{$variable-prefix}gradient);
}
}

20
scss/mixins/_grid.scss
View File

@@ -3,13 +3,13 @@
// Generate semantic grid columns with these mixins.
@mixin make-row($gutter: $grid-gutter-width) {
--bs-gutter-x: #{$gutter};
--bs-gutter-y: 0;
--#{$variable-prefix}gutter-x: #{$gutter};
--#{$variable-prefix}gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1); // stylelint-disable-line function-disallowed-list
margin-right: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-disallowed-list
margin-left: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-disallowed-list
margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
}
@mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -21,9 +21,9 @@
flex-shrink: 0;
width: 100%;
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list
margin-top: var(--bs-gutter-y);
padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
margin-top: var(--#{$variable-prefix}gutter-y);
}
@mixin make-col($size, $columns: $grid-columns) {
@@ -107,12 +107,12 @@
@each $key, $value in $gutters {
.g#{$infix}-#{$key},
.gx#{$infix}-#{$key} {
--bs-gutter-x: #{$value};
--#{$variable-prefix}gutter-x: #{$value};
}
.g#{$infix}-#{$key},
.gy#{$infix}-#{$key} {
--bs-gutter-y: #{$value};
--#{$variable-prefix}gutter-y: #{$value};
}
}
}

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

@@ -6,13 +6,13 @@
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
--bs-table-bg: #{$background};
--bs-table-striped-bg: #{$striped-bg};
--bs-table-striped-color: #{color-contrast($striped-bg)};
--bs-table-active-bg: #{$active-bg};
--bs-table-active-color: #{color-contrast($active-bg)};
--bs-table-hover-bg: #{$hover-bg};
--bs-table-hover-color: #{color-contrast($hover-bg)};
--#{$variable-prefix}table-bg: #{$background};
--#{$variable-prefix}table-striped-bg: #{$striped-bg};
--#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
--#{$variable-prefix}table-active-bg: #{$active-bg};
--#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
--#{$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));