Revert "Paths"

This reverts commit cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.
author: Volpeon <git@volpeon.ink> 2026-07-22 13:00:59 +0200
committer: Volpeon <git@volpeon.ink> 2026-07-22 13:00:59 +0200
commit: aeed08dc46662a0d70e04bcea612a701633736e7 (patch)
tree: a4077017d3519185ccd9ea08955fccdd737ffe17 /src/layouts/_hlist.scss
parent: Paths (diff)
download: iro-design-aeed08dc46662a0d70e04bcea612a701633736e7.tar.gz
iro-design-aeed08dc46662a0d70e04bcea612a701633736e7.tar.bz2
iro-design-aeed08dc46662a0d70e04bcea612a701633736e7.zip
1 files changed, 30 insertions, 41 deletions
diff --git a/src/layouts/_hlist.scss b/src/layouts/_hlist.scss
index 00787db..32b3097 100644
--- a/src/layouts/_hlist.scss
+++ b/src/layouts/_hlist.scss
@@ -1,30 +1,30 @@
-@use "sass:meta";
+@use 'sass:meta';
-@use "pkg:iro-sass/bem";
+@use 'pkg:iro-sass/src/bem';
-@use "pkg:iro-sass/props";
+@use 'pkg:iro-sass/src/props';
-@use "../props" as *;
+@use '../props' as *;
-@forward "hlist.vars";
+@forward 'hlist.vars';
-@use "hlist.vars" as vars;
+@use 'hlist.vars' as vars;
-@use "../objects/button.vars" as button;
+@use '../objects/button.vars' as button;
 @mixin styles {
-        @include materialize-at-root(meta.module-variables("vars"));
+        @include materialize-at-root(meta.module-variables('vars'));
-        @include bem.layout("hlist") {
+        @include bem.layout('hlist') {
-                display: inline-flex;
+                display:   inline-flex;
                flex-wrap: wrap;
-                gap: props.get(vars.$gap);
+                gap:       props.get(vars.$gap);
                @each $mod, $size in vars.$sizes {
                        @include bem.modifier($mod) {
                                gap: props.get($size);
-                                @include bem.modifier("separated") {
+                                @include bem.modifier('separated') {
-                                        @include bem.elem("item") {
+                                        @include bem.elem('item') {
                                                @include bem.next-twin-elem {
                                                        &::before {
-                                                                content: "·";
+                                                                content: '·';
-                                                                margin-inline: calc(0.65 * props.get($size));
+                                                                margin-inline: calc(.65 * props.get($size));
                                                        }
                                                }
                                        }
@@ -32,51 +32,40 @@
                        }
                }
-                @include bem.modifier("separated") {
+                @include bem.modifier('separated') {
                        gap: 0;
-                        @include bem.elem("item") {
+                        @include bem.elem('item') {
                                @include bem.next-twin-elem {
                                        &::before {
-                                                content: "·";
+                                                content: '·';
-                                                margin-inline: calc(0.65 * props.get(vars.$gap));
+                                                margin-inline: calc(.65 * props.get(vars.$gap));
                                        }
                                }
                        }
                }
-                @include bem.modifier("buttons") {
+                @include bem.modifier('buttons') {
                        margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width));
-                        @include bem.modifier("pill") {
+                        @include bem.modifier('pill') {
-                                margin-inline: calc(
+                                margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width));
-                                        -1 * props.get(button.$pad-i-pill) - props.get(button.$border-width)
-                                );
                        }
-                        @include bem.modifier("icon") {
+                        @include bem.modifier('icon') {
-                                margin-inline: calc(
+                                margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
-                                        -1 * props.get(button.$pad-b) - props.get(button.$border-width) - 0.5em *
-                                                (props.get(button.$line-height) - 1)
-                                );
                        }
-                        @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes
+                        @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes {
-                        {
+                                @include bem.modifier('buttons-#{$mod}') {
-                                @include bem.modifier("buttons-#{$mod}") {
                                        margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));
-                                        @include bem.modifier("pill") {
+                                        @include bem.modifier('pill') {
-                                                margin-inline: calc(
+                                                margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width));
-                                                        -1 * props.get($pad-i-pill) - props.get(button.$border-width)
-                                                );
                                        }
-                                        @include bem.modifier("icon") {
+                                        @include bem.modifier('icon') {
-                                                margin-inline: calc(
+                                                margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
-                                                        -1 * props.get($pad-b) - props.get(button.$border-width) - 0.5em *
-                                                                (props.get(button.$line-height) - 1)
-                                                );
                                        }
                                }
                        }
author	Volpeon <git@volpeon.ink>	2026-07-22 13:00:59 +0200
committer	Volpeon <git@volpeon.ink>	2026-07-22 13:00:59 +0200
commit	aeed08dc46662a0d70e04bcea612a701633736e7 (patch)
tree	a4077017d3519185ccd9ea08955fccdd737ffe17 /src/layouts/_hlist.scss
parent	Paths (diff)
download	iro-design-aeed08dc46662a0d70e04bcea612a701633736e7.tar.gz iro-design-aeed08dc46662a0d70e04bcea612a701633736e7.tar.bz2 iro-design-aeed08dc46662a0d70e04bcea612a701633736e7.zip

diff --git a/src/layouts/_hlist.scss b/src/layouts/_hlist.scss index 00787db..32b3097 100644 --- a/src/layouts/_hlist.scss +++ b/src/layouts/_hlist.scss
@@ -1,30 +1,30 @@
1	@use "sass:meta";	1	@use 'sass:meta';
2	@use "pkg:iro-sass/bem";	2	@use 'pkg:iro-sass/src/bem';
3	@use "pkg:iro-sass/props";	3	@use 'pkg:iro-sass/src/props';
4	@use "../props" as *;	4	@use '../props' as *;
5		5
6	@forward "hlist.vars";	6	@forward 'hlist.vars';
7	@use "hlist.vars" as vars;	7	@use 'hlist.vars' as vars;
8	@use "../objects/button.vars" as button;	8	@use '../objects/button.vars' as button;
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.layout("hlist") {	13	@include bem.layout('hlist') {
14	display: inline-flex;	14	display: inline-flex;
15	flex-wrap: wrap;	15	flex-wrap: wrap;
16	gap: props.get(vars.$gap);	16	gap: props.get(vars.$gap);
17		17
18	@each $mod, $size in vars.$sizes {	18	@each $mod, $size in vars.$sizes {
19	@include bem.modifier($mod) {	19	@include bem.modifier($mod) {
20	gap: props.get($size);	20	gap: props.get($size);
21		21
22	@include bem.modifier("separated") {	22	@include bem.modifier('separated') {
23	@include bem.elem("item") {	23	@include bem.elem('item') {
24	@include bem.next-twin-elem {	24	@include bem.next-twin-elem {
25	&::before {	25	&::before {
26	content: "·";	26	content: '·';
27	margin-inline: calc(0.65 * props.get($size));	27	margin-inline: calc(.65 * props.get($size));
28	}	28	}
29	}	29	}
30	}	30	}
@@ -32,51 +32,40 @@
32	}	32	}
33	}	33	}
34		34
35	@include bem.modifier("separated") {	35	@include bem.modifier('separated') {
36	gap: 0;	36	gap: 0;
37		37
38	@include bem.elem("item") {	38	@include bem.elem('item') {
39	@include bem.next-twin-elem {	39	@include bem.next-twin-elem {
40	&::before {	40	&::before {
41	content: "·";	41	content: '·';
42	margin-inline: calc(0.65 * props.get(vars.$gap));	42	margin-inline: calc(.65 * props.get(vars.$gap));
43	}	43	}
44	}	44	}
45	}	45	}
46	}	46	}
47		47
48	@include bem.modifier("buttons") {	48	@include bem.modifier('buttons') {
49	margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width));	49	margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width));
50		50
51	@include bem.modifier("pill") {	51	@include bem.modifier('pill') {
52	margin-inline: calc(	52	margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width));
53	-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width)
54	);
55	}	53	}
56		54
57	@include bem.modifier("icon") {	55	@include bem.modifier('icon') {
58	margin-inline: calc(	56	margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
59	-1 * props.get(button.$pad-b) - props.get(button.$border-width) - 0.5em *
60	(props.get(button.$line-height) - 1)
61	);
62	}	57	}
63		58
64	@each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes	59	@each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes {
65	{	60	@include bem.modifier('buttons-#{$mod}') {
66	@include bem.modifier("buttons-#{$mod}") {
67	margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));	61	margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));
68		62
69	@include bem.modifier("pill") {	63	@include bem.modifier('pill') {
70	margin-inline: calc(	64	margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width));
71	-1 * props.get($pad-i-pill) - props.get(button.$border-width)
72	);
73	}	65	}
74		66
75	@include bem.modifier("icon") {	67	@include bem.modifier('icon') {
76	margin-inline: calc(	68	margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
77	-1 * props.get($pad-b) - props.get(button.$border-width) - 0.5em *
78	(props.get(button.$line-height) - 1)
79	);
80	}	69	}
81	}	70	}
82	}	71	}