mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-01 09:22:55 +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

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};
}
}
}