1 files changed, 51 insertions, 42 deletions
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index ea651c7..1bffddd 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -1,101 +1,110 @@
-@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/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 '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(props.get(vars.$panel--min-50) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+                                        min-inline-size: calc(
+                                                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(props.get(vars.$panel--min-100) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+                                        min-inline-size: calc(
+                                                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(props.get(vars.$panel--min-200) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+                                        min-inline-size: calc(
+                                                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 ea651c7..1bffddd 100644 --- a/src/layouts/_split-view.scss +++ b/src/layouts/_split-view.scss
@@ -1,101 +1,110 @@
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/src/bem';	3	@use "pkg:iro-sass/bem";
4	@use 'pkg:iro-sass/src/props';	4	@use "pkg:iro-sass/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(props.get(vars.$panel--min-50) + props.get(vars.$col-gap) - props.get(vars.$gapless));	57	min-inline-size: calc(
		58	props.get(vars.$panel--min-50) +
		59	props.get(vars.$col-gap) - props.get(vars.$gapless)
		60	);
58	}	61	}
59		62
60	@include bem.modifier('min-100') {	63	@include bem.modifier("min-100") {
61	min-inline-size: calc(props.get(vars.$panel--min-100) + props.get(vars.$col-gap) - props.get(vars.$gapless));	64	min-inline-size: calc(
		65	props.get(vars.$panel--min-100) +
		66	props.get(vars.$col-gap) - props.get(vars.$gapless)
		67	);
62	}	68	}
63		69
64	@include bem.modifier('min-200') {	70	@include bem.modifier("min-200") {
65	min-inline-size: calc(props.get(vars.$panel--min-200) + props.get(vars.$col-gap) - props.get(vars.$gapless));	71	min-inline-size: calc(
		72	props.get(vars.$panel--min-200) +
		73	props.get(vars.$col-gap) - props.get(vars.$gapless)
		74	);
66	}	75	}
67	}	76	}
68	}	77	}
69		78
70	@include bem.elem('content') {	79	@include bem.elem("content") {
71	inline-size: 100%;	80	inline-size: 100%;
72	}	81	}
73		82
74	@include media.media('<=md') {	83	@include media.media("<=md") {
75	flex-direction: column;	84	flex-direction: column;
76	gap: props.get(vars.$row-gap);	85	gap: props.get(vars.$row-gap);
77	align-items: stretch;	86	align-items: stretch;
78		87
79	@include bem.modifier('gapless') {	88	@include bem.modifier("gapless") {
80	gap: props.get(vars.$gapless);	89	gap: props.get(vars.$gapless);
81	}	90	}
82		91
83	@include bem.modifier('wrap-reverse') {	92	@include bem.modifier("wrap-reverse") {
84	flex-direction: column-reverse;	93	flex-direction: column-reverse;
85	}	94	}
86		95
87	@include bem.elem('panel') {	96	@include bem.elem("panel") {
88	inline-size: auto;	97	inline-size: auto;
89		98
90	@include bem.modifier('side-25') {	99	@include bem.modifier("side-25") {
91	inline-size: auto;	100	inline-size: auto;
92	}	101	}
93		102
94	@include bem.modifier('min-50', 'min-100', 'min-200') {	103	@include bem.modifier("min-50", "min-100", "min-200") {
95	min-inline-size: 0;	104	min-inline-size: 0;
96	}	105	}
97		106
98	@include bem.modifier('sticky') {	107	@include bem.modifier("sticky") {
99	position: static;	108	position: static;
100	}	109	}
101	}	110	}