1 files changed, 42 insertions, 51 deletions
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index 1bffddd..ea651c7 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -1,110 +1,101 @@
-@use "sass:meta";
+@use 'sass:meta';
-@use "pkg:include-media/dist/include-media" as media;
+@use 'pkg:include-media/dist/include-media' as media;
-@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 "split-view.vars";
+@forward 'split-view.vars';
-@use "split-view.vars" as vars;
+@use 'split-view.vars' as vars;
 @mixin styles {
-        @include materialize-at-root(meta.module-variables("vars"));
+        @include materialize-at-root(meta.module-variables('vars'));
-        @include bem.layout("split-view") {
+        @include bem.layout('split-view') {
-                display: flex;
+                display:     flex;
-                gap: props.get(vars.$col-gap);
+                gap:         props.get(vars.$col-gap);
                align-items: start;
-                @include bem.elem("panel") {
+                @include bem.elem('panel') {
-                        flex: 1 1 auto;
+                        flex:            1 1 auto;
-                        inline-size: 100%;
+                        inline-size:     100%;
                        min-inline-size: 0;
                        &::before {
-                                display: block;
+                                display:       block;
-                                margin-block: -100em 100em;
+                                margin-block:  -100em 100em;
-                                content: "";
+                                content:       '';
                        }
-                        @include bem.modifier("side-25") {
+                        @include bem.modifier('side-25') {
-                                flex: 0 0 auto;
+                                flex:        0 0 auto;
                                inline-size: 25%;
                        }
-                        @include bem.modifier("min-50") {
+                        @include bem.modifier('min-50') {
                                min-inline-size: props.get(vars.$panel--min-50);
                        }
-                        @include bem.modifier("min-100") {
+                        @include bem.modifier('min-100') {
                                min-inline-size: props.get(vars.$panel--min-100);
                        }
-                        @include bem.modifier("min-200") {
+                        @include bem.modifier('min-200') {
                                min-inline-size: props.get(vars.$panel--min-200);
                        }
-                        @include bem.modifier("sticky") {
+                        @include bem.modifier('sticky') {
-                                position: sticky;
+                                position:          sticky;
                                inset-block-start: props.get(vars.$panel--sticky-offset);
                        }
                }
-                @include bem.modifier("gapless") {
+                @include bem.modifier('gapless') {
                        gap: props.get(vars.$gapless);
-                        @include bem.elem("panel") {
+                        @include bem.elem('panel') {
-                                @include bem.modifier("min-50") {
+                                @include bem.modifier('min-50') {
-                                        min-inline-size: calc(
+                                        min-inline-size: calc(props.get(vars.$panel--min-50) + props.get(vars.$col-gap) - props.get(vars.$gapless));
-                                                props.get(vars.$panel--min-50) +
-                                                        props.get(vars.$col-gap) - props.get(vars.$gapless)
-                                        );
                                }
-                                @include bem.modifier("min-100") {
+                                @include bem.modifier('min-100') {
-                                        min-inline-size: calc(
+                                        min-inline-size: calc(props.get(vars.$panel--min-100) + props.get(vars.$col-gap) - props.get(vars.$gapless));
-                                                props.get(vars.$panel--min-100) +
-                                                        props.get(vars.$col-gap) - props.get(vars.$gapless)
-                                        );
                                }
-                                @include bem.modifier("min-200") {
+                                @include bem.modifier('min-200') {
-                                        min-inline-size: calc(
+                                        min-inline-size: calc(props.get(vars.$panel--min-200) + props.get(vars.$col-gap) - props.get(vars.$gapless));
-                                                props.get(vars.$panel--min-200) +
-                                                        props.get(vars.$col-gap) - props.get(vars.$gapless)
-                                        );
                                }
                        }
                }
-                @include bem.elem("content") {
+                @include bem.elem('content') {
                        inline-size: 100%;
                }
-                @include media.media("<=md") {
+                @include media.media('<=md') {
                        flex-direction: column;
-                        gap: props.get(vars.$row-gap);
+                        gap:            props.get(vars.$row-gap);
-                        align-items: stretch;
+                        align-items:    stretch;
-                        @include bem.modifier("gapless") {
+                        @include bem.modifier('gapless') {
                                gap: props.get(vars.$gapless);
                        }
-                        @include bem.modifier("wrap-reverse") {
+                        @include bem.modifier('wrap-reverse') {
                                flex-direction: column-reverse;
                        }
-                        @include bem.elem("panel") {
+                        @include bem.elem('panel') {
                                inline-size: auto;
-                                @include bem.modifier("side-25") {
+                                @include bem.modifier('side-25') {
                                        inline-size: auto;
                                }
-                                @include bem.modifier("min-50", "min-100", "min-200") {
+                                @include bem.modifier('min-50', 'min-100', 'min-200') {
                                        min-inline-size: 0;
                                }
-                                @include bem.modifier("sticky") {
+                                @include bem.modifier('sticky') {
                                        position: static;
                                }
                        }

diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss index 1bffddd..ea651c7 100644 --- a/src/layouts/_split-view.scss +++ b/src/layouts/_split-view.scss
@@ -1,110 +1,101 @@
1	@use "sass:meta";	1	@use 'sass:meta';
2	@use "pkg:include-media/dist/include-media" as media;	2	@use 'pkg:include-media/dist/include-media' as media;
3	@use "pkg:iro-sass/bem";	3	@use 'pkg:iro-sass/src/bem';
4	@use "pkg:iro-sass/props";	4	@use 'pkg:iro-sass/src/props';
5	@use "../props" as *;	5	@use '../props' as *;
6		6
7	@forward "split-view.vars";	7	@forward 'split-view.vars';
8	@use "split-view.vars" as vars;	8	@use 'split-view.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.layout("split-view") {	13	@include bem.layout('split-view') {
14	display: flex;	14	display: flex;
15	gap: props.get(vars.$col-gap);	15	gap: props.get(vars.$col-gap);
16	align-items: start;	16	align-items: start;
17		17
18	@include bem.elem("panel") {	18	@include bem.elem('panel') {
19	flex: 1 1 auto;	19	flex: 1 1 auto;
20	inline-size: 100%;	20	inline-size: 100%;
21	min-inline-size: 0;	21	min-inline-size: 0;
22		22
23	&::before {	23	&::before {
24	display: block;	24	display: block;
25	margin-block: -100em 100em;	25	margin-block: -100em 100em;
26	content: "";	26	content: '';
27	}	27	}
28		28
29	@include bem.modifier("side-25") {	29	@include bem.modifier('side-25') {
30	flex: 0 0 auto;	30	flex: 0 0 auto;
31	inline-size: 25%;	31	inline-size: 25%;
32	}	32	}
33		33
34	@include bem.modifier("min-50") {	34	@include bem.modifier('min-50') {
35	min-inline-size: props.get(vars.$panel--min-50);	35	min-inline-size: props.get(vars.$panel--min-50);
36	}	36	}
37		37
38	@include bem.modifier("min-100") {	38	@include bem.modifier('min-100') {
39	min-inline-size: props.get(vars.$panel--min-100);	39	min-inline-size: props.get(vars.$panel--min-100);
40	}	40	}
41		41
42	@include bem.modifier("min-200") {	42	@include bem.modifier('min-200') {
43	min-inline-size: props.get(vars.$panel--min-200);	43	min-inline-size: props.get(vars.$panel--min-200);
44	}	44	}
45		45
46	@include bem.modifier("sticky") {	46	@include bem.modifier('sticky') {
47	position: sticky;	47	position: sticky;
48	inset-block-start: props.get(vars.$panel--sticky-offset);	48	inset-block-start: props.get(vars.$panel--sticky-offset);
49	}	49	}
50	}	50	}
51		51
52	@include bem.modifier("gapless") {	52	@include bem.modifier('gapless') {
53	gap: props.get(vars.$gapless);	53	gap: props.get(vars.$gapless);
54		54
55	@include bem.elem("panel") {	55	@include bem.elem('panel') {
56	@include bem.modifier("min-50") {	56	@include bem.modifier('min-50') {
57	min-inline-size: calc(	57	min-inline-size: calc(props.get(vars.$panel--min-50) + props.get(vars.$col-gap) - props.get(vars.$gapless));
58	props.get(vars.$panel--min-50) +
59	props.get(vars.$col-gap) - props.get(vars.$gapless)
60	);
61	}	58	}
62		59
63	@include bem.modifier("min-100") {	60	@include bem.modifier('min-100') {
64	min-inline-size: calc(	61	min-inline-size: calc(props.get(vars.$panel--min-100) + props.get(vars.$col-gap) - props.get(vars.$gapless));
65	props.get(vars.$panel--min-100) +
66	props.get(vars.$col-gap) - props.get(vars.$gapless)
67	);
68	}	62	}
69		63
70	@include bem.modifier("min-200") {	64	@include bem.modifier('min-200') {
71	min-inline-size: calc(	65	min-inline-size: calc(props.get(vars.$panel--min-200) + props.get(vars.$col-gap) - props.get(vars.$gapless));
72	props.get(vars.$panel--min-200) +
73	props.get(vars.$col-gap) - props.get(vars.$gapless)
74	);
75	}	66	}
76	}	67	}
77	}	68	}
78		69
79	@include bem.elem("content") {	70	@include bem.elem('content') {
80	inline-size: 100%;	71	inline-size: 100%;
81	}	72	}
82		73
83	@include media.media("<=md") {	74	@include media.media('<=md') {
84	flex-direction: column;	75	flex-direction: column;
85	gap: props.get(vars.$row-gap);	76	gap: props.get(vars.$row-gap);
86	align-items: stretch;	77	align-items: stretch;
87		78
88	@include bem.modifier("gapless") {	79	@include bem.modifier('gapless') {
89	gap: props.get(vars.$gapless);	80	gap: props.get(vars.$gapless);
90	}	81	}
91		82
92	@include bem.modifier("wrap-reverse") {	83	@include bem.modifier('wrap-reverse') {
93	flex-direction: column-reverse;	84	flex-direction: column-reverse;
94	}	85	}
95		86
96	@include bem.elem("panel") {	87	@include bem.elem('panel') {
97	inline-size: auto;	88	inline-size: auto;
98		89
99	@include bem.modifier("side-25") {	90	@include bem.modifier('side-25') {
100	inline-size: auto;	91	inline-size: auto;
101	}	92	}
102		93
103	@include bem.modifier("min-50", "min-100", "min-200") {	94	@include bem.modifier('min-50', 'min-100', 'min-200') {
104	min-inline-size: 0;	95	min-inline-size: 0;
105	}	96	}
106		97
107	@include bem.modifier("sticky") {	98	@include bem.modifier('sticky') {
108	position: static;	99	position: static;
109	}	100	}
110	}	101	}