summaryrefslogtreecommitdiffstats
path: root/src/scopes/_links.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/scopes/_links.scss')
-rw-r--r--src/scopes/_links.scss186
1 files changed, 93 insertions, 93 deletions
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 4ff242c..9ade0c2 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -9,111 +9,111 @@
9@use 'links.vars' as vars; 9@use 'links.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.scope('links') { 14 @include bem.scope('links') {
15 :link, 15 :link,
16 :visited { 16 :visited {
17 color: currentColor; 17 color: currentColor;
18 text-decoration: underline; 18 text-decoration: underline;
19 text-decoration-thickness: props.get(vars.$underline-width); 19 text-decoration-thickness: props.get(vars.$underline-width);
20 text-decoration-color: props.get(vars.$underline-color); 20 text-decoration-color: props.get(vars.$underline-color);
21 border-radius: props.get(vars.$rounding-sm); 21 border-radius: props.get(vars.$rounding-sm);
22 box-decoration-break: clone; 22 box-decoration-break: clone;
23 23
24 &:hover { 24 &:hover {
25 text-decoration: underline; 25 text-decoration: underline;
26 text-decoration-skip-ink: none; 26 text-decoration-thickness: props.get(vars.$hover--underline-width);
27 text-decoration-thickness: props.get(vars.$hover--underline-width); 27 text-decoration-skip-ink: none;
28 } 28 }
29 29
30 &:focus-visible { 30 &:focus-visible {
31 color: props.get(vars.$key-focus--text-color); 31 color: props.get(vars.$key-focus--text-color);
32 text-decoration: none; 32 text-decoration: none;
33 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 33 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
34 box-shadow: 34 box-shadow:
35 0 35 0
36 0 36 0
37 0 37 0
38 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 38 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
39 props.get(vars.$key-focus--outline-color); 39 props.get(vars.$key-focus--outline-color);
40 } 40 }
41 } 41 }
42 42
43 @include bem.modifier('invisible') { 43 @include bem.modifier('invisible') {
44 :link, 44 :link,
45 :visited { 45 :visited {
46 text-decoration: none; 46 text-decoration: none;
47 } 47 }
48 } 48 }
49 49
50 @include bem.modifier('colored') { 50 @include bem.modifier('colored') {
51 :link { 51 :link {
52 color: props.get(vars.$colored--text-color); 52 color: props.get(vars.$colored--text-color);
53 text-decoration-color: props.get(vars.$colored--underline-color); 53 text-decoration-color: props.get(vars.$colored--underline-color);
54 54
55 &:hover { 55 &:hover {
56 color: props.get(vars.$colored--hover--text-color); 56 color: props.get(vars.$colored--hover--text-color);
57 } 57 }
58 } 58 }
59 59
60 :visited { 60 :visited {
61 color: props.get(vars.$colored--visited--text-color); 61 color: props.get(vars.$colored--visited--text-color);
62 text-decoration-color: props.get(vars.$colored--visited--underline-color); 62 text-decoration-color: props.get(vars.$colored--visited--underline-color);
63 63
64 &:hover { 64 &:hover {
65 color: props.get(vars.$colored--visited--hover--text-color); 65 color: props.get(vars.$colored--visited--hover--text-color);
66 } 66 }
67 } 67 }
68 } 68 }
69 69
70 @each $theme in map.keys(props.get(vars.$static-themes)) { 70 @each $theme in map.keys(props.get(vars.$static-themes)) {
71 @include bem.modifier(string.slice($theme, 3)) { 71 @include bem.modifier(string.slice($theme, 3)) {
72 :link, 72 :link,
73 :visited { 73 :visited {
74 color: props.get(vars.$static-themes, $theme, --text-color); 74 color: props.get(vars.$static-themes, $theme, --text-color);
75 text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color); 75 text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color);
76 76
77 &:hover { 77 &:hover {
78 color: props.get(vars.$static-themes, $theme, --hover, --text-color); 78 color: props.get(vars.$static-themes, $theme, --hover, --text-color);
79 } 79 }
80 80
81 &:focus-visible { 81 &:focus-visible {
82 color: props.get(vars.$static-themes, $theme, --key-focus, --text-color); 82 color: props.get(vars.$static-themes, $theme, --key-focus, --text-color);
83 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color); 83 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color);
84 box-shadow: 84 box-shadow:
85 0 85 0
86 0 86 0
87 0 87 0
88 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 88 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
89 props.get(vars.$static-themes, $theme, --key-focus, --outline-color); 89 props.get(vars.$static-themes, $theme, --key-focus, --outline-color);
90 } 90 }
91 } 91 }
92 } 92 }
93 } 93 }
94 94
95 @include bem.elem('image') { 95 @include bem.elem('image') {
96 img { 96 img {
97 margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset)); 97 margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
98 border: props.get(vars.$key-focus--border-offset) solid transparent; 98 border: props.get(vars.$key-focus--border-offset) solid transparent;
99 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 99 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
100 } 100 }
101 101
102 &:link, 102 &:link,
103 &:visited { 103 &:visited {
104 &:focus-visible { 104 &:focus-visible {
105 outline: none; 105 outline: none;
106 box-shadow: none; 106 box-shadow: none;
107 107
108 img { 108 img {
109 outline: props.get(vars.$key-focus--border-color) solid 109 outline: props.get(vars.$key-focus--border-color) solid
110 props.get(vars.$key-focus--border-width); 110 props.get(vars.$key-focus--border-width);
111 box-shadow: 0 0 0 111 box-shadow: 0 0 0
112 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 112 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
113 props.get(vars.$key-focus--outline-color); 113 props.get(vars.$key-focus--outline-color);
114 } 114 }
115 } 115 }
116 } 116 }
117 } 117 }
118 } 118 }
119} 119}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-08-12 08:34:54 +0000