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

Convert border utilities to CSS variables

Browse Source 
- Updates the utilities mixin to check for specific CSS variable names via `css-variable`
- Bonus fix: we now prevent local variables for `0` value utilities (e.g., `.border-top-0` no longer sets `--bs-border-opacity: 1`
- Adds new `.border-opacity-*` classes
- Adds new root variables: `--bs-border-color`, `--bs-border-style`, `--bs-border-width`
- Documents the new variable changes
This commit is contained in:
Mark Otto
2021-11-29 21:14:17 -08:00
committed by Mark Otto
parent e35980d009
commit de0dfca9a1
6 changed files with 97 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
scss/mixins/_utilities.scss
View File

@@ -20,6 +20,9 @@
$property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
$property-class: if($property-class == null, "", $property-class);
// Use custom CSS variable name if present, otherwise default to `class`
$css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
// State params to generate pseudo-classes
$state: if(map-has-key($utility, state), map-get($utility, state), ());
@@ -52,20 +55,20 @@
@if $is-css-var {
.#{$property-class + $infix + $property-class-modifier} {
--#{$variable-prefix}#{$property-class}: #{$value};
--#{$variable-prefix}#{$css-variable-name}: #{$value};
}
@each $pseudo in $state {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
--#{$variable-prefix}#{$property-class}: #{$value};
--#{$variable-prefix}#{$css-variable-name}: #{$value};
}
}
} @else {
.#{$property-class + $infix + $property-class-modifier} {
@each $property in $properties {
@if $is-local-vars {
@each $local-var, $value in $is-local-vars {
--#{$variable-prefix}#{$local-var}: #{$value};
@each $local-var, $variable in $is-local-vars {
--#{$variable-prefix}#{$local-var}: #{$variable};
}
}
#{$property}: $value if($enable-important-utilities, !important, null);