Paths

author: Volpeon <git@volpeon.ink> 2026-07-22 12:27:09 +0200
committer: Volpeon <git@volpeon.ink> 2026-07-22 12:27:09 +0200
commit: cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
tree: d16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/objects/_switch.scss
parent: Update _index.scss (diff)
download: iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.gz
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.bz2
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.zip
1 files changed, 83 insertions, 71 deletions
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 0ef95e6..c1f7411 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -1,73 +1,79 @@
-@use 'sass:meta';
+@use "sass:meta";
-@use 'pkg:iro-sass/src/bem';
+@use "pkg:iro-sass/bem";
-@use 'pkg:iro-sass/src/props';
+@use "pkg:iro-sass/props";
-@use '../props' as *;
+@use "../props" as *;
-@use '../core.vars' as core;
+@use "../core.vars" as core;
-@forward 'switch.vars';
+@forward "switch.vars";
-@use 'switch.vars' as vars;
+@use "switch.vars" as vars;
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
-        @include bem.object('switch') {
+        @include bem.object("switch") {
-                position:       relative;
+                position: relative;
-                display:        inline-block;
+                display: inline-block;
-                padding-block:  props.get(vars.$pad-b);
+                padding-block: props.get(vars.$pad-b);
                padding-inline: props.get(vars.$pad-i);
-                margin-inline:
+                margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
-                        calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
+                        calc(
-                        calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
+                                props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(
+                                                vars.$key-focus--border-offset
+                                        )
+                        );
-                @include bem.elem('indicator') {
+                @include bem.elem("indicator") {
-                        display:            inline-block;
+                        display: inline-block;
-                        flex:               0 0 auto;
+                        flex: 0 0 auto;
-                        inline-size:        props.get(vars.$inline-size);
+                        inline-size: props.get(vars.$inline-size);
-                        block-size:         props.get(vars.$block-size);
+                        block-size: props.get(vars.$block-size);
-                        margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset));
+                        margin-block-start: calc(
-                        vertical-align:     top;
+                                0.5em * props.get(core.$font--standard--line-height) - 0.5 *
-                        background-color:   props.get(vars.$track-bg-color);
+                                        props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset)
-                        background-clip:    padding-box;
+                        );
-                        border:             props.get(vars.$key-focus--border-offset) solid transparent;
+                        vertical-align: top;
-                        border-radius:      2em;
+                        background-color: props.get(vars.$track-bg-color);
-                        transition:         background-color .2s ease;
+                        background-clip: padding-box;
+                        border: props.get(vars.$key-focus--border-offset) solid transparent;
+                        border-radius: 2em;
+                        transition: background-color 0.2s ease;
                        &::after {
-                                display:          block;
+                                display: block;
-                                inline-size:      calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
+                                inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
-                                block-size:       calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
+                                block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
-                                content:          '';
+                                content: "";
                                background-color: props.get(vars.$handle-bg-color);
-                                border:           props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
+                                border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
-                                border-radius:    props.get(vars.$inline-size);
+                                border-radius: props.get(vars.$inline-size);
-                                transition:       transform .2s ease;
+                                transition: transform 0.2s ease;
                        }
                }
-                @include bem.elem('label') {
+                @include bem.elem("label") {
                        margin-inline-start: props.get(vars.$label-gap);
                }
-                @include bem.elem('native') {
+                @include bem.elem("native") {
-                        position:           absolute;
+                        position: absolute;
-                        inset-block-start:  0;
+                        inset-block-start: 0;
                        inset-inline-start: 0;
-                        z-index:            -1;
+                        z-index: -1;
-                        inline-size:        100%;
+                        inline-size: 100%;
-                        block-size:         100%;
+                        block-size: 100%;
-                        padding:            0;
+                        padding: 0;
-                        margin:             0;
+                        margin: 0;
-                        overflow:           hidden;
+                        overflow: hidden;
-                        appearance:         none;
+                        appearance: none;
-                        border-radius:      props.get(vars.$rounding);
+                        border-radius: props.get(vars.$rounding);
                        &:hover,
                        &:focus-visible {
-                                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem("label") {
                                        color: props.get(vars.$hover--label-color);
                                }
-                                @include bem.sibling-elem('indicator') {
+                                @include bem.sibling-elem("indicator") {
                                        &::after {
                                                border-color: props.get(vars.$hover--handle-border-color);
                                        }
@@ -75,18 +81,23 @@
                        }
                        &:checked {
-                                @include bem.sibling-elem('indicator') {
+                                @include bem.sibling-elem("indicator") {
                                        background-color: props.get(vars.$handle-border-color);
                                        &::after {
                                                border-color: props.get(vars.$handle-border-color);
-                                                transform:    translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);
+                                                transform: translate(
+                                                        calc(
+                                                                props.get(vars.$inline-size) - props.get(vars.$block-size) + 0.5px
+                                                        ),
+                                                        0
+                                                );
                                        }
                                }
                                &:hover,
                                &:focus-visible {
-                                        @include bem.sibling-elem('indicator') {
+                                        @include bem.sibling-elem("indicator") {
                                                background-color: props.get(vars.$hover--handle-border-color);
                                                &::after {
@@ -97,21 +108,21 @@
                        }
                        &:disabled {
-                                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem("label") {
                                        color: props.get(vars.$disabled--label-color);
                                }
-                                @include bem.sibling-elem('indicator') {
+                                @include bem.sibling-elem("indicator") {
                                        background-color: props.get(vars.$disabled--track-bg-color);
                                        &::after {
                                                background-color: props.get(vars.$disabled--handle-bg-color);
-                                                border-color:     props.get(vars.$disabled--handle-border-color);
+                                                border-color: props.get(vars.$disabled--handle-border-color);
                                        }
                                }
                                &:checked {
-                                        @include bem.sibling-elem('indicator') {
+                                        @include bem.sibling-elem("indicator") {
                                                background-color: props.get(vars.$disabled--handle-border-color);
                                                &::after {
@@ -122,32 +133,33 @@
                        }
                        &:focus-visible {
-                                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem("label") {
                                        color: props.get(vars.$key-focus--label-color);
                                }
-                                @include bem.sibling-elem('indicator') {
+                                @include bem.sibling-elem("indicator") {
-                                        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
-                                        box-shadow:
+                                                props.get(vars.$key-focus--border-width);
-                                                0
+                                        box-shadow: 0 0 0
-                                                0
+                                                calc(
-                                                0
+                                                        props.get(vars.$key-focus--border-width) +
-                                                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                                props.get(vars.$key-focus--outline-width)
+                                                )
                                                props.get(vars.$key-focus--outline-color);
                                }
                        }
                }
-                @include bem.modifier('standalone') {
+                @include bem.modifier("standalone") {
-                        @include bem.elem('indicator') {
+                        @include bem.elem("indicator") {
                                margin-block-start: 0;
                        }
                }
-                @include bem.modifier('accent') {
+                @include bem.modifier("accent") {
-                        @include bem.elem('native') {
+                        @include bem.elem("native") {
                                &:checked {
-                                        @include bem.sibling-elem('indicator') {
+                                        @include bem.sibling-elem("indicator") {
                                                background-color: props.get(vars.$accent--handle-border-color);
                                                &::after {
@@ -157,7 +169,7 @@
                                        &:hover,
                                        &:focus-visible {
-                                                @include bem.sibling-elem('indicator') {
+                                                @include bem.sibling-elem("indicator") {
                                                        background-color: props.get(vars.$accent--hover--handle-border-color);
                                                        &::after {
@@ -168,12 +180,12 @@
                                }
                                &:disabled {
-                                        @include bem.sibling-elem('label') {
+                                        @include bem.sibling-elem("label") {
                                                color: props.get(vars.$disabled--label-color);
                                        }
                                        &:checked {
-                                                @include bem.sibling-elem('indicator') {
+                                                @include bem.sibling-elem("indicator") {
                                                        background-color: props.get(vars.$disabled--handle-border-color);
                                                        &::after {
author	Volpeon <git@volpeon.ink>	2026-07-22 12:27:09 +0200
committer	Volpeon <git@volpeon.ink>	2026-07-22 12:27:09 +0200
commit	cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
tree	d16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/objects/_switch.scss
parent	Update _index.scss (diff)
download	iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.gz iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.bz2 iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.zip

diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index 0ef95e6..c1f7411 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss
@@ -1,73 +1,79 @@
1	@use 'sass:meta';	1	@use "sass:meta";
2	@use 'pkg:iro-sass/src/bem';	2	@use "pkg:iro-sass/bem";
3	@use 'pkg:iro-sass/src/props';	3	@use "pkg:iro-sass/props";
4	@use '../props' as *;	4	@use "../props" as *;
5	@use '../core.vars' as core;	5	@use "../core.vars" as core;
6		6
7	@forward 'switch.vars';	7	@forward "switch.vars";
8	@use 'switch.vars' as vars;	8	@use "switch.vars" as vars;
9		9
10	@mixin styles {	10	@mixin styles {
11	@include materialize-at-root(meta.module-variables('vars'));	11	@include materialize-at-root(meta.module-variables("vars"));
12		12
13	@include bem.object('switch') {	13	@include bem.object("switch") {
14	position: relative;	14	position: relative;
15	display: inline-block;	15	display: inline-block;
16	padding-block: props.get(vars.$pad-b);	16	padding-block: props.get(vars.$pad-b);
17	padding-inline: props.get(vars.$pad-i);	17	padding-inline: props.get(vars.$pad-i);
18	margin-inline:	18	margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
19	calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))	19	calc(
20	calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));	20	props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(
		21	vars.$key-focus--border-offset
		22	)
		23	);
21		24
22	@include bem.elem('indicator') {	25	@include bem.elem("indicator") {
23	display: inline-block;	26	display: inline-block;
24	flex: 0 0 auto;	27	flex: 0 0 auto;
25	inline-size: props.get(vars.$inline-size);	28	inline-size: props.get(vars.$inline-size);
26	block-size: props.get(vars.$block-size);	29	block-size: props.get(vars.$block-size);
27	margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset));	30	margin-block-start: calc(
28	vertical-align: top;	31	0.5em * props.get(core.$font--standard--line-height) - 0.5 *
29	background-color: props.get(vars.$track-bg-color);	32	props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset)
30	background-clip: padding-box;	33	);
31	border: props.get(vars.$key-focus--border-offset) solid transparent;	34	vertical-align: top;
32	border-radius: 2em;	35	background-color: props.get(vars.$track-bg-color);
33	transition: background-color .2s ease;	36	background-clip: padding-box;
		37	border: props.get(vars.$key-focus--border-offset) solid transparent;
		38	border-radius: 2em;
		39	transition: background-color 0.2s ease;
34		40
35	&::after {	41	&::after {
36	display: block;	42	display: block;
37	inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));	43	inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
38	block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));	44	block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
39	content: '';	45	content: "";
40	background-color: props.get(vars.$handle-bg-color);	46	background-color: props.get(vars.$handle-bg-color);
41	border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color);	47	border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
42	border-radius: props.get(vars.$inline-size);	48	border-radius: props.get(vars.$inline-size);
43	transition: transform .2s ease;	49	transition: transform 0.2s ease;
44	}	50	}
45	}	51	}
46		52
47	@include bem.elem('label') {	53	@include bem.elem("label") {
48	margin-inline-start: props.get(vars.$label-gap);	54	margin-inline-start: props.get(vars.$label-gap);
49	}	55	}
50		56
51	@include bem.elem('native') {	57	@include bem.elem("native") {
52	position: absolute;	58	position: absolute;
53	inset-block-start: 0;	59	inset-block-start: 0;
54	inset-inline-start: 0;	60	inset-inline-start: 0;
55	z-index: -1;	61	z-index: -1;
56	inline-size: 100%;	62	inline-size: 100%;
57	block-size: 100%;	63	block-size: 100%;
58	padding: 0;	64	padding: 0;
59	margin: 0;	65	margin: 0;
60	overflow: hidden;	66	overflow: hidden;
61	appearance: none;	67	appearance: none;
62	border-radius: props.get(vars.$rounding);	68	border-radius: props.get(vars.$rounding);
63		69
64	&:hover,	70	&:hover,
65	&:focus-visible {	71	&:focus-visible {
66	@include bem.sibling-elem('label') {	72	@include bem.sibling-elem("label") {
67	color: props.get(vars.$hover--label-color);	73	color: props.get(vars.$hover--label-color);
68	}	74	}
69		75
70	@include bem.sibling-elem('indicator') {	76	@include bem.sibling-elem("indicator") {
71	&::after {	77	&::after {
72	border-color: props.get(vars.$hover--handle-border-color);	78	border-color: props.get(vars.$hover--handle-border-color);
73	}	79	}
@@ -75,18 +81,23 @@
75	}	81	}
76		82
77	&:checked {	83	&:checked {
78	@include bem.sibling-elem('indicator') {	84	@include bem.sibling-elem("indicator") {
79	background-color: props.get(vars.$handle-border-color);	85	background-color: props.get(vars.$handle-border-color);
80		86
81	&::after {	87	&::after {
82	border-color: props.get(vars.$handle-border-color);	88	border-color: props.get(vars.$handle-border-color);
83	transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);	89	transform: translate(
		90	calc(
		91	props.get(vars.$inline-size) - props.get(vars.$block-size) + 0.5px
		92	),
		93	0
		94	);
84	}	95	}
85	}	96	}
86		97
87	&:hover,	98	&:hover,
88	&:focus-visible {	99	&:focus-visible {
89	@include bem.sibling-elem('indicator') {	100	@include bem.sibling-elem("indicator") {
90	background-color: props.get(vars.$hover--handle-border-color);	101	background-color: props.get(vars.$hover--handle-border-color);
91		102
92	&::after {	103	&::after {
@@ -97,21 +108,21 @@
97	}	108	}
98		109
99	&:disabled {	110	&:disabled {
100	@include bem.sibling-elem('label') {	111	@include bem.sibling-elem("label") {
101	color: props.get(vars.$disabled--label-color);	112	color: props.get(vars.$disabled--label-color);
102	}	113	}
103		114
104	@include bem.sibling-elem('indicator') {	115	@include bem.sibling-elem("indicator") {
105	background-color: props.get(vars.$disabled--track-bg-color);	116	background-color: props.get(vars.$disabled--track-bg-color);
106		117
107	&::after {	118	&::after {
108	background-color: props.get(vars.$disabled--handle-bg-color);	119	background-color: props.get(vars.$disabled--handle-bg-color);
109	border-color: props.get(vars.$disabled--handle-border-color);	120	border-color: props.get(vars.$disabled--handle-border-color);
110	}	121	}
111	}	122	}
112		123
113	&:checked {	124	&:checked {
114	@include bem.sibling-elem('indicator') {	125	@include bem.sibling-elem("indicator") {
115	background-color: props.get(vars.$disabled--handle-border-color);	126	background-color: props.get(vars.$disabled--handle-border-color);
116		127
117	&::after {	128	&::after {
@@ -122,32 +133,33 @@
122	}	133	}
123		134
124	&:focus-visible {	135	&:focus-visible {
125	@include bem.sibling-elem('label') {	136	@include bem.sibling-elem("label") {
126	color: props.get(vars.$key-focus--label-color);	137	color: props.get(vars.$key-focus--label-color);
127	}	138	}
128		139
129	@include bem.sibling-elem('indicator') {	140	@include bem.sibling-elem("indicator") {
130	outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);	141	outline: props.get(vars.$key-focus--border-color) solid
131	box-shadow:	142	props.get(vars.$key-focus--border-width);
132	0	143	box-shadow: 0 0 0
133	0	144	calc(
134	0	145	props.get(vars.$key-focus--border-width) +
135	calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))	146	props.get(vars.$key-focus--outline-width)
		147	)
136	props.get(vars.$key-focus--outline-color);	148	props.get(vars.$key-focus--outline-color);
137	}	149	}
138	}	150	}
139	}	151	}
140		152
141	@include bem.modifier('standalone') {	153	@include bem.modifier("standalone") {
142	@include bem.elem('indicator') {	154	@include bem.elem("indicator") {
143	margin-block-start: 0;	155	margin-block-start: 0;
144	}	156	}
145	}	157	}
146		158
147	@include bem.modifier('accent') {	159	@include bem.modifier("accent") {
148	@include bem.elem('native') {	160	@include bem.elem("native") {
149	&:checked {	161	&:checked {
150	@include bem.sibling-elem('indicator') {	162	@include bem.sibling-elem("indicator") {
151	background-color: props.get(vars.$accent--handle-border-color);	163	background-color: props.get(vars.$accent--handle-border-color);
152		164
153	&::after {	165	&::after {
@@ -157,7 +169,7 @@
157		169
158	&:hover,	170	&:hover,
159	&:focus-visible {	171	&:focus-visible {
160	@include bem.sibling-elem('indicator') {	172	@include bem.sibling-elem("indicator") {
161	background-color: props.get(vars.$accent--hover--handle-border-color);	173	background-color: props.get(vars.$accent--hover--handle-border-color);
162		174
163	&::after {	175	&::after {
@@ -168,12 +180,12 @@
168	}	180	}
169		181
170	&:disabled {	182	&:disabled {
171	@include bem.sibling-elem('label') {	183	@include bem.sibling-elem("label") {
172	color: props.get(vars.$disabled--label-color);	184	color: props.get(vars.$disabled--label-color);
173	}	185	}
174		186
175	&:checked {	187	&:checked {
176	@include bem.sibling-elem('indicator') {	188	@include bem.sibling-elem("indicator") {
177	background-color: props.get(vars.$disabled--handle-border-color);	189	background-color: props.get(vars.$disabled--handle-border-color);
178		190
179	&::after {	191	&::after {