PathsHEAD master

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/_divider.scss
parent: Update _index.scss (diff)
download: iro-design-master.tar.gz
iro-design-master.tar.bz2
iro-design-master.zip
1 files changed, 67 insertions, 67 deletions
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index d81284b..f082d12 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -1,38 +1,38 @@
-@use 'sass:map';
+@use "sass:map";
-@use 'sass:meta';
+@use "sass:meta";
-@use 'sass:string';
+@use "sass:string";
-@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 'divider.vars';
+@forward "divider.vars";
-@use 'divider.vars' as vars;
+@use "divider.vars" as vars;
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
-        @include bem.object('divider') {
+        @include bem.object("divider") {
-                display:          flex;
+                display: flex;
-                flex:             0 0 auto;
+                flex: 0 0 auto;
-                flex-direction:   row;
+                flex-direction: row;
-                align-items:      center;
+                align-items: center;
-                block-size:       1em;
+                block-size: 1em;
-                margin-block:     props.get(vars.$margin-b);
+                margin-block: props.get(vars.$margin-b);
-                font-size:        props.get(vars.$strong--label-font-size);
+                font-size: props.get(vars.$strong--label-font-size);
-                font-weight:      700;
+                font-weight: 700;
-                line-height:      1;
+                line-height: 1;
-                color:            props.get(vars.$strong--label-color);
+                color: props.get(vars.$strong--label-color);
-                text-transform:   uppercase;
+                text-transform: uppercase;
-                letter-spacing:   props.get(vars.$letter-spacing);
+                letter-spacing: props.get(vars.$letter-spacing);
                background-color: transparent;
                &::before,
                &::after {
-                        flex:             1 1 auto;
+                        flex: 1 1 auto;
-                        inline-size:      100%;
+                        inline-size: 100%;
-                        block-size:       props.get(vars.$strong--border-width);
+                        block-size: props.get(vars.$strong--border-width);
-                        content:          '';
+                        content: "";
                        background-color: props.get(vars.$strong--bg-color);
                }
@@ -40,15 +40,15 @@
                        display: block;
                }
-                @include bem.elem('label') {
+                @include bem.elem("label") {
                        flex: 0 0 auto;
                }
-                @include bem.modifier('vertical') {
+                @include bem.modifier("vertical") {
-                        align-self:       stretch;
+                        align-self: stretch;
-                        inline-size:      props.get(vars.$vertical--border-width);
+                        inline-size: props.get(vars.$vertical--border-width);
-                        block-size:       auto;
+                        block-size: auto;
-                        margin-block:     0;
+                        margin-block: 0;
                        background-color: props.get(vars.$strong--bg-color);
                        &::before,
@@ -57,13 +57,13 @@
                        }
                }
-                @include bem.modifier('dot') {
+                @include bem.modifier("dot") {
-                        align-self:       center;
+                        align-self: center;
-                        inline-size:      props.get(vars.$dot--size);
+                        inline-size: props.get(vars.$dot--size);
-                        block-size:       props.get(vars.$dot--size);
+                        block-size: props.get(vars.$dot--size);
-                        margin-block:     0;
+                        margin-block: 0;
                        background-color: props.get(vars.$strong--bg-color);
-                        border-radius:    props.get(vars.$dot--size);
+                        border-radius: props.get(vars.$dot--size);
                        &::before,
                        &::after {
@@ -71,73 +71,73 @@
                        }
                }
-                @include bem.modifier('medium') {
+                @include bem.modifier("medium") {
-                        font-size:   props.get(vars.$medium--label-font-size);
+                        font-size: props.get(vars.$medium--label-font-size);
                        font-weight: 500;
-                        color:       props.get(vars.$medium--label-color);
+                        color: props.get(vars.$medium--label-color);
                        &::before,
                        &::after {
-                                block-size:       props.get(vars.$medium--border-width);
+                                block-size: props.get(vars.$medium--border-width);
                                background-color: props.get(vars.$medium--bg-color);
                        }
-                        @include bem.modifier('vertical') {
+                        @include bem.modifier("vertical") {
                                background-color: props.get(vars.$medium--bg-color);
                        }
-                        @include bem.modifier('dot') {
+                        @include bem.modifier("dot") {
                                background-color: props.get(vars.$medium--bg-color);
                        }
                }
-                @include bem.modifier('quiet') {
+                @include bem.modifier("quiet") {
-                        font-size:   props.get(vars.$quiet--label-font-size);
+                        font-size: props.get(vars.$quiet--label-font-size);
                        font-weight: 500;
-                        color:       props.get(vars.$quiet--label-color);
+                        color: props.get(vars.$quiet--label-color);
                        &::before,
                        &::after {
-                                block-size:       props.get(vars.$quiet--border-width);
+                                block-size: props.get(vars.$quiet--border-width);
                                background-color: props.get(vars.$quiet--bg-color);
                        }
-                        @include bem.modifier('vertical') {
+                        @include bem.modifier("vertical") {
                                background-color: props.get(vars.$vertical--quiet--bg-color);
                        }
-                        @include bem.modifier('dot') {
+                        @include bem.modifier("dot") {
                                background-color: props.get(vars.$dot--quiet--bg-color);
                        }
                }
-                @include bem.modifier('faint') {
+                @include bem.modifier("faint") {
-                        font-size:   props.get(vars.$faint--label-font-size);
+                        font-size: props.get(vars.$faint--label-font-size);
                        font-weight: 500;
-                        color:       props.get(vars.$faint--label-color);
+                        color: props.get(vars.$faint--label-color);
                        &::before,
                        &::after {
-                                block-size:       props.get(vars.$faint--border-width);
+                                block-size: props.get(vars.$faint--border-width);
                                background-color: props.get(vars.$faint--bg-color);
                        }
-                        @include bem.modifier('vertical') {
+                        @include bem.modifier("vertical") {
                                background-color: props.get(vars.$vertical--quiet--bg-color);
                        }
-                        @include bem.modifier('dot') {
+                        @include bem.modifier("dot") {
                                background-color: props.get(vars.$dot--quiet--bg-color);
                        }
                }
-                @include bem.modifier('labelled') {
+                @include bem.modifier("labelled") {
                        &::before {
                                margin-inline-end: 1em;
                        }
                        &::after {
-                                display:             block;
+                                display: block;
                                margin-inline-start: 1em;
                        }
                }
@@ -149,7 +149,7 @@
                                        background-color: props.get(vars.$themes, $theme, --bg);
                                }
-                                @include bem.elem('label') {
+                                @include bem.elem("label") {
                                        color: props.get(vars.$themes, $theme, --label);
                                }
                        }
@@ -162,39 +162,39 @@
                                        background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
                                }
-                                @include bem.elem('label') {
+                                @include bem.elem("label") {
                                        color: props.get(vars.$static-themes, $theme, --strong, --label);
                                }
-                                @include bem.modifier('medium') {
+                                @include bem.modifier("medium") {
                                        &::before,
                                        &::after {
                                                background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
                                        }
-                                        @include bem.elem('label') {
+                                        @include bem.elem("label") {
                                                color: props.get(vars.$static-themes, $theme, --medium, --label);
                                        }
                                }
-                                @include bem.modifier('quiet') {
+                                @include bem.modifier("quiet") {
                                        &::before,
                                        &::after {
                                                background-color: props.get(vars.$static-themes, $theme, --quiet, --bg);
                                        }
-                                        @include bem.elem('label') {
+                                        @include bem.elem("label") {
                                                color: props.get(vars.$static-themes, $theme, --quiet, --label);
                                        }
                                }
-                                @include bem.modifier('faint') {
+                                @include bem.modifier("faint") {
                                        &::before,
                                        &::after {
                                                background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
                                        }
-                                        @include bem.elem('label') {
+                                        @include bem.elem("label") {
                                                color: props.get(vars.$static-themes, $theme, --faint, --label);
                                        }
                                }
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/_divider.scss
parent	Update _index.scss (diff)
download	iro-design-master.tar.gz iro-design-master.tar.bz2 iro-design-master.zip

diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index d81284b..f082d12 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss
@@ -1,38 +1,38 @@
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	@use '../core.vars' as core;	7	@use "../core.vars" as core;
8		8
9	@forward 'divider.vars';	9	@forward "divider.vars";
10	@use 'divider.vars' as vars;	10	@use "divider.vars" as vars;
11		11
12	@mixin styles {	12	@mixin styles {
13	@include materialize-at-root(meta.module-variables('vars'));	13	@include materialize-at-root(meta.module-variables("vars"));
14		14
15	@include bem.object('divider') {	15	@include bem.object("divider") {
16	display: flex;	16	display: flex;
17	flex: 0 0 auto;	17	flex: 0 0 auto;
18	flex-direction: row;	18	flex-direction: row;
19	align-items: center;	19	align-items: center;
20	block-size: 1em;	20	block-size: 1em;
21	margin-block: props.get(vars.$margin-b);	21	margin-block: props.get(vars.$margin-b);
22	font-size: props.get(vars.$strong--label-font-size);	22	font-size: props.get(vars.$strong--label-font-size);
23	font-weight: 700;	23	font-weight: 700;
24	line-height: 1;	24	line-height: 1;
25	color: props.get(vars.$strong--label-color);	25	color: props.get(vars.$strong--label-color);
26	text-transform: uppercase;	26	text-transform: uppercase;
27	letter-spacing: props.get(vars.$letter-spacing);	27	letter-spacing: props.get(vars.$letter-spacing);
28	background-color: transparent;	28	background-color: transparent;
29		29
30	&::before,	30	&::before,
31	&::after {	31	&::after {
32	flex: 1 1 auto;	32	flex: 1 1 auto;
33	inline-size: 100%;	33	inline-size: 100%;
34	block-size: props.get(vars.$strong--border-width);	34	block-size: props.get(vars.$strong--border-width);
35	content: '';	35	content: "";
36	background-color: props.get(vars.$strong--bg-color);	36	background-color: props.get(vars.$strong--bg-color);
37	}	37	}
38		38
@@ -40,15 +40,15 @@
40	display: block;	40	display: block;
41	}	41	}
42		42
43	@include bem.elem('label') {	43	@include bem.elem("label") {
44	flex: 0 0 auto;	44	flex: 0 0 auto;
45	}	45	}
46		46
47	@include bem.modifier('vertical') {	47	@include bem.modifier("vertical") {
48	align-self: stretch;	48	align-self: stretch;
49	inline-size: props.get(vars.$vertical--border-width);	49	inline-size: props.get(vars.$vertical--border-width);
50	block-size: auto;	50	block-size: auto;
51	margin-block: 0;	51	margin-block: 0;
52	background-color: props.get(vars.$strong--bg-color);	52	background-color: props.get(vars.$strong--bg-color);
53		53
54	&::before,	54	&::before,
@@ -57,13 +57,13 @@
57	}	57	}
58	}	58	}
59		59
60	@include bem.modifier('dot') {	60	@include bem.modifier("dot") {
61	align-self: center;	61	align-self: center;
62	inline-size: props.get(vars.$dot--size);	62	inline-size: props.get(vars.$dot--size);
63	block-size: props.get(vars.$dot--size);	63	block-size: props.get(vars.$dot--size);
64	margin-block: 0;	64	margin-block: 0;
65	background-color: props.get(vars.$strong--bg-color);	65	background-color: props.get(vars.$strong--bg-color);
66	border-radius: props.get(vars.$dot--size);	66	border-radius: props.get(vars.$dot--size);
67		67
68	&::before,	68	&::before,
69	&::after {	69	&::after {
@@ -71,73 +71,73 @@
71	}	71	}
72	}	72	}
73		73
74	@include bem.modifier('medium') {	74	@include bem.modifier("medium") {
75	font-size: props.get(vars.$medium--label-font-size);	75	font-size: props.get(vars.$medium--label-font-size);
76	font-weight: 500;	76	font-weight: 500;
77	color: props.get(vars.$medium--label-color);	77	color: props.get(vars.$medium--label-color);
78		78
79	&::before,	79	&::before,
80	&::after {	80	&::after {
81	block-size: props.get(vars.$medium--border-width);	81	block-size: props.get(vars.$medium--border-width);
82	background-color: props.get(vars.$medium--bg-color);	82	background-color: props.get(vars.$medium--bg-color);
83	}	83	}
84		84
85	@include bem.modifier('vertical') {	85	@include bem.modifier("vertical") {
86	background-color: props.get(vars.$medium--bg-color);	86	background-color: props.get(vars.$medium--bg-color);
87	}	87	}
88		88
89	@include bem.modifier('dot') {	89	@include bem.modifier("dot") {
90	background-color: props.get(vars.$medium--bg-color);	90	background-color: props.get(vars.$medium--bg-color);
91	}	91	}
92	}	92	}
93		93
94	@include bem.modifier('quiet') {	94	@include bem.modifier("quiet") {
95	font-size: props.get(vars.$quiet--label-font-size);	95	font-size: props.get(vars.$quiet--label-font-size);
96	font-weight: 500;	96	font-weight: 500;
97	color: props.get(vars.$quiet--label-color);	97	color: props.get(vars.$quiet--label-color);
98		98
99	&::before,	99	&::before,
100	&::after {	100	&::after {
101	block-size: props.get(vars.$quiet--border-width);	101	block-size: props.get(vars.$quiet--border-width);
102	background-color: props.get(vars.$quiet--bg-color);	102	background-color: props.get(vars.$quiet--bg-color);
103	}	103	}
104		104
105	@include bem.modifier('vertical') {	105	@include bem.modifier("vertical") {
106	background-color: props.get(vars.$vertical--quiet--bg-color);	106	background-color: props.get(vars.$vertical--quiet--bg-color);
107	}	107	}
108		108
109	@include bem.modifier('dot') {	109	@include bem.modifier("dot") {
110	background-color: props.get(vars.$dot--quiet--bg-color);	110	background-color: props.get(vars.$dot--quiet--bg-color);
111	}	111	}
112	}	112	}
113		113
114	@include bem.modifier('faint') {	114	@include bem.modifier("faint") {
115	font-size: props.get(vars.$faint--label-font-size);	115	font-size: props.get(vars.$faint--label-font-size);
116	font-weight: 500;	116	font-weight: 500;
117	color: props.get(vars.$faint--label-color);	117	color: props.get(vars.$faint--label-color);
118		118
119	&::before,	119	&::before,
120	&::after {	120	&::after {
121	block-size: props.get(vars.$faint--border-width);	121	block-size: props.get(vars.$faint--border-width);
122	background-color: props.get(vars.$faint--bg-color);	122	background-color: props.get(vars.$faint--bg-color);
123	}	123	}
124		124
125	@include bem.modifier('vertical') {	125	@include bem.modifier("vertical") {
126	background-color: props.get(vars.$vertical--quiet--bg-color);	126	background-color: props.get(vars.$vertical--quiet--bg-color);
127	}	127	}
128		128
129	@include bem.modifier('dot') {	129	@include bem.modifier("dot") {
130	background-color: props.get(vars.$dot--quiet--bg-color);	130	background-color: props.get(vars.$dot--quiet--bg-color);
131	}	131	}
132	}	132	}
133		133
134	@include bem.modifier('labelled') {	134	@include bem.modifier("labelled") {
135	&::before {	135	&::before {
136	margin-inline-end: 1em;	136	margin-inline-end: 1em;
137	}	137	}
138		138
139	&::after {	139	&::after {
140	display: block;	140	display: block;
141	margin-inline-start: 1em;	141	margin-inline-start: 1em;
142	}	142	}
143	}	143	}
@@ -149,7 +149,7 @@
149	background-color: props.get(vars.$themes, $theme, --bg);	149	background-color: props.get(vars.$themes, $theme, --bg);
150	}	150	}
151		151
152	@include bem.elem('label') {	152	@include bem.elem("label") {
153	color: props.get(vars.$themes, $theme, --label);	153	color: props.get(vars.$themes, $theme, --label);
154	}	154	}
155	}	155	}
@@ -162,39 +162,39 @@
162	background-color: props.get(vars.$static-themes, $theme, --strong, --bg);	162	background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
163	}	163	}
164		164
165	@include bem.elem('label') {	165	@include bem.elem("label") {
166	color: props.get(vars.$static-themes, $theme, --strong, --label);	166	color: props.get(vars.$static-themes, $theme, --strong, --label);
167	}	167	}
168		168
169	@include bem.modifier('medium') {	169	@include bem.modifier("medium") {
170	&::before,	170	&::before,
171	&::after {	171	&::after {
172	background-color: props.get(vars.$static-themes, $theme, --medium, --bg);	172	background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
173	}	173	}
174		174
175	@include bem.elem('label') {	175	@include bem.elem("label") {
176	color: props.get(vars.$static-themes, $theme, --medium, --label);	176	color: props.get(vars.$static-themes, $theme, --medium, --label);
177	}	177	}
178	}	178	}
179		179
180	@include bem.modifier('quiet') {	180	@include bem.modifier("quiet") {
181	&::before,	181	&::before,
182	&::after {	182	&::after {
183	background-color: props.get(vars.$static-themes, $theme, --quiet, --bg);	183	background-color: props.get(vars.$static-themes, $theme, --quiet, --bg);
184	}	184	}
185		185
186	@include bem.elem('label') {	186	@include bem.elem("label") {
187	color: props.get(vars.$static-themes, $theme, --quiet, --label);	187	color: props.get(vars.$static-themes, $theme, --quiet, --label);
188	}	188	}
189	}	189	}
190		190
191	@include bem.modifier('faint') {	191	@include bem.modifier("faint") {
192	&::before,	192	&::before,
193	&::after {	193	&::after {
194	background-color: props.get(vars.$static-themes, $theme, --faint, --bg);	194	background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
195	}	195	}
196		196
197	@include bem.elem('label') {	197	@include bem.elem("label") {
198	color: props.get(vars.$static-themes, $theme, --faint, --label);	198	color: props.get(vars.$static-themes, $theme, --faint, --label);
199	}	199	}
200	}	200	}