diff options
| author | Mark Otto <markdotto@gmail.com> | 2022-10-06 03:42:48 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2022-11-11 21:27:17 +0300 |
| commit | 2bff30fd40ed055a7b167c4be3d1356414d1370b (patch) | |
| tree | d606554312c4a17cfd161b99e21977a047961ab9 | |
| parent | 50ce4d2f130a47441e4417d7114efe78809984e7 (diff) | |
Add link color rgb vars, document usage in Reboot docs
Fixes #37081
| -rw-r--r-- | scss/_reboot.scss | 4 | ||||
| -rw-r--r-- | scss/_root.scss | 2 | ||||
| -rw-r--r-- | site/content/docs/5.2/content/reboot.md | 9 |
3 files changed, 12 insertions, 3 deletions
diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 8ac790399f..7a76a45339 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -241,11 +241,11 @@ sup { top: -.5em; } // Links a { - color: var(--#{$prefix}link-color); + color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1)); text-decoration: $link-decoration; &:hover { - color: var(--#{$prefix}link-hover-color); + color: rgba(var(--#{$prefix}link-hover-color-rgb), var(--#{$prefix}link-opacity, 1)); text-decoration: $link-hover-decoration; } } diff --git a/scss/_root.scss b/scss/_root.scss index 18e85c4256..f348ccb6bd 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -71,6 +71,8 @@ --#{$prefix}heading-color: #{$headings-color}; --#{$prefix}link-color: #{$link-color}; --#{$prefix}link-hover-color: #{$link-hover-color}; + --#{$prefix}link-color-rgb: #{to-rgb($link-color)}; + --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)}; --#{$prefix}code-color: #{$code-color}; --#{$prefix}highlight-bg: #{$mark-bg}; diff --git a/site/content/docs/5.2/content/reboot.md b/site/content/docs/5.2/content/reboot.md index 0527ffa398..073487ed0c 100644 --- a/site/content/docs/5.2/content/reboot.md +++ b/site/content/docs/5.2/content/reboot.md @@ -97,12 +97,19 @@ All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin- ## Links -Hyperlinks have a default `color` and underline applied. While links change on `:hover`, they don't change based on whether someone `:visited` the link. They also receive no special `:focus` styles. +Links have a default `color` and underline applied. While links change on `:hover`, they don't change based on whether someone `:visited` the link. They also receive no special `:focus` styles. {{< example >}} <a href="#">This is an example link</a> {{< /example >}} +As of v5.3.x, link `color` is set using `rgba()` and new `-rgb` CSS variables, allowing for easy customization of link color opacity. Change the link color opacity with the `--bs-link-opacity` CSS variable: + +{{< example >}} +<a href="#" style="--bs-link-opacity: .5">This is an example link</a> +{{< /example >}} + + Placeholder links—those without an `href`—are targeted with a more specific selector and have their `color` and `text-decoration` reset to their default values. {{< example >}} |