@@ -22,39 +22,46 @@ $link-underline-offset: 0.1578em !default;
2222// - 0.12em (relative to the link's text size)
2323$link-hover-decoration-thickness : unquote (" max(3px, .1875rem, .12em)" ) !default ;
2424
25+ @function if-important ($important ) {
26+ @return #{if ($important , " !important" , " " )} ;
27+ }
28+
2529// Ensures links have an underline decoration by default - needed to meet
2630// WCAG SC 1.4.1
27- @mixin link-decoration {
28- text-decoration : underline ;
31+ @mixin link-decoration ( $important : false) {
32+ text-decoration : underline if-important ( $important ) ;
2933
3034 @if $link-underline-thickness {
31- text-decoration-thickness : $link-underline-thickness ;
35+ text-decoration-thickness : $link-underline-thickness
36+ if-important ($important );
3237 }
3338
3439 @if $link-underline-offset {
35- text-underline-offset : $link-underline-offset ;
40+ text-underline-offset : $link-underline-offset if-important ( $important ) ;
3641 }
3742}
3843
3944// Ensures links have an underline decoration on hover - distinct from the
4045// default behaviour
41- @mixin link-decoration-hover {
46+ @mixin link-decoration-hover ( $important : true) {
4247 @if $link-hover-decoration-thickness {
43- text-decoration-thickness : $link-hover-decoration-thickness ;
48+ text-decoration-thickness : $link-hover-decoration-thickness
49+ if-important ($important );
4450 // Disable ink skipping on underlines on hover. Browsers haven't
4551 // standardised on this part of the spec yet, so set both properties
46- text-decoration-skip-ink : none ; // Chromium, Firefox
47- text-decoration-skip : none ; // Safari
52+ text-decoration-skip-ink : none
53+ if-important ($important ); // Chromium, Firefox
54+ text-decoration-skip : none if-important ($important ); // Safari
4855 }
4956}
5057
5158// Simple hover style - can be used alone or in conjunction with other mixins
5259// Add the text underline and change in thickness on hover
53- @mixin link-style-hover {
60+ @mixin link-style-hover ( $important : true) {
5461 & :hover {
55- @include link-decoration ;
56- @include link-decoration-hover ;
57- color : var (--pst-color-link-hover );
62+ @include link-decoration ( $important : $important ) ;
63+ @include link-decoration-hover ( $important : $important ) ;
64+ color : var (--pst-color-link-hover ) if-important ( $important ) ;
5865 }
5966}
6067
0 commit comments