web/bootstrap-html
1
0
Fork 0
Code Issues Activity

Merging upstream version 5.3.3+dfsg.

Browse source 
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
Daniel Baumann 2025-02-17 07:09:00 +01:00
parent 7de2f7c554
commit e37edd7108
Signed by: daniel
GPG key ID: FBB4F0E80A80222F
161 changed files with 5244 additions and 4419 deletions
Download patch file Download diff file Expand all files Collapse all files

17
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
@ -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(light) {
// Insert light mode styles here
}
@include color-scheme(dark) {
// Insert dark mode styles here
}
@include color-scheme(custom-named-scheme) {
// Insert custom color scheme styles here
}
}
```