kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Add link color rgb vars, document usage in Reboot docs

Browse source 
Fixes #37081
This commit is contained in:
Mark Otto 2022-10-05 17:42:48 -07:00
parent 3ae81edad9
commit 3c1354634b
3 changed files with 12 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

4
scss/_reboot.scss
View file

@ -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;
}
}

2
scss/_root.scss
View file

@ -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};

9
site/content/docs/5.2/content/reboot.md
View file

@ -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 >}}