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.
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.
@ -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);
$utilities: map-merge(
$utilities,
(
"color": map-merge(
map-get($utilities, "color"),
(
values: map-merge(
map-get(map-get($utilities, "color"), "values"),
(
$all-colors
),
),
),
),
)
);
@include utilities-add-values('color', $all-colors);
@import "bootstrap/scss/utilities/api";
```