rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00
Code Issues Actions Packages Releases Activity

Update documentation for customizing colors

Browse Source
This commit is contained in:
Romaric Pascal 2023-02-17 11:04:55 +00:00
parent 5df18c3853
commit 4ebdcef96f
1 changed files with 2 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
site/content/docs/5.3/customize/color.md
View File

@ -473,7 +473,7 @@ Bootstrap doesn't include `color` and `background-color` utilities for every col
1. To start, make sure you've imported our functions, variables, mixins, and utilities. 1. To start, make sure you've imported our functions, variables, mixins, and utilities.
2. Use our `map-merge-multiple()` function to quickly merge multiple Sass maps together in a new map. 2. Use our `map-merge-multiple()` function to quickly merge multiple Sass maps together in a new map.
3. Merge this new combined map to extend any utility with a `{color}-{level}` class name. 3. Use our [mixins for modifying the utilities map]({{< docsref "/utilities/api#modify-defaults" >}}) to merge the values to the existing ones
Here's an example that generates text color utilities (e.g., `.text-purple-500`) using the above steps. Here's an example that generates text color utilities (e.g., `.text-purple-500`) using the above steps.
@ -487,22 +487,7 @@ Here's an example that generates text color utilities (e.g., `.text-purple-500`)
$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans); $all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
$utilities: map-merge( @include utilities-add-values('color', $all-colors);
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);
@import "bootstrap/scss/utilities/api"; @import "bootstrap/scss/utilities/api";
``` ```