summaryrefslogtreecommitdiffstats
path: root/src/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts')
-rw-r--r--src/layouts/_card-list.scss178
-rw-r--r--src/layouts/_card-list.vars.scss135
-rw-r--r--src/layouts/_container.scss26
-rw-r--r--src/layouts/_container.vars.scss39
-rw-r--r--src/layouts/_flex.scss10
-rw-r--r--src/layouts/_form.scss52
-rw-r--r--src/layouts/_form.vars.scss6
-rw-r--r--src/layouts/_hlist.scss71
-rw-r--r--src/layouts/_hlist.vars.scss18
-rw-r--r--src/layouts/_media.scss30
-rw-r--r--src/layouts/_media.vars.scss20
-rw-r--r--src/layouts/_overflow.scss10
-rw-r--r--src/layouts/_split-view.scss93
-rw-r--r--src/layouts/_split-view.vars.scss15
14 files changed, 300 insertions, 403 deletions
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index c05b798..f2a6ff5 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -1,44 +1,39 @@
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@use "../objects/card.vars" as card; 7@use '../objects/card.vars' as card;
8 8
9@forward "card-list.vars"; 9@forward 'card-list.vars';
10@use "card-list.vars" as vars; 10@use 'card-list.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.layout("card-list") { 15 @include bem.layout('card-list') {
16 display: flex; 16 display: flex;
17 flex-direction: column; 17 flex-direction: column;
18 gap: props.get(vars.$row-gap); 18 gap: props.get(vars.$row-gap);
19 19
20 @include bem.modifier("merge") { 20 @include bem.modifier('merge') {
21 position: relative; 21 position: relative;
22 gap: 0; 22 gap: 0;
23 border-radius: props.get(card.$rounding); 23 border-radius: props.get(card.$rounding);
24 24
25 @include bem.elem("card") { 25 @include bem.elem('card') {
26 border-color: props.get(card.$border-color) props.get(card.$border-color) 26 border-color: props.get(card.$border-color) props.get(card.$border-color) props.get(vars.$border-color);
27 props.get(vars.$border-color);
28 background-clip: content-box; 27 background-clip: content-box;
29 box-shadow: none; 28 box-shadow: none;
30 29
31 &:not(:last-child) { 30 &:not(:last-child) {
32 position: relative; 31 position: relative;
33 border-end-start-radius: 0; 32 border-end-start-radius: 0;
34 border-end-end-radius: 0; 33 border-end-end-radius: 0;
35 } 34 }
36 35
37 @include bem.multi( 36 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
38 "&:link, &:visited, &:enabled",
39 "modifier" "interactive",
40 "modifier" "collapsible"
41 ) {
42 &:hover, 37 &:hover,
43 &:active, 38 &:active,
44 &:focus-visible { 39 &:focus-visible {
@@ -51,28 +46,19 @@
51 } 46 }
52 47
53 @include bem.next-twin-elem { 48 @include bem.next-twin-elem {
54 margin-block-start: calc(-1 * props.get(card.$border-width)); 49 margin-block-start: calc(-1 * props.get(card.$border-width));
55 border-block-start-color: transparent; 50 border-block-start-color: transparent;
56 border-start-start-radius: 0; 51 border-start-start-radius: 0;
57 border-start-end-radius: 0; 52 border-start-end-radius: 0;
58 53
59 @include bem.multi( 54 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
60 "&:link, &:visited, &:enabled",
61 "modifier" "interactive",
62 "modifier" "collapsible"
63 ) {
64 &:hover, 55 &:hover,
65 &:active { 56 &:active {
66 border-block-start-color: props.get(card.$hover--border-color); 57 border-block-start-color: props.get(card.$hover--border-color);
67 } 58 }
68 59
69 &:focus-visible { 60 &:focus-visible {
70 margin-block-start: calc( 61 margin-block-start: calc(-1 * props.get(card.$border-width) - props.get(card.$key-focus--border-width));
71 -1 *
72 props.get(card.$border-width) - props.get(
73 card.$key-focus--border-width
74 )
75 );
76 } 62 }
77 } 63 }
78 } 64 }
@@ -81,11 +67,7 @@
81 border-block-end-color: props.get(card.$border-color); 67 border-block-end-color: props.get(card.$border-color);
82 } 68 }
83 69
84 @include bem.multi( 70 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
85 "&:link, &:visited, &:enabled",
86 "modifier" "interactive",
87 "modifier" "collapsible"
88 ) {
89 &:hover, 71 &:hover,
90 &:active { 72 &:active {
91 border-color: props.get(card.$hover--border-color); 73 border-color: props.get(card.$hover--border-color);
@@ -93,20 +75,17 @@
93 75
94 &:focus-visible { 76 &:focus-visible {
95 border-color: props.get(card.$hover--bg-color); 77 border-color: props.get(card.$hover--bg-color);
96 box-shadow: 0 0 0 78 box-shadow:
97 calc( 79 0 0 0
98 props.get(card.$key-focus--border-width) + 80 calc(props.get(card.$key-focus--border-width) + props.get(card.$key-focus--outline-width))
99 props.get(card.$key-focus--outline-width)
100 )
101 props.get(card.$key-focus--outline-color); 81 props.get(card.$key-focus--outline-color);
102 } 82 }
103 } 83 }
104 } 84 }
105 85
106 @include bem.modifier("borderless") { 86 @include bem.modifier('borderless') {
107 @include bem.elem("card") { 87 @include bem.elem('card') {
108 border-color: props.get(card.$bg-color) props.get(card.$bg-color) 88 border-color: props.get(card.$bg-color) props.get(card.$bg-color) props.get(vars.$border-color);
109 props.get(vars.$border-color);
110 89
111 @include bem.next-twin-elem { 90 @include bem.next-twin-elem {
112 border-block-start-color: transparent; 91 border-block-start-color: transparent;
@@ -116,11 +95,7 @@
116 border-block-end-color: props.get(card.$bg-color); 95 border-block-end-color: props.get(card.$bg-color);
117 } 96 }
118 97
119 @include bem.multi( 98 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
120 "&:link, &:visited, &:enabled",
121 "modifier" "interactive",
122 "modifier" "collapsible"
123 ) {
124 &:hover, 99 &:hover,
125 &:active { 100 &:active {
126 border-color: props.get(card.$hover--border-color); 101 border-color: props.get(card.$hover--border-color);
@@ -133,87 +108,84 @@
133 } 108 }
134 } 109 }
135 110
136 @include bem.modifier("shadow") { 111 @include bem.modifier('shadow') {
137 box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) 112 box-shadow:
138 props.get(vars.$shadow-blur) props.get(vars.$shadow-grow) 113 props.get(vars.$shadow-x)
114 props.get(vars.$shadow-y)
115 props.get(vars.$shadow-blur)
116 props.get(vars.$shadow-grow)
139 props.get(card.$shadow-color); 117 props.get(card.$shadow-color);
140 } 118 }
141 119
142 @include bem.modifier("interactive") { 120 @include bem.modifier('interactive') {
143 transition: 121 transition: transform .2s, box-shadow .2s;
144 transform 0.2s,
145 box-shadow 0.2s;
146 122
147 &:hover, 123 &:hover,
148 &:active, 124 &:active,
149 &:focus-within { 125 &:focus-within {
150 box-shadow: none; 126 box-shadow: none;
151 transform: translateY(props.get(card.$hover--offset-b)); 127 transform: translateY(props.get(card.$hover--offset-b));
152 } 128 }
153 } 129 }
154 } 130 }
155 131
156 @include bem.modifier("quiet") { 132 @include bem.modifier('quiet') {
157 row-gap: props.get(vars.$quiet--row-gap); 133 row-gap: props.get(vars.$quiet--row-gap);
158 } 134 }
159 135
160 @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, 136 @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$grid-layouts {
161 $breakpoint in vars.$grid-layouts
162 {
163 @include bem.modifier($mod) { 137 @include bem.modifier($mod) {
164 display: grid; 138 display: grid;
165 grid-template-columns: repeat(auto-fill, minmax(props.get($col-width), 1fr)); 139 grid-template-columns: repeat(auto-fill, minmax(props.get($col-width), 1fr));
166 gap: props.get($row-gap) props.get($col-gap); 140 gap: props.get($row-gap) props.get($col-gap);
167 141
168 @include bem.modifier("quiet") { 142 @include bem.modifier('quiet') {
169 row-gap: props.get($quiet--row-gap); 143 row-gap: props.get($quiet--row-gap);
170 } 144 }
171 145
172 @include media.media("<=#{$breakpoint}") { 146 @include media.media('<=#{$breakpoint}') {
173 display: flex; 147 display: flex;
174 } 148 }
175 } 149 }
176 } 150 }
177 151
178 @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, 152 @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$flex-layouts {
179 $breakpoint in vars.$flex-layouts
180 {
181 @include bem.modifier($mod) { 153 @include bem.modifier($mod) {
182 display: flex; 154 display: flex;
183 flex-flow: row wrap; 155 flex-flow: row wrap;
184 gap: props.get($row-gap) props.get($col-gap); 156 gap: props.get($row-gap) props.get($col-gap);
185 157
186 @include bem.modifier("quiet") { 158 @include bem.modifier('quiet') {
187 row-gap: props.get($quiet--row-gap); 159 row-gap: props.get($quiet--row-gap);
188 } 160 }
189 161
190 @include bem.elem("card") { 162 @include bem.elem('card') {
191 flex: 0.1 0 auto; 163 flex: 0.1 0 auto;
192 inline-size: props.get($col-width); 164 inline-size: props.get($col-width);
193 } 165 }
194 166
195 @include media.media("<=#{$breakpoint}") { 167 @include media.media('<=#{$breakpoint}') {
196 flex-flow: column nowrap; 168 flex-flow: column nowrap;
197 169
198 @include bem.elem("card") { 170 @include bem.elem('card') {
199 inline-size: auto; 171 inline-size: auto;
200 } 172 }
201 } 173 }
202 } 174 }
203 } 175 }
204 176
205 @include bem.modifier("masonry") { 177 @include bem.modifier('masonry') {
206 display: block; 178 display: block;
207 columns: auto props.get(vars.$masonry--col-width); 179 columns: auto props.get(vars.$masonry--col-width);
208 column-gap: props.get(vars.$masonry--col-gap); 180 column-gap: props.get(vars.$masonry--col-gap);
209 181
210 @include bem.elem("card") { 182 @include bem.elem('card') {
211 margin-block-end: props.get(vars.$masonry--row-gap); 183 margin-block-end: props.get(vars.$masonry--row-gap);
212 break-inside: avoid; 184 break-inside: avoid;
213 } 185 }
214 186
215 @include bem.modifier("quiet") { 187 @include bem.modifier('quiet') {
216 @include bem.elem("card") { 188 @include bem.elem('card') {
217 margin-block-end: props.get(vars.$masonry--quiet--row-gap); 189 margin-block-end: props.get(vars.$masonry--quiet--row-gap);
218 } 190 }
219 } 191 }
@@ -222,34 +194,34 @@
222 @each $mod, $row-gap, $col-gap, $row-height, $quiet--row-gap in vars.$masonry-h-layouts { 194 @each $mod, $row-gap, $col-gap, $row-height, $quiet--row-gap in vars.$masonry-h-layouts {
223 @include bem.modifier($mod) { 195 @include bem.modifier($mod) {
224 flex-flow: row wrap; 196 flex-flow: row wrap;
225 gap: props.get($row-gap) props.get($col-gap); 197 gap: props.get($row-gap) props.get($col-gap);
226 198
227 @include bem.modifier("no-flush") { 199 @include bem.modifier('no-flush') {
228 &::after { 200 &::after {
229 display: block; 201 display: block;
230 flex: 1 0 auto; 202 flex: 1 0 auto;
231 inline-size: props.get($row-height); 203 inline-size: props.get($row-height);
232 content: ""; 204 content: '';
233 } 205 }
234 } 206 }
235 207
236 @include bem.elem("card") { 208 @include bem.elem('card') {
237 flex: 1 0 auto; 209 flex: 1 0 auto;
238 max-inline-size: 100%; 210 max-inline-size: 100%;
239 } 211 }
240 212
241 @include bem.elem("card-image") { 213 @include bem.elem('card-image') {
242 block-size: props.get($row-height); 214 block-size: props.get($row-height);
243 } 215 }
244 216
245 @include bem.modifier("quiet") { 217 @include bem.modifier('quiet') {
246 row-gap: props.get($quiet--row-gap); 218 row-gap: props.get($quiet--row-gap);
247 } 219 }
248 } 220 }
249 } 221 }
250 222
251 @include bem.modifier("aspect-5\\/4") { 223 @include bem.modifier('aspect-5\\/4') {
252 @include bem.elem("card-image") { 224 @include bem.elem('card-image') {
253 aspect-ratio: 5 / 4; 225 aspect-ratio: 5 / 4;
254 } 226 }
255 } 227 }
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index ece68f3..fb89b52 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,116 +1,61 @@
1@use "pkg:iro-sass/props"; 1@use 'pkg:iro-sass/src/props';
2@use "../core.vars" as core; 2@use '../core.vars' as core;
3@use "../objects/card" as card; 3@use '../objects/card' as card;
4 4
5$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default; 5$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
6$quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default; 6$quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default;
7 7
8$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--600)) !default; 8$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--600)) !default;
9$grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(core.$size--600)) !default; 9$grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(core.$size--600)) !default;
10$grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default; 10$grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
11$grid--quiet--row-gap: props.def( 11$grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default;
12 --l-card-list--grid--quiet--row-gap,
13 props.get(core.$size--800)
14) !default;
15 12
16$grid-sm--row-gap: props.def(--l-card-list--grid-sm--row-gap, props.get(core.$size--200)) !default; 13$grid-sm--row-gap: props.def(--l-card-list--grid-sm--row-gap, props.get(core.$size--200)) !default;
17$grid-sm--col-gap: props.def(--l-card-list--grid-sm--col-gap, props.get(core.$size--200)) !default; 14$grid-sm--col-gap: props.def(--l-card-list--grid-sm--col-gap, props.get(core.$size--200)) !default;
18$grid-sm--col-width: props.def( 15$grid-sm--col-width: props.def(--l-card-list--grid-sm--col-width, props.get(core.$size--4600)) !default;
19 --l-card-list--grid-sm--col-width, 16$grid-sm--quiet--row-gap: props.def(--l-card-list--grid-sm--quiet--row-gap, props.get(core.$size--800)) !default;
20 props.get(core.$size--4600)
21) !default;
22$grid-sm--quiet--row-gap: props.def(
23 --l-card-list--grid-sm--quiet--row-gap,
24 props.get(core.$size--800)
25) !default;
26 17
27$grid-xs--row-gap: props.def(--l-card-list--grid-xs--row-gap, props.get(core.$size--200)) !default; 18$grid-xs--row-gap: props.def(--l-card-list--grid-xs--row-gap, props.get(core.$size--200)) !default;
28$grid-xs--col-gap: props.def(--l-card-list--grid-xs--col-gap, props.get(core.$size--200)) !default; 19$grid-xs--col-gap: props.def(--l-card-list--grid-xs--col-gap, props.get(core.$size--200)) !default;
29$grid-xs--col-width: props.def( 20$grid-xs--col-width: props.def(--l-card-list--grid-xs--col-width, props.get(core.$size--1600)) !default;
30 --l-card-list--grid-xs--col-width, 21$grid-xs--quiet--row-gap: props.def(--l-card-list--grid-xs--quiet--row-gap, props.get(core.$size--800)) !default;
31 props.get(core.$size--1600)
32) !default;
33$grid-xs--quiet--row-gap: props.def(
34 --l-card-list--grid-xs--quiet--row-gap,
35 props.get(core.$size--800)
36) !default;
37 22
38$grid-layouts: ( 23$grid-layouts: (
39 "grid" $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm, 24 'grid' $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm,
40 "grid-sm" $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm, 25 'grid-sm' $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
41 "grid-xs" $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs 26 'grid-xs' $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs,
42) !default; 27) !default;
43 28
44$flex-layouts: ( 29$flex-layouts: (
45 "flex" $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm, 30 'flex' $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm,
46 "flex-sm" $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm, 31 'flex-sm' $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
47 "flex-xs" $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs 32 'flex-xs' $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs,
48) !default; 33) !default;
49 34
50$masonry-h--row-gap: props.def( 35$masonry-h--row-gap: props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--400)) !default;
51 --l-card-list--masonry-h--row-gap, 36$masonry-h--col-gap: props.def(--l-card-list--masonry-h--col-gap, props.get(core.$size--400)) !default;
52 props.get(core.$size--400) 37$masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default;
53) !default; 38$masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default;
54$masonry-h--col-gap: props.def(
55 --l-card-list--masonry-h--col-gap,
56 props.get(core.$size--400)
57) !default;
58$masonry-h--row-height: props.def(
59 --l-card-list--masonry-h--row-height,
60 props.get(core.$size--3200)
61) !default;
62$masonry-h--quiet--row-gap: props.def(
63 --l-card-list--masonry-h--quiet--row-gap,
64 props.get(core.$size--800)
65) !default;
66 39
67$masonry-h-sm--row-gap: props.def( 40$masonry-h-sm--row-gap: props.def(--l-card-list--masonry-h-sm--row-gap, props.get(core.$size--400)) !default;
68 --l-card-list--masonry-h-sm--row-gap, 41$masonry-h-sm--col-gap: props.def(--l-card-list--masonry-h-sm--col-gap, props.get(core.$size--400)) !default;
69 props.get(core.$size--400) 42$masonry-h-sm--row-height: props.def(--l-card-list--masonry-h-sm--row-height, props.get(core.$size--2600)) !default;
70) !default; 43$masonry-h-sm--quiet--row-gap: props.def(--l-card-list--masonry-h-sm--quiet--row-gap, props.get(core.$size--800)) !default;
71$masonry-h-sm--col-gap: props.def(
72 --l-card-list--masonry-h-sm--col-gap,
73 props.get(core.$size--400)
74) !default;
75$masonry-h-sm--row-height: props.def(
76 --l-card-list--masonry-h-sm--row-height,
77 props.get(core.$size--2600)
78) !default;
79$masonry-h-sm--quiet--row-gap: props.def(
80 --l-card-list--masonry-h-sm--quiet--row-gap,
81 props.get(core.$size--800)
82) !default;
83 44
84$masonry-h-layouts: ( 45$masonry-h-layouts: (
85 "masonry-h" $masonry-h--row-gap $masonry-h--col-gap $masonry-h--row-height 46 'masonry-h' $masonry-h--row-gap $masonry-h--col-gap $masonry-h--row-height $masonry-h--quiet--row-gap,
86 $masonry-h--quiet--row-gap, 47 'masonry-h-sm' $masonry-h-sm--row-gap $masonry-h-sm--col-gap $masonry-h-sm--row-height $masonry-h-sm--quiet--row-gap,
87 "masonry-h-sm" $masonry-h-sm--row-gap $masonry-h-sm--col-gap $masonry-h-sm--row-height
88 $masonry-h-sm--quiet--row-gap
89) !default; 48) !default;
90 49
91$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default; 50$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
92$masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default; 51$masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
93$masonry--col-width: props.def( 52$masonry--col-width: props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default;
94 --l-card-list--masonry--col-width, 53$masonry--quiet--row-gap: props.def(--l-card-list--masonry--quiet--row-gap, props.get(core.$size--800)) !default;
95 props.get(core.$size--3200)
96) !default;
97$masonry--quiet--row-gap: props.def(
98 --l-card-list--masonry--quiet--row-gap,
99 props.get(core.$size--800)
100) !default;
101 54
102$shadow-x: props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default; 55$shadow-x: props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default;
103$shadow-y: props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default; 56$shadow-y: props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default;
104$shadow-blur: props.def(--l-card-list--shadow-blur, props.get(card.$shadow-blur)) !default; 57$shadow-blur: props.def(--l-card-list--shadow-blur, props.get(card.$shadow-blur)) !default;
105$shadow-grow: props.def(--l-card-list--shadow-grow, props.get(card.$shadow-grow)) !default; 58$shadow-grow: props.def(--l-card-list--shadow-grow, props.get(card.$shadow-grow)) !default;
106 59
107$border-color: props.def( 60$border-color: props.def(--l-card-list--border-color, props.get(card.$border-color), 'color') !default;
108 --l-card-list--border-color, 61$border-color-dark: props.def(--l-card-list--border-color, props.get(core.$theme, --border-mute), 'dark') !default;
109 props.get(card.$border-color),
110 "color"
111) !default;
112$border-color-dark: props.def(
113 --l-card-list--border-color,
114 props.get(core.$theme, --border-mute),
115 "dark"
116) !default;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 7b3dc3f..46ded23 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -1,37 +1,37 @@
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 "container.vars"; 6@forward 'container.vars';
7@use "container.vars" as vars; 7@use 'container.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables("vars")); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.layout("container") { 12 @include bem.layout('container') {
13 @each $mod, $size in vars.$fixed-sizes { 13 @each $mod, $size in vars.$fixed-sizes {
14 @include bem.modifier($mod) { 14 @include bem.modifier($mod) {
15 max-inline-size: props.get($size); 15 max-inline-size: props.get($size);
16 margin-inline: auto; 16 margin-inline: auto;
17 } 17 }
18 } 18 }
19 19
20 @include bem.modifier("pad-i") { 20 @include bem.modifier('pad-i') {
21 padding-inline: props.get(vars.$pad-i); 21 padding-inline: props.get(vars.$pad-i);
22 } 22 }
23 23
24 @include bem.modifier("pad-b") { 24 @include bem.modifier('pad-b') {
25 padding-block: props.get(vars.$pad-b); 25 padding-block: props.get(vars.$pad-b);
26 } 26 }
27 27
28 @each $mod, $pad-i, $pad-b in vars.$sizes { 28 @each $mod, $pad-i, $pad-b in vars.$sizes {
29 @include bem.modifier($mod) { 29 @include bem.modifier($mod) {
30 @include bem.modifier("pad-i") { 30 @include bem.modifier('pad-i') {
31 padding-inline: props.get($pad-i); 31 padding-inline: props.get($pad-i);
32 } 32 }
33 33
34 @include bem.modifier("pad-b") { 34 @include bem.modifier('pad-b') {
35 padding-block: props.get($pad-b); 35 padding-block: props.get($pad-b);
36 } 36 }
37 } 37 }
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
index 09ef165..094046f 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -1,36 +1,39 @@
1@use "pkg:iro-sass/functions" as fn; 1@use 'pkg:iro-sass/src/functions' as fn;
2@use "pkg:iro-sass/props"; 2@use 'pkg:iro-sass/src/props';
3@use "../core.vars" as core; 3@use '../core.vars' as core;
4 4
5$fixed-200: props.def(--l-container--fixed-200, fn.px-to-rem(1300px)) !default; 5$fixed-200: props.def(--l-container--fixed-200, fn.px-to-rem(1300px)) !default;
6$fixed-150: props.def(--l-container--fixed-150, fn.px-to-rem(860px)) !default; 6$fixed-150: props.def(--l-container--fixed-150, fn.px-to-rem(860px)) !default;
7$fixed: props.def(--l-container--fixed, fn.px-to-rem(680px)) !default; 7$fixed: props.def(--l-container--fixed, fn.px-to-rem(680px)) !default;
8 8
9$fixed-sizes: ( 9$fixed-sizes: (
10 "fixed-200": $fixed-200, 10 'fixed-200': $fixed-200,
11 "fixed-150": $fixed-150, 11 'fixed-150': $fixed-150,
12 "fixed": $fixed, 12 'fixed': $fixed
13) !default; 13) !default;
14 14
15$pad-i: props.def(--l-container--pad-i, props.get(core.$size--600)) !default; 15$pad-i: props.def(--l-container--pad-i, props.get(core.$size--600)) !default;
16$pad-b: props.def(--l-container--pad-b, props.get(core.$size--800)) !default; 16$pad-b: props.def(--l-container--pad-b, props.get(core.$size--800)) !default;
17 17
18$pad-i--md: props.def(--l-container--pad-i, props.get(core.$size--400), "md") !default; 18$pad-i--md: props.def(--l-container--pad-i, props.get(core.$size--400), 'md') !default;
19$pad-b--md: props.def(--l-container--pad-b, props.get(core.$size--700), "md") !default; 19$pad-b--md: props.def(--l-container--pad-b, props.get(core.$size--700), 'md') !default;
20 20
21$pad-i--sm: props.def(--l-container--pad-i, props.get(core.$size--200), "sm") !default; 21$pad-i--sm: props.def(--l-container--pad-i, props.get(core.$size--200), 'sm') !default;
22$pad-b--sm: props.def(--l-container--pad-b, props.get(core.$size--600), "sm") !default; 22$pad-b--sm: props.def(--l-container--pad-b, props.get(core.$size--600), 'sm') !default;
23 23
24$pad-i--xs: props.def(--l-container--pad-i, props.get(core.$size--150), "xs") !default; 24$pad-i--xs: props.def(--l-container--pad-i, props.get(core.$size--150), 'xs') !default;
25$pad-b--xs: props.def(--l-container--pad-b, props.get(core.$size--450), "xs") !default; 25$pad-b--xs: props.def(--l-container--pad-b, props.get(core.$size--450), 'xs') !default;
26 26
27$sm--pad-i: props.def(--l-container--sm--pad-i, props.get(core.$size--300)) !default; 27$sm--pad-i: props.def(--l-container--sm--pad-i, props.get(core.$size--300)) !default;
28$sm--pad-b: props.def(--l-container--sm--pad-b, props.get(core.$size--800)) !default; 28$sm--pad-b: props.def(--l-container--sm--pad-b, props.get(core.$size--800)) !default;
29 29
30$sm--pad-i--sm: props.def(--l-container--sm--pad-i, props.get(core.$size--200), "sm") !default; 30$sm--pad-i--sm: props.def(--l-container--sm--pad-i, props.get(core.$size--200), 'sm') !default;
31$sm--pad-b--sm: props.def(--l-container--sm--pad-b, props.get(core.$size--600), "sm") !default; 31$sm--pad-b--sm: props.def(--l-container--sm--pad-b, props.get(core.$size--600), 'sm') !default;
32 32
33$sm--pad-i--xs: props.def(--l-container--sm--pad-i, props.get(core.$size--150), "xs") !default; 33$sm--pad-i--xs: props.def(--l-container--sm--pad-i, props.get(core.$size--150), 'xs') !default;
34$sm--pad-b--xs: props.def(--l-container--sm--pad-b, props.get(core.$size--450), "xs") !default; 34$sm--pad-b--xs: props.def(--l-container--sm--pad-b, props.get(core.$size--450), 'xs') !default;
35 35
36$sizes: ("sm" $sm--pad-i $sm--pad-b, "md" $sm--pad-i $sm--pad-b) !default; 36$sizes: (
37 'sm' $sm--pad-i $sm--pad-b,
38 'md' $sm--pad-i $sm--pad-b,
39) !default;
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
index 70d29f9..ea0b268 100644
--- a/src/layouts/_flex.scss
+++ b/src/layouts/_flex.scss
@@ -1,18 +1,18 @@
1@use "pkg:iro-sass/bem"; 1@use 'pkg:iro-sass/src/bem';
2 2
3@mixin styles { 3@mixin styles {
4 @include bem.layout("flex") { 4 @include bem.layout('flex') {
5 display: flex; 5 display: flex;
6 6
7 @include bem.modifier("column") { 7 @include bem.modifier('column') {
8 flex-direction: column; 8 flex-direction: column;
9 } 9 }
10 10
11 @include bem.modifier("wrap") { 11 @include bem.modifier('wrap') {
12 flex-wrap: wrap; 12 flex-wrap: wrap;
13 } 13 }
14 14
15 @include bem.modifier("wrap-reverse") { 15 @include bem.modifier('wrap-reverse') {
16 flex-wrap: wrap-reverse; 16 flex-wrap: wrap-reverse;
17 } 17 }
18 } 18 }
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index f71e469..f094cbc 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -1,57 +1,57 @@
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 "form.vars"; 6@forward 'form.vars';
7@use "form.vars" as vars; 7@use 'form.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables("vars")); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.layout("form") { 12 @include bem.layout('form') {
13 display: flex; 13 display: flex;
14 flex-direction: column; 14 flex-direction: column;
15 gap: props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i); 15 gap: props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
16 16
17 @include bem.elem("item") { 17 @include bem.elem('item') {
18 display: block; 18 display: block;
19 } 19 }
20 20
21 @include bem.elem("item-content") { 21 @include bem.elem('item-content') {
22 @include bem.modifier("align-start") { 22 @include bem.modifier('align-start') {
23 align-self: start; 23 align-self: start;
24 } 24 }
25 } 25 }
26 26
27 @include bem.modifier("row") { 27 @include bem.modifier('row') {
28 flex-direction: row; 28 flex-direction: row;
29 align-items: flex-end; 29 align-items: flex-end;
30 } 30 }
31 31
32 @include bem.modifier("labels-start", "labels-end") { 32 @include bem.modifier('labels-start', 'labels-end') {
33 display: grid; 33 display: grid;
34 grid-template-rows: auto; 34 grid-template-rows: auto;
35 grid-template-columns: auto 1fr; 35 grid-template-columns: auto 1fr;
36 align-items: baseline; 36 align-items: baseline;
37 37
38 @include bem.elem("item") { 38 @include bem.elem('item') {
39 display: contents; 39 display: contents;
40 } 40 }
41 41
42 @include bem.elem("item-label") { 42 @include bem.elem('item-label') {
43 grid-column: 1; 43 grid-column: 1;
44 padding-inline-end: 0; 44 padding-inline-end: 0;
45 } 45 }
46 46
47 @include bem.elem("item-content") { 47 @include bem.elem('item-content') {
48 grid-column: 2; 48 grid-column: 2;
49 margin-block-start: 0; 49 margin-block-start: 0;
50 } 50 }
51 } 51 }
52 52
53 @include bem.modifier("labels-end") { 53 @include bem.modifier('labels-end') {
54 @include bem.elem("item-label") { 54 @include bem.elem('item-label') {
55 text-align: end; 55 text-align: end;
56 } 56 }
57 } 57 }
diff --git a/src/layouts/_form.vars.scss b/src/layouts/_form.vars.scss
index 68cb23a..52670cc 100644
--- a/src/layouts/_form.vars.scss
+++ b/src/layouts/_form.vars.scss
@@ -1,5 +1,5 @@
1@use "pkg:iro-sass/props"; 1@use 'pkg:iro-sass/src/props';
2@use "../core.vars" as core; 2@use '../core.vars' as core;
3 3
4$item-spacing-b: props.def(--l-form--item-spacing-b, props.get(core.$size--325)) !default; 4$item-spacing-b: props.def(--l-form--item-spacing-b, props.get(core.$size--325)) !default;
5$label-spacing-i: props.def(--l-form--label-spacing-i, props.get(core.$size--325)) !default; 5$label-spacing-i: props.def(--l-form--label-spacing-i, props.get(core.$size--325)) !default;
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 }
diff --git a/src/layouts/_hlist.vars.scss b/src/layouts/_hlist.vars.scss
index 557cfae..2d99057 100644
--- a/src/layouts/_hlist.vars.scss
+++ b/src/layouts/_hlist.vars.scss
@@ -1,16 +1,16 @@
1@use "pkg:iro-sass/props"; 1@use 'pkg:iro-sass/src/props';
2@use "../core.vars" as core; 2@use '../core.vars' as core;
3 3
4$gap: props.def(--l-hlist--gap, props.get(core.$size--150)) !default; 4$gap: props.def(--l-hlist--gap, props.get(core.$size--150)) !default;
5 5
6$gapless: props.def(--l-hlist--gapless, 0) !default; 6$gapless: props.def(--l-hlist--gapless, 0) !default;
7$sm: props.def(--l-hlist--sm, props.get(core.$size--100)) !default; 7$sm: props.def(--l-hlist--sm, props.get(core.$size--100)) !default;
8$lg: props.def(--l-hlist--lg, props.get(core.$size--300)) !default; 8$lg: props.def(--l-hlist--lg, props.get(core.$size--300)) !default;
9$xl: props.def(--l-hlist--xl, props.get(core.$size--450)) !default; 9$xl: props.def(--l-hlist--xl, props.get(core.$size--450)) !default;
10 10
11$sizes: ( 11$sizes: (
12 "gapless": $gapless, 12 'gapless': $gapless,
13 "sm": $sm, 13 'sm': $sm,
14 "lg": $lg, 14 'lg': $lg,
15 "xl": $xl, 15 'xl': $xl,
16) !default; 16) !default;
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index b6732bf..4492ea9 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -1,17 +1,17 @@
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 "media.vars"; 6@forward 'media.vars';
7@use "media.vars" as vars; 7@use 'media.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables("vars")); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.layout("media") { 12 @include bem.layout('media') {
13 display: flex; 13 display: flex;
14 gap: props.get(vars.$gap); 14 gap: props.get(vars.$gap);
15 align-items: center; 15 align-items: center;
16 line-height: 1.4; 16 line-height: 1.4;
17 17
@@ -21,19 +21,19 @@
21 } 21 }
22 } 22 }
23 23
24 @include bem.modifier("wrap") { 24 @include bem.modifier('wrap') {
25 flex-wrap: wrap; 25 flex-wrap: wrap;
26 } 26 }
27 27
28 @include bem.elem("block") { 28 @include bem.elem('block') {
29 flex: 0 0 auto; 29 flex: 0 0 auto;
30 30
31 @include bem.modifier("shrink", "main") { 31 @include bem.modifier('shrink', 'main') {
32 flex-shrink: 1; 32 flex-shrink: 1;
33 min-inline-size: 0; 33 min-inline-size: 0;
34 } 34 }
35 35
36 @include bem.modifier("main") { 36 @include bem.modifier('main') {
37 inline-size: 100%; 37 inline-size: 100%;
38 } 38 }
39 } 39 }
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss
index f24ea2a..78e157f 100644
--- a/src/layouts/_media.vars.scss
+++ b/src/layouts/_media.vars.scss
@@ -1,16 +1,16 @@
1@use "pkg:iro-sass/props"; 1@use 'pkg:iro-sass/src/props';
2@use "../core.vars" as core; 2@use '../core.vars' as core;
3 3
4$gap: props.def(--l-media--gap, props.get(core.$size--150)) !default; 4$gap: props.def(--l-media--gap, props.get(core.$size--150)) !default;
5 5
6$gapless: props.def(--l-media--gapless, 0) !default; 6$gapless: props.def(--l-media--gapless, 0) !default;
7$sm: props.def(--l-media--sm, props.get(core.$size--100)) !default; 7$sm: props.def(--l-media--sm, props.get(core.$size--100)) !default;
8$lg: props.def(--l-media--lg, props.get(core.$size--300)) !default; 8$lg: props.def(--l-media--lg, props.get(core.$size--300)) !default;
9$xl: props.def(--l-media--xl, props.get(core.$size--450)) !default; 9$xl: props.def(--l-media--xl, props.get(core.$size--450)) !default;
10 10
11$sizes: ( 11$sizes: (
12 "gapless": $gapless, 12 'gapless': $gapless,
13 "sm": $sm, 13 'sm': $sm,
14 "lg": $lg, 14 'lg': $lg,
15 "xl": $xl, 15 'xl': $xl,
16) !default; 16) !default;
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
index 57e2512..ab983b9 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -1,10 +1,10 @@
1@use "pkg:iro-sass/bem"; 1@use 'pkg:iro-sass/src/bem';
2@use "pkg:iro-sass/props"; 2@use 'pkg:iro-sass/src/props';
3@use "../core.vars" as core; 3@use '../core.vars' as core;
4 4
5@mixin styles { 5@mixin styles {
6 @include bem.layout("overflow") { 6 @include bem.layout('overflow') {
7 overflow: auto; 7 overflow: auto;
8 scrollbar-color: props.get(core.$theme, --text-disabled) transparent; 8 scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
9 } 9 }
10} 10}
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 }
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
index 9b6dd21..b2944e7 100644
--- a/src/layouts/_split-view.vars.scss
+++ b/src/layouts/_split-view.vars.scss
@@ -1,16 +1,13 @@
1@use "pkg:iro-sass/props"; 1@use 'pkg:iro-sass/src/props';
2@use "../core.vars" as core; 2@use '../core.vars' as core;
3 3
4$col-gap: props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default; 4$col-gap: props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default;
5$row-gap: props.def(--l-split-view--row-gap, props.get(core.$size--600)) !default; 5$row-gap: props.def(--l-split-view--row-gap, props.get(core.$size--600)) !default;
6 6
7$gapless: props.def(--l-split-view--gapless, 0rem) !default; 7$gapless: props.def(--l-split-view--gapless, 0rem) !default;
8 8
9$panel--min-50: props.def(--l-split-view--panel--min-50, props.get(core.$size--2400)) !default; 9$panel--min-50: props.def(--l-split-view--panel--min-50, props.get(core.$size--2400)) !default;
10$panel--min-100: props.def(--l-split-view--panel--min-100, props.get(core.$size--3200)) !default; 10$panel--min-100: props.def(--l-split-view--panel--min-100, props.get(core.$size--3200)) !default;
11$panel--min-200: props.def(--l-split-view--panel--min-200, props.get(core.$size--4200)) !default; 11$panel--min-200: props.def(--l-split-view--panel--min-200, props.get(core.$size--4200)) !default;
12 12
13$panel--sticky-offset: props.def( 13$panel--sticky-offset: props.def(--l-split-view--panel--sticky-offset, props.get(core.$sticky-top-offset)) !default;
14 --l-split-view--panel--sticky-offset,
15 props.get(core.$sticky-top-offset)
16) !default;
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 20:08:51 +0000