mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 17:11:48 +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

31
scss/_utilities.scss
View File

@@ -98,15 +98,29 @@ $utilities: map-merge(
// scss-docs-start utils-borders
"border": (
property: border,
local-vars: (
"border-opacity": 1
),
values: (
null: $border-width solid $border-color,
null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color),
0: 0,
)
),
"border-opacity": (
css-var: true,
class: border-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),
"border-top": (
property: border-top,
values: (
null: $border-width solid $border-color,
null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color),
0: 0,
)
),
@@ -114,14 +128,14 @@ $utilities: map-merge(
property: border-right,
class: border-end,
values: (
null: $border-width solid $border-color,
null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color),
0: 0,
)
),
"border-bottom": (
property: border-bottom,
values: (
null: $border-width solid $border-color,
null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color),
0: 0,
)
),
@@ -129,17 +143,18 @@ $utilities: map-merge(
property: border-left,
class: border-start,
values: (
null: $border-width solid $border-color,
null: var(--#{$variable-prefix}border-width) var(--#{$variable-prefix}border-style) var(--#{$variable-prefix}border-color),
0: 0,
)
),
"border-color": (
property: border-color,
css-var: true,
css-variable-name: border-color,
class: border,
values: map-merge($theme-colors, ("white": $white))
values: $utilities-border-colors
),
"border-width": (
property: border-width,
css-var: true,
class: border,
values: $border-widths
),