diff options
author | Mario <mario@mariovavti.com> | 2023-04-28 19:02:23 +0000 |
---|---|---|
committer | Mario <mario@mariovavti.com> | 2023-04-28 19:02:23 +0000 |
commit | 2a1341b910dfb1187dd9fceebd2b3be14e825e28 (patch) | |
tree | f2f5a26394d0a1a905823dd71b620e9c964fb155 /vendor/twbs/bootstrap/site/content/docs/5.3/helpers/colored-links.md | |
parent | 1ed8b9dd149b9d2cb2fe30dc56ddc24cc523255c (diff) | |
download | volse-hubzilla-2a1341b910dfb1187dd9fceebd2b3be14e825e28.tar.gz volse-hubzilla-2a1341b910dfb1187dd9fceebd2b3be14e825e28.tar.bz2 volse-hubzilla-2a1341b910dfb1187dd9fceebd2b3be14e825e28.zip |
update bootstrap
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/helpers/colored-links.md')
-rw-r--r-- | vendor/twbs/bootstrap/site/content/docs/5.3/helpers/colored-links.md | 30 |
1 files changed, 26 insertions, 4 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/colored-links.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/colored-links.md index e940196ff..6a3dbe4b7 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/colored-links.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/colored-links.md @@ -3,19 +3,41 @@ layout: docs title: Colored links description: Colored links with hover states group: helpers -toc: false +toc: true --- -You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. +## Link colors + +You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. + +{{< callout info >}} +**Heads up!** `.link-body-emphasis` is currently the only colored link that adapts to color modes. It's treated as a special case until v6 arrives and we can more thoroughly rebuild our theme colors for color modes. Until then, it's a unique, high-contrast link color with custom `:hover` and `:focus` styles. However, it still responds to the new link utilities. +{{< /callout >}} {{< example >}} {{< colored-links.inline >}} {{- range (index $.Site.Data "theme-colors") }} -<a href="#" class="link-{{ .name }}">{{ .name | title }} link</a> +<p><a href="#" class="link-{{ .name }}">{{ .name | title }} link</a></p> {{- end -}} {{< /colored-links.inline >}} +<p><a href="#" class="link-body-emphasis">Emphasis link</a></p> {{< /example >}} {{< callout info >}} -Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. +{{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} + +## Link utilities + +{{< added-in "5.3.0" >}} + +Colored links can also be modified by our [link utilities]({{< docsref "/utilities/link/" >}}). + +{{< example >}} +{{< colored-links.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +<p><a href="#" class="link-{{ .name }} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">{{ .name | title }} link</a></p> +{{- end -}} +{{< /colored-links.inline >}} +<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p> +{{< /example >}} |