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.scss109
1 files changed, 47 insertions, 62 deletions
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index fea78f1..8498487 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -1,79 +1,78 @@
1@use "sass:map"; 1@use 'sass:map';
2@use "sass:meta"; 2@use 'sass:meta';
3@use "sass:string"; 3@use 'sass:string';
4@use "pkg:iro-sass/bem"; 4@use 'pkg:iro-sass/src/bem';
5@use "pkg:iro-sass/props"; 5@use 'pkg:iro-sass/src/props';
6@use "../props" as *; 6@use '../props' as *;
7 7
8@forward "links.vars"; 8@forward 'links.vars';
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-thickness: props.get(vars.$hover--underline-width); 26 text-decoration-thickness: props.get(vars.$hover--underline-width);
27 text-decoration-skip-ink: none; 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 33 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
34 props.get(vars.$key-focus--border-width); 34 box-shadow:
35 box-shadow: 0 0 0 35 0
36 calc( 36 0
37 props.get(vars.$key-focus--border-width) + 37 0
38 props.get(vars.$key-focus--outline-width) 38 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
39 )
40 props.get(vars.$key-focus--outline-color); 39 props.get(vars.$key-focus--outline-color);
41 } 40 }
42 } 41 }
43 42
44 @include bem.modifier("invisible") { 43 @include bem.modifier('invisible') {
45 :link, 44 :link,
46 :visited { 45 :visited {
47 text-decoration: none; 46 text-decoration: none;
48 } 47 }
49 } 48 }
50 49
51 @include bem.modifier("colored") { 50 @include bem.modifier('colored') {
52 :link { 51 :link {
53 color: props.get(vars.$colored--text-color); 52 color: props.get(vars.$colored--text-color);
54 text-decoration-color: props.get(vars.$colored--underline-color); 53 text-decoration-color: props.get(vars.$colored--underline-color);
55 54
56 &:hover { 55 &:hover {
57 color: props.get(vars.$colored--hover--text-color); 56 color: props.get(vars.$colored--hover--text-color);
58 } 57 }
59 } 58 }
60 59
61 :visited { 60 :visited {
62 color: props.get(vars.$colored--visited--text-color); 61 color: props.get(vars.$colored--visited--text-color);
63 text-decoration-color: props.get(vars.$colored--visited--underline-color); 62 text-decoration-color: props.get(vars.$colored--visited--underline-color);
64 63
65 &:hover { 64 &:hover {
66 color: props.get(vars.$colored--visited--hover--text-color); 65 color: props.get(vars.$colored--visited--hover--text-color);
67 } 66 }
68 } 67 }
69 } 68 }
70 69
71 @include bem.modifier("mark-external") { 70 @include bem.modifier('mark-external') {
72 :link, 71 :link,
73 :visited { 72 :visited {
74 &[href^="http"] { 73 &[href^='http'] {
75 &::after { 74 &::after {
76 content: " ↗"; 75 content: ' ↗';
77 } 76 }
78 } 77 }
79 } 78 }
@@ -83,30 +82,21 @@
83 @include bem.modifier(string.slice($theme, 3)) { 82 @include bem.modifier(string.slice($theme, 3)) {
84 :link, 83 :link,
85 :visited { 84 :visited {
86 color: props.get(vars.$static-themes, $theme, --text-color); 85 color: props.get(vars.$static-themes, $theme, --text-color);
87 text-decoration-color: props.get( 86 text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color);
88 vars.$static-themes,
89 $theme,
90 --underline-color
91 );
92 87
93 &:hover { 88 &:hover {
94 color: props.get(vars.$static-themes, $theme, --hover, --text-color); 89 color: props.get(vars.$static-themes, $theme, --hover, --text-color);
95 } 90 }
96 91
97 &:focus-visible { 92 &:focus-visible {
98 color: props.get(vars.$static-themes, $theme, --key-focus, --text-color); 93 color: props.get(vars.$static-themes, $theme, --key-focus, --text-color);
99 outline-color: props.get( 94 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color);
100 vars.$static-themes, 95 box-shadow:
101 $theme, 96 0
102 --key-focus, 97 0
103 --border-color 98 0
104 ); 99 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
105 box-shadow: 0 0 0
106 calc(
107 props.get(vars.$key-focus--border-width) +
108 props.get(vars.$key-focus--outline-width)
109 )
110 props.get(vars.$static-themes, $theme, --key-focus, --outline-color); 100 props.get(vars.$static-themes, $theme, --key-focus, --outline-color);
111 } 101 }
112 } 102 }
@@ -116,26 +106,21 @@
116 :has(img) { 106 :has(img) {
117 img { 107 img {
118 margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset)); 108 margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
119 border: props.get(vars.$key-focus--border-offset) solid transparent; 109 border: props.get(vars.$key-focus--border-offset) solid transparent;
120 border-radius: calc( 110 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
121 props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)
122 );
123 } 111 }
124 112
125 &:link, 113 &:link,
126 &:visited { 114 &:visited {
127 &:focus-visible { 115 &:focus-visible {
128 outline: none; 116 outline: none;
129 box-shadow: none; 117 box-shadow: none;
130 118
131 img { 119 img {
132 outline: props.get(vars.$key-focus--border-color) solid 120 outline: props.get(vars.$key-focus--border-color) solid
133 props.get(vars.$key-focus--border-width); 121 props.get(vars.$key-focus--border-width);
134 box-shadow: 0 0 0 122 box-shadow: 0 0 0
135 calc( 123 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
136 props.get(vars.$key-focus--border-width) +
137 props.get(vars.$key-focus--outline-width)
138 )
139 props.get(vars.$key-focus--outline-color); 124 props.get(vars.$key-focus--outline-color);
140 } 125 }
141 } 126 }
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 23:05:39 +0000