mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-13 13:29:25 +01:00
Docs: add shift-color()
usage example in sass customization page (#39435)
Some checks failed
BrowserStack / browserstack (push) Has been cancelled
Bundlewatch / bundlewatch (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
cspell / cspell (push) Has been cancelled
CSS / css (push) Has been cancelled
Docs / docs (push) Has been cancelled
JS Tests / JS Tests (push) Has been cancelled
Lint / lint (push) Has been cancelled
CSS (node-sass) / css (push) Has been cancelled
Release notes / update_release_draft (push) Has been cancelled
Some checks failed
BrowserStack / browserstack (push) Has been cancelled
Bundlewatch / bundlewatch (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
cspell / cspell (push) Has been cancelled
CSS / css (push) Has been cancelled
Docs / docs (push) Has been cancelled
JS Tests / JS Tests (push) Has been cancelled
Lint / lint (push) Has been cancelled
CSS (node-sass) / css (push) Has been cancelled
Release notes / update_release_draft (push) Has been cancelled
This commit is contained in:
parent
43524225e2
commit
f1cd1180b7
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user