Switch to tab indentationHEAD master

author: Volpeon <git@volpeon.ink> 2025-08-06 16:40:56 +0200
committer: Volpeon <git@volpeon.ink> 2025-08-06 16:40:56 +0200
commit: 41b0d0497988274057fc2512c822a6bc9d2d3ebd (patch)
tree: 015a95ede42b799ac1fd049baa8b0a853b6d3bb3 /src/scopes/_links.scss
parent: Fix button font size (diff)
download: iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.gz
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.bz2
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.zip
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 @@
 @use 'links.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.scope('links') {
+        @include bem.scope('links') {
-        :link,
+                :link,
-        :visited {
+                :visited {
-            color:                     currentColor;
+                        color:                     currentColor;
-            text-decoration:           underline;
+                        text-decoration:           underline;
-            text-decoration-thickness: props.get(vars.$underline-width);
+                        text-decoration-thickness: props.get(vars.$underline-width);
-            text-decoration-color:     props.get(vars.$underline-color);
+                        text-decoration-color:     props.get(vars.$underline-color);
-            border-radius:             props.get(vars.$rounding-sm);
+                        border-radius:             props.get(vars.$rounding-sm);
-            box-decoration-break:      clone;
+                        box-decoration-break:      clone;
-            &:hover {
+                        &:hover {
-                text-decoration:           underline;
+                                text-decoration:           underline;
-                text-decoration-skip-ink:  none;
+                                text-decoration-thickness: props.get(vars.$hover--underline-width);
-                text-decoration-thickness: props.get(vars.$hover--underline-width);
+                                text-decoration-skip-ink:  none;
-            }
+                        }
-            &:focus-visible {
+                        &:focus-visible {
-                color:           props.get(vars.$key-focus--text-color);
+                                color:           props.get(vars.$key-focus--text-color);
-                text-decoration: none;
+                                text-decoration: none;
-                outline:         props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                outline:         props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                box-shadow:
+                                box-shadow:
-                    0
+                                        0
-                    0
+                                        0
-                    0
+                                        0
-                    calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                    props.get(vars.$key-focus--outline-color);
+                                        props.get(vars.$key-focus--outline-color);
-            }
+                        }
-        }
+                }
-        @include bem.modifier('invisible') {
+                @include bem.modifier('invisible') {
-            :link,
+                        :link,
-            :visited {
+                        :visited {
-                text-decoration: none;
+                                text-decoration: none;
-            }
+                        }
-        }
+                }
-        @include bem.modifier('colored') {
+                @include bem.modifier('colored') {
-            :link {
+                        :link {
-                color:                 props.get(vars.$colored--text-color);
+                                color:                 props.get(vars.$colored--text-color);
-                text-decoration-color: props.get(vars.$colored--underline-color);
+                                text-decoration-color: props.get(vars.$colored--underline-color);
-                &:hover {
+                                &:hover {
-                    color:             props.get(vars.$colored--hover--text-color);
+                                        color:             props.get(vars.$colored--hover--text-color);
-                }
+                                }
-            }
+                        }
-            :visited {
+                        :visited {
-                color:                 props.get(vars.$colored--visited--text-color);
+                                color:                 props.get(vars.$colored--visited--text-color);
-                text-decoration-color: props.get(vars.$colored--visited--underline-color);
+                                text-decoration-color: props.get(vars.$colored--visited--underline-color);
-                &:hover {
+                                &:hover {
-                    color:             props.get(vars.$colored--visited--hover--text-color);
+                                        color:             props.get(vars.$colored--visited--hover--text-color);
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @each $theme in map.keys(props.get(vars.$static-themes)) {
+                @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
-                :link,
+                                :link,
-                :visited {
+                                :visited {
-                    color:                 props.get(vars.$static-themes, $theme, --text-color);
+                                        color:                 props.get(vars.$static-themes, $theme, --text-color);
-                    text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color);
+                                        text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color);
-                    &:hover {
+                                        &:hover {
-                        color:             props.get(vars.$static-themes, $theme, --hover, --text-color);
+                                                color:             props.get(vars.$static-themes, $theme, --hover, --text-color);
-                    }
+                                        }
-                    &:focus-visible {
+                                        &:focus-visible {
-                        color:         props.get(vars.$static-themes, $theme, --key-focus, --text-color);
+                                                color:         props.get(vars.$static-themes, $theme, --key-focus, --text-color);
-                        outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color);
+                                                outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color);
-                        box-shadow:
+                                                box-shadow:
-                            0
+                                                        0
-                            0
+                                                        0
-                            0
+                                                        0
-                            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                            props.get(vars.$static-themes, $theme, --key-focus, --outline-color);
+                                                        props.get(vars.$static-themes, $theme, --key-focus, --outline-color);
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.elem('image') {
+                @include bem.elem('image') {
-            img {
+                        img {
-                margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
+                                margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
-                border:        props.get(vars.$key-focus--border-offset) solid transparent;
+                                border:        props.get(vars.$key-focus--border-offset) solid transparent;
-                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
-            }
+                        }
    
-            &:link,
+                        &:link,
-            &:visited {
+                        &:visited {
-                &:focus-visible {
+                                &:focus-visible {
-                    outline:    none;
+                                        outline:    none;
-                    box-shadow: none;
+                                        box-shadow: none;
    
-                    img {
+                                        img {
-                        outline: props.get(vars.$key-focus--border-color) solid
+                                                outline: props.get(vars.$key-focus--border-color) solid
-                            props.get(vars.$key-focus--border-width);
+                                                        props.get(vars.$key-focus--border-width);
-                        box-shadow: 0 0 0
+                                                box-shadow: 0 0 0
-                            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                            props.get(vars.$key-focus--outline-color);
+                                                        props.get(vars.$key-focus--outline-color);
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-        }
+                }
-    }
+        }
 }
author	Volpeon <git@volpeon.ink>	2025-08-06 16:40:56 +0200
committer	Volpeon <git@volpeon.ink>	2025-08-06 16:40:56 +0200
commit	41b0d0497988274057fc2512c822a6bc9d2d3ebd (patch)
tree	015a95ede42b799ac1fd049baa8b0a853b6d3bb3 /src/scopes/_links.scss
parent	Fix button font size (diff)
download	iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.gz iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.bz2 iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.zip

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	}