rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Improve colored links interaction with link utilities (#38398)

Browse Source 
* Fix missing paren in colored links color

* Restore important flag on colored links color and text-decoration-color for better interaction with link utilities

* Mention in migration guide
This commit is contained in:
Mark Otto 2023-04-10 09:46:52 -07:00 committed by GitHub
parent 01364cb49c
commit 9004a58c00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
scss/helpers/_colored-links.scss
View File

@ -1,17 +1,17 @@
// stylelint-disable function-name-case // stylelint-disable function-name-case, declaration-no-important
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
.link-#{$color} { .link-#{$color} {
color: RGBA(var(--#{$prefix}#{$color}-rgb, var(--#{$prefix}link-opacity, 1))); color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) !important;
text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)); text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) !important;
@if $link-shade-percentage != 0 { @if $link-shade-percentage != 0 {
&:hover, &:hover,
&:focus { &:focus {
$hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)); $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)); color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) !important;
text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)); text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) !important;
} }
} }
} }
@ -19,14 +19,14 @@
// One-off special link helper as a bridge until v6 // One-off special link helper as a bridge until v6
.link-body-emphasis { .link-body-emphasis {
color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)); color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) !important;
text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)); text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) !important;
@if $link-shade-percentage != 0 { @if $link-shade-percentage != 0 {
&:hover, &:hover,
&:focus { &:focus {
color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)); color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) !important;
text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)); text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) !important;
} }
} }
} }

4
site/content/docs/5.3/migration.md
View File

@ -11,6 +11,10 @@ toc: true
If you're migrating from our previous alpha releases of v5.3.0, please review their changes in addition to this section. If you're migrating from our previous alpha releases of v5.3.0, please review their changes in addition to this section.
### Helpers
- [Colored links]({{< docsref "/helpers/colored-links" >}}) once again have `!important` so they work better with our newly added link utilities.
### Utilities ### Utilities
- Added new `.d-inline-grid` [display utility]({{< docsref "/utilities/display" >}}). - Added new `.d-inline-grid` [display utility]({{< docsref "/utilities/display" >}}).