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/layouts/_hlist.scss
parent: Update _index.scss (diff)
download: iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.gz
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.bz2
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.zip
1 files changed, 41 insertions, 30 deletions
diff --git a/src/layouts/_hlist.scss b/src/layouts/_hlist.scss
index 32b3097..00787db 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/src/bem';
+@use "pkg:iro-sass/bem";
-@use 'pkg:iro-sass/src/props';
+@use "pkg:iro-sass/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(.65 * props.get($size));
+                                                                margin-inline: calc(0.65 * props.get($size));
                                                        }
                                                }
                                        }
@@ -32,40 +32,51 @@
                        }
                }
-                @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(.65 * props.get(vars.$gap));
+                                                margin-inline: calc(0.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(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width));
+                                margin-inline: calc(
+                                        -1 * props.get(button.$pad-i-pill) - props.get(button.$border-width)
+                                );
                        }
-                        @include bem.modifier('icon') {
+                        @include bem.modifier("icon") {
-                                margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
+                                margin-inline: calc(
+                                        -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(-1 * props.get($pad-i-pill) - props.get(button.$border-width));
+                                                margin-inline: calc(
+                                                        -1 * props.get($pad-i-pill) - props.get(button.$border-width)
+                                                );
                                        }
-                                        @include bem.modifier('icon') {
+                                        @include bem.modifier("icon") {
-                                                margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
+                                                margin-inline: calc(
+                                                        -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 12:27:09 +0200
committer	Volpeon <git@volpeon.ink>	2026-07-22 12:27:09 +0200
commit	cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
tree	d16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/layouts/_hlist.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/layouts/_hlist.scss b/src/layouts/_hlist.scss index 32b3097..00787db 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/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		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(.65 * props.get($size));	27	margin-inline: calc(0.65 * props.get($size));
28	}	28	}
29	}	29	}
30	}	30	}
@@ -32,40 +32,51 @@
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(.65 * props.get(vars.$gap));	42	margin-inline: calc(0.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(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width));	52	margin-inline: calc(
		53	-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width)
		54	);
53	}	55	}
54		56
55	@include bem.modifier('icon') {	57	@include bem.modifier("icon") {
56	margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));	58	margin-inline: calc(
		59	-1 * props.get(button.$pad-b) - props.get(button.$border-width) - 0.5em *
		60	(props.get(button.$line-height) - 1)
		61	);
57	}	62	}
58		63
59	@each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes {	64	@each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes
60	@include bem.modifier('buttons-#{$mod}') {	65	{
		66	@include bem.modifier("buttons-#{$mod}") {
61	margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));	67	margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));
62		68
63	@include bem.modifier('pill') {	69	@include bem.modifier("pill") {
64	margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width));	70	margin-inline: calc(
		71	-1 * props.get($pad-i-pill) - props.get(button.$border-width)
		72	);
65	}	73	}
66		74
67	@include bem.modifier('icon') {	75	@include bem.modifier("icon") {
68	margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));	76	margin-inline: calc(
		77	-1 * props.get($pad-b) - props.get(button.$border-width) - 0.5em *
		78	(props.get(button.$line-height) - 1)
		79	);
69	}	80	}
70	}	81	}
71	}	82	}