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