mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-31 09:05:47 +02:00
Update color and background-color utilities
- Adds new functions to generate additional Sass maps - Adds new root variables for rgb() versions of our theme colors, plus a few extras - Adds ability to change the alpha transparency of text color and background color utilities with new utilities, inline styles, or local CSS var - Updates documentation for color and background-color utilities pages - Deprecates .text-black-50 and .text-white-50 since those (and additional transparency levels) can be generated on the fly Change approach slightly to prevent cascade
This commit is contained in:
@@ -514,32 +514,55 @@ $utilities: map-merge(
|
||||
"color": (
|
||||
property: color,
|
||||
class: text,
|
||||
local-vars: (
|
||||
"text-opacity": 1
|
||||
),
|
||||
values: map-merge(
|
||||
$theme-colors,
|
||||
$utilities-text-colors,
|
||||
(
|
||||
"white": $white,
|
||||
"body": $body-color,
|
||||
"muted": $text-muted,
|
||||
"black-50": rgba($black, .5),
|
||||
"white-50": rgba($white, .5),
|
||||
"black-50": rgba($black, .5), // deprecated
|
||||
"white-50": rgba($white, .5), // deprecated
|
||||
"reset": inherit,
|
||||
)
|
||||
)
|
||||
),
|
||||
"text-opacity": (
|
||||
css-var: true,
|
||||
class: text-opacity,
|
||||
values: (
|
||||
25: .25,
|
||||
50: .5,
|
||||
75: .75,
|
||||
100: 1
|
||||
)
|
||||
),
|
||||
// scss-docs-end utils-color
|
||||
// scss-docs-start utils-bg-color
|
||||
"background-color": (
|
||||
property: background-color,
|
||||
class: bg,
|
||||
local-vars: (
|
||||
"bg-opacity": 1
|
||||
),
|
||||
values: map-merge(
|
||||
$theme-colors,
|
||||
$utilities-bg-colors,
|
||||
(
|
||||
"body": $body-bg,
|
||||
"white": $white,
|
||||
"transparent": transparent
|
||||
)
|
||||
)
|
||||
),
|
||||
"bg-opacity": (
|
||||
css-var: true,
|
||||
class: bg-opacity,
|
||||
values: (
|
||||
10: .1,
|
||||
25: .25,
|
||||
50: .5,
|
||||
75: .75,
|
||||
100: 1
|
||||
)
|
||||
),
|
||||
// scss-docs-end utils-bg-color
|
||||
"gradient": (
|
||||
property: background-image,
|
||||
|
Reference in New Issue
Block a user