diff options
| author | Mark Otto <[email protected]> | 2023-01-10 16:34:25 -0800 |
|---|---|---|
| committer | GitHub <[email protected]> | 2023-01-10 16:34:25 -0800 |
| commit | a901027ab02f86a0dc6ca3472cb7b63c128a6314 (patch) | |
| tree | 868b835fd90124d9dc66b52d26317e67c23b0e94 /site/content/docs | |
| parent | f40e76d1f77c020be337d4244c7cfb13a2b5bd9c (diff) | |
| download | bootstrap-a901027ab02f86a0dc6ca3472cb7b63c128a6314.tar.xz bootstrap-a901027ab02f86a0dc6ca3472cb7b63c128a6314.zip | |
Update colored links, add new `.link-body-emphasis` helper (#37833)
* Rewrite colored links to use color property again instead of --bs-link-color-rgb value because nav links and more do not set --bs-link-color-rgb
* Update bundlewatch
* Document it
Co-authored-by: Julien Déramond <[email protected]>
Diffstat (limited to 'site/content/docs')
| -rw-r--r-- | site/content/docs/5.3/helpers/colored-links.md | 6 |
1 files changed, 6 insertions, 0 deletions
diff --git a/site/content/docs/5.3/helpers/colored-links.md b/site/content/docs/5.3/helpers/colored-links.md index 9cdd0fad0..6a3dbe4b7 100644 --- a/site/content/docs/5.3/helpers/colored-links.md +++ b/site/content/docs/5.3/helpers/colored-links.md @@ -10,12 +10,17 @@ 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. 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") }} <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 >}} @@ -34,4 +39,5 @@ Colored links can also be modified by our [link utilities]({{< docsref "/utiliti <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 >}} |