diff options
author | Mario <mario@mariovavti.com> | 2021-07-29 08:25:05 +0000 |
---|---|---|
committer | Mario <mario@mariovavti.com> | 2021-07-29 08:25:05 +0000 |
commit | d459dfac74e90c29950d49a82edc19fd913d435e (patch) | |
tree | 7bed5f2dbc318f87bbe0f4be2cde3dde09cd97c7 /vendor/twbs/bootstrap/site/content/docs/5.0/utilities/colors.md | |
parent | cec2f0d894b80f3affeb60cff2d4afa49a2019a8 (diff) | |
download | volse-hubzilla-d459dfac74e90c29950d49a82edc19fd913d435e.tar.gz volse-hubzilla-d459dfac74e90c29950d49a82edc19fd913d435e.tar.bz2 volse-hubzilla-d459dfac74e90c29950d49a82edc19fd913d435e.zip |
update to bootstrap 5.0.2
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.0/utilities/colors.md')
-rw-r--r-- | vendor/twbs/bootstrap/site/content/docs/5.0/utilities/colors.md | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.0/utilities/colors.md b/vendor/twbs/bootstrap/site/content/docs/5.0/utilities/colors.md new file mode 100644 index 000000000..266f671f6 --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.0/utilities/colors.md @@ -0,0 +1,64 @@ +--- +layout: docs +title: Colors +description: Convey meaning through `color` with a handful of color utility classes. Includes support for styling links with hover states, too. +group: utilities +toc: true +--- + +## Colors + +Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states. + +{{< example >}} +{{< colors.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +<p class="text-{{ .name }}{{ with .contrast_color }} bg-{{ . }}{{ end }}">.text-{{ .name }}</p> +{{- end -}} +{{< /colors.inline >}} +<p class="text-body">.text-body</p> +<p class="text-muted">.text-muted</p> +<p class="text-white bg-dark">.text-white</p> +<p class="text-black-50">.text-black-50</p> +<p class="text-white-50 bg-dark">.text-white-50</p> +{{< /example >}} + +{{< callout info >}} +{{< partial "callout-warning-color-assistive-technologies.md" >}} +{{< /callout >}} + +## 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. + +## 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. + +### Variables + +Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables. + +{{< scss-docs name="color-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}} + +Grayscale colors are also available, but only a subset are used to generate any utilities. + +{{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}} + +### Map + +Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more. + +{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}} + +Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.** + +{{< scss-docs name="gray-colors-map" 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" >}}) + +{{< scss-docs name="utils-color" file="scss/_utilities.scss" >}} |