mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 20:55:50 +02:00
Code Issues Releases Wiki Activity

Update color and background-color utilities

Browse Source 
- Adds new functions to generate additional Sass maps
- Adds new root variables for rgb() versions of our theme colors, plus a few extras
- Adds ability to change the alpha transparency of text color and background color utilities with new utilities, inline styles, or local CSS var
- Updates documentation for color and background-color utilities pages
- Deprecates .text-black-50 and .text-white-50 since those (and additional transparency levels) can be generated on the fly

Change approach slightly to prevent cascade
This commit is contained in:
Mark Otto
2021-05-24 11:56:19 -07:00
committed by Mark Otto
parent a2f92d1aab
commit e72916e5b7
7 changed files with 223 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
site/content/docs/5.0/utilities/background.md
View File

@@ -35,6 +35,44 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
{{< /colors.inline >}}
{{< /markdown >}}
## Opacity
<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.0</small>
As of v5.1.0, `background-color` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
### How it works
Consider our default `.bg-success` utility.
```css
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
```
We use an RGB version of our `--bs-succes` (with the value of `25, 135, 84`) CSS variable and attached a second CSS variable, `--bs-bg-opacity`, for the alpha transparency (with no default value, but a fallback of `1`). That means anytime you use `.bg-success` now, your computed `color` value is `rgba(25, 135, 84, 1)`.
### Example
To change that opacity, override `--bs-bg-opacity` via custom styles or inline styles.
{{< example >}}
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2" style="--bs-bg-opacity: .5;">This is 50% opacity success background</div>
{{< /example >}}
Or, choose from any of the `.bg-opacity` utilities:
{{< example >}}
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
{{< /example >}}
## Sass
In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
@@ -63,6 +101,14 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen
{{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}}
RGB colors are generated from a separate Sass map:
{{< scss-docs name="theme-colors-rgb" file="scss/_variables.scss" >}}
And background color opacities build on that with their own map that's consumed by the utilities API:
{{< scss-docs name="utilities-bg-colors" file="scss/_variables.scss" >}}
### Mixins
**No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you'd like to create your own gradients.

49
site/content/docs/5.0/utilities/colors.md
View File

@@ -23,10 +23,51 @@ Colorize text with color utilities. If you want to colorize links, you can use t
<p class="text-white-50 bg-dark">.text-white-50</p>
{{< /example >}}
{{< callout warning >}}
**Deprecation:** With the addition of `.text-opacity-*` utilities and CSS variables for text utilities, `.text-black-50` and `.text-white-50` are deprecated as of v5.1.0. They'll be removed in v6.0.0.
{{< /callout >}}
{{< callout info >}}
{{< partial "callout-warning-color-assistive-technologies.md" >}}
{{< /callout >}}
## Opacity
<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.0</small>
As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
### How it works
Consider our default `.text-primary` utility.
```css
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
```
We use an RGB version of our `--bs-primary` (with the value of `13, 110, 253`) CSS variable and attached a second CSS variable, `--bs-text-opacity`, for the alpha transparency (with no default value, but a fallback of `1`). That means anytime you use `.text-primary` now, your computed `color` value is `rgba(13, 110, 253, 1)`.
### Example
To change that opacity, override `--bs-text-opacity` via custom styles or inline styles.
{{< example >}}
<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>
{{< /example >}}
Or, choose from any of the `.text-opacity` utilities:
{{< example >}}
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>
{{< /example >}}
## Specificity
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` or more semantic element with the desired class.
@@ -57,6 +98,14 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen
{{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}}
RGB colors are generated from a separate Sass map:
{{< scss-docs name="theme-colors-rgb" file="scss/_variables.scss" >}}
And color opacities build on that with their own map that's consumed by the utilities API:
{{< scss-docs name="utilities-text-colors" file="scss/_variables.scss" >}}
### Utilities API
Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})