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