]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Improve colored links interaction with link utilities (#38398)
authorMark Otto <markd.otto@gmail.com>
Mon, 10 Apr 2023 16:46:52 +0000 (09:46 -0700)
committerGitHub <noreply@github.com>
Mon, 10 Apr 2023 16:46:52 +0000 (09:46 -0700)
* 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

scss/helpers/_colored-links.scss
site/content/docs/5.3/migration.md

index 6d3595af71be7f1e0f9d8bd9709fe17494394644..306a04eddc916c9b3b702adbbb298ea210847f7d 100644 (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
 @each $color, $value in $theme-colors {
   .link-#{$color} {
-    color: RGBA(var(--#{$prefix}#{$color}-rgb, var(--#{$prefix}link-opacity, 1)));
-    text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-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)) !important;
 
     @if $link-shade-percentage != 0 {
       &:hover,
       &:focus {
         $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));
-        text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-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)) !important;
       }
     }
   }
 
 // One-off special link helper as a bridge until v6
 .link-body-emphasis {
-  color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1));
-  text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-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)) !important;
 
   @if $link-shade-percentage != 0 {
     &:hover,
     &:focus {
-      color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75));
-      text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-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)) !important;
     }
   }
 }
index 19270b1cce21295984cd855dbc3597a86a708875..99575b561b8aa649555f15871ff02247f228caa1 100644 (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.
 
+### Helpers
+
+- [Colored links]({{< docsref "/helpers/colored-links" >}}) once again have `!important` so they work better with our newly added link utilities.
+
 ### Utilities
 
 - Added new `.d-inline-grid` [display utility]({{< docsref "/utilities/display" >}}).