@@ -22,39 +22,46 @@ $link-underline-offset: 0.1578em !default;
22
22
// - 0.12em (relative to the link's text size)
23
23
$link-hover-decoration-thickness : unquote (" max(3px, .1875rem, .12em)" ) !default ;
24
24
25
+ @function if-important ($important ) {
26
+ @return #{if ($important , " !important" , " " )} ;
27
+ }
28
+
25
29
// Ensures links have an underline decoration by default - needed to meet
26
30
// 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 ) ;
29
33
30
34
@if $link-underline-thickness {
31
- text-decoration-thickness : $link-underline-thickness ;
35
+ text-decoration-thickness : $link-underline-thickness
36
+ if-important ($important );
32
37
}
33
38
34
39
@if $link-underline-offset {
35
- text-underline-offset : $link-underline-offset ;
40
+ text-underline-offset : $link-underline-offset if-important ( $important ) ;
36
41
}
37
42
}
38
43
39
44
// Ensures links have an underline decoration on hover - distinct from the
40
45
// default behaviour
41
- @mixin link-decoration-hover {
46
+ @mixin link-decoration-hover ( $important : true) {
42
47
@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 );
44
50
// Disable ink skipping on underlines on hover. Browsers haven't
45
51
// 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
48
55
}
49
56
}
50
57
51
58
// Simple hover style - can be used alone or in conjunction with other mixins
52
59
// Add the text underline and change in thickness on hover
53
- @mixin link-style-hover {
60
+ @mixin link-style-hover ( $important : true) {
54
61
& :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 ) ;
58
65
}
59
66
}
60
67
0 commit comments