diff options
author | Mario <mario@mariovavti.com> | 2024-03-06 13:57:07 +0000 |
---|---|---|
committer | Mario <mario@mariovavti.com> | 2024-03-06 13:57:07 +0000 |
commit | 5eb6572277ab8f83acc51f96ec94db4e074d01b2 (patch) | |
tree | 720a70f81ae1b23bb57f520c61bce74fdbc53484 /vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md | |
parent | 69bed9c889a5c153f7b9cece49be3b81bde24e32 (diff) | |
download | volse-hubzilla-5eb6572277ab8f83acc51f96ec94db4e074d01b2.tar.gz volse-hubzilla-5eb6572277ab8f83acc51f96ec94db4e074d01b2.tar.bz2 volse-hubzilla-5eb6572277ab8f83acc51f96ec94db4e074d01b2.zip |
update composer libs
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md')
-rw-r--r-- | vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md | 17 |
1 files changed, 12 insertions, 5 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md index ceadf3a98..a2b2bb26c 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/sass.md @@ -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 @@ -338,18 +345,18 @@ Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap a ### Color schemes -A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin. +A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light` and `dark` color schemes. See [the color modes documentation]({{< docsref "/customize/color-modes" >}}) for information on our color mode mixin. {{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}} ```scss .custom-element { - @include color-scheme(dark) { - // Insert dark mode styles here + @include color-scheme(light) { + // Insert light mode styles here } - @include color-scheme(custom-named-scheme) { - // Insert custom color scheme styles here + @include color-scheme(dark) { + // Insert dark mode styles here } } ``` |