mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-11 16:14:04 +02:00
Code Issues Releases Wiki Activity

Docs: add shift-color() usage example in sass customization page (#39435)

Browse Source
This commit is contained in:
Julien Déramond
2023-12-12 08:08:19 +01:00
committed by GitHub
parent 43524225e2
commit f1cd1180b7
1 changed files with 7 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
site/content/docs/5.3/customize/sass.md
View File

@@ -244,6 +244,8 @@ Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we h
You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect.
`shift-color()` combines these two functions by shading the color if the weight is positive and tinting the color if the weight is negative.
{{< scss-docs name="color-functions" file="scss/_functions.scss" >}}
In practice, you'd call the function and pass in the color and weight parameters.
@@ -256,6 +258,11 @@ In practice, you'd call the function and pass in the color and weight parameters
.custom-element-2 {
color: shade-color($danger, 30%);
}
.custom-element-3 {
color: shift-color($success, 40%);
background-color: shift-color($success, -60%);
}
```
### Color contrast