1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 12:51:52 +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:
Mark Otto
2021-05-24 11:56:19 -07:00
committed by Mark Otto
parent a2f92d1aab
commit e72916e5b7
7 changed files with 223 additions and 15 deletions

View File

@@ -32,6 +32,41 @@
}
}
// Colors
@function to-rgb($value) {
@return red($value), green($value), blue($value);
}
@function rgba-css-var($identifier, $target) {
@return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
}
// stylelint-disable scss/dollar-variable-pattern
@function map-loop($map, $func, $args...) {
$_map: ();
@each $key, $value in $map {
// allow to pass the $key and $value of the map as an function argument
$_args: ();
@each $arg in $args {
$_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
}
$_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
}
@return $_map;
}
// stylelint-enable scss/dollar-variable-pattern
@function varify($list) {
$result: null;
@each $entry in $list {
$result: append($result, var(--#{$variable-prefix}#{$entry}), space);
}
@return $result;
}
// Internal Bootstrap function to turn maps into its negative variant.
// It prefixes the keys with `n` and makes the value negative.
@function negativify-map($map) {