summaryrefslogtreecommitdiffstats
path: root/src/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts')
-rw-r--r--src/layouts/_button-group.scss45
-rw-r--r--src/layouts/_button-group.vars.scss14
-rw-r--r--src/layouts/_card-list.scss192
-rw-r--r--src/layouts/_card-list.vars.scss21
-rw-r--r--src/layouts/_container.scss30
-rw-r--r--src/layouts/_container.vars.scss6
-rw-r--r--src/layouts/_flex.scss24
-rw-r--r--src/layouts/_form.scss80
-rw-r--r--src/layouts/_media.scss50
-rw-r--r--src/layouts/_media.vars.scss8
-rw-r--r--src/layouts/_overflow.scss8
-rw-r--r--src/layouts/_split-view.scss128
12 files changed, 373 insertions, 233 deletions
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
index c51ae7e..44719be 100644
--- a/src/layouts/_button-group.scss
+++ b/src/layouts/_button-group.scss
@@ -5,13 +5,46 @@
5 5
6@forward 'button-group.vars'; 6@forward 'button-group.vars';
7@use 'button-group.vars' as vars; 7@use 'button-group.vars' as vars;
8@use '../objects/button.vars' as button;
8 9
9@mixin styles { 10@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
11 12
12 @include bem.layout('button-group') { 13 @include bem.layout('button-group') {
13 display: flex; 14 display: inline-flex;
14 flex-wrap: wrap; 15 flex-wrap: wrap;
15 gap: props.get(vars.$spacing); 16 gap: props.get(vars.$gap);
16 } 17
18 @each $mod, $size in vars.$sizes {
19 @include bem.modifier($mod) {
20 gap: props.get($size);
21 }
22 }
23
24 @include bem.modifier('align-block') {
25 margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width));
26
27 @include bem.modifier('pill') {
28 margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width));
29 }
30
31 @include bem.modifier('icon') {
32 margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
33 }
34
35 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes {
36 @include bem.modifier('action-#{$mod}') {
37 margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));
38
39 @include bem.modifier('pill') {
40 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width));
41 }
42
43 @include bem.modifier('icon') {
44 margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
45 }
46 }
47 }
48 }
49 }
17} 50}
diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss
index 95ac8f8..b56eec7 100644
--- a/src/layouts/_button-group.vars.scss
+++ b/src/layouts/_button-group.vars.scss
@@ -1,4 +1,16 @@
1@use 'iro-sass/src/props'; 1@use 'iro-sass/src/props';
2@use '../core.vars' as core; 2@use '../core.vars' as core;
3 3
4$spacing: props.def(--l-button-group--spacing, props.get(core.$size--150)) !default; 4$gap: props.def(--l-button-group--gap, props.get(core.$size--150)) !default;
5
6$gapless: props.def(--l-button-group--gapless, 0) !default;
7$sm: props.def(--l-button-group--sm, props.get(core.$size--100)) !default;
8$lg: props.def(--l-button-group--lg, props.get(core.$size--300)) !default;
9$xl: props.def(--l-button-group--xl, props.get(core.$size--450)) !default;
10
11$sizes: (
12 'gapless': $gapless,
13 'sm': $sm,
14 'lg': $lg,
15 'xl': $xl,
16) !default;
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 8ef40c5..aedbfd0 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -8,75 +8,151 @@
8@use 'card-list.vars' as vars; 8@use 'card-list.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('card-list') { 13 @include bem.layout('card-list') {
14 display: flex; 14 display: flex;
15 flex-direction: column; 15 flex-direction: column;
16 gap: props.get(vars.$row-gap); 16 gap: props.get(vars.$row-gap);
17 17
18 @include bem.modifier('quiet') { 18 @include bem.modifier('merge') {
19 row-gap: props.get(vars.$quiet--row-gap); 19 position: relative;
20 } 20 gap: calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));
21 padding: props.get(vars.$merge-padding);
22 background-color: props.get(vars.$card-bg-color);
23 border: props.get(vars.$border-width) solid props.get(vars.$border-color);
24 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
21 25
22 @include bem.modifier('grid') { 26 @include bem.elem('card') {
23 display: grid; 27 &:not(:last-child) {
24 grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr)); 28 position: relative;
25 gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap); 29 border-end-start-radius: 0;
30 border-end-end-radius: 0;
26 31
27 @include bem.modifier('quiet') { 32 &::after {
28 row-gap: props.get(vars.$grid--quiet--row-gap); 33 position: absolute;
29 } 34 inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));
30 } 35 inset-inline: calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));
36 display: block;
37 block-size: props.get(vars.$border-width);
38 content: '';
39 background-color: props.get(vars.$border-color);
40 }
41 }
31 42
32 @include bem.modifier('masonry') { 43 &:hover,
33 display: block; 44 &:active,
34 columns: auto props.get(vars.$masonry--col-width); 45 &:focus-visible {
35 column-gap: props.get(vars.$masonry--col-gap); 46 transform: none;
47 }
36 48
37 @include bem.elem('card') { 49 @include bem.next-twin-elem {
38 margin-block-end: props.get(vars.$masonry--row-gap); 50 border-start-start-radius: 0;
39 break-inside: avoid; 51 border-start-end-radius: 0;
40 } 52 }
53 }
41 54
42 @include bem.modifier('quiet') { 55 @include bem.modifier('borderless') {
43 @include bem.elem('card') { 56 border-color: props.get(vars.$card-bg-color);
44 margin-block-end: props.get(vars.$masonry--quiet--row-gap);
45 }
46 }
47 }
48 57
49 @include bem.modifier('masonry-h') { 58 @include bem.elem('card') {
50 flex-flow: row wrap; 59 &:not(:last-child) {
51 gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap); 60 &::after {
61 inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
62 }
63 }
64 }
65 }
52 66
53 @include bem.modifier('no-flush') { 67 @include bem.modifier('shadow') {
54 &::after { 68 box-shadow:
55 display: block; 69 props.get(vars.$shadow-x)
56 flex: 1 0 auto; 70 props.get(vars.$shadow-y)
57 inline-size: props.get(vars.$masonry-h--row-height); 71 props.get(vars.$shadow-blur)
58 content: ''; 72 props.get(vars.$shadow-grow)
59 } 73 props.get(vars.$shadow-color);
60 } 74 }
75 }
61 76
62 @include bem.elem('card') { 77 @include bem.modifier('quiet') {
63 flex: 1 0 auto; 78 row-gap: props.get(vars.$quiet--row-gap);
64 max-inline-size: 100%; 79 }
65 }
66 80
67 @include bem.elem('card-image') { 81 @include bem.modifier('grid') {
68 block-size: props.get(vars.$masonry-h--row-height); 82 display: grid;
69 } 83 grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
84 gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
70 85
71 @include bem.modifier('quiet') { 86 @include bem.modifier('quiet') {
72 row-gap: props.get(vars.$masonry-h--quiet--row-gap); 87 row-gap: props.get(vars.$grid--quiet--row-gap);
73 } 88 }
74 } 89 }
75 90
76 @include bem.modifier('aspect-5\\/4') { 91 @include bem.modifier('grid-sm') {
77 @include bem.elem('card-image') { 92 display: grid;
78 aspect-ratio: 5 / 4; 93 grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr));
79 } 94 gap: props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap);
80 } 95
81 } 96 @include bem.modifier('grid-sm') {
97 @include media.media('<=md') {
98 display: flex;
99 gap: props.get(vars.$row-gap);
100 }
101 }
102
103 @include bem.modifier('quiet') {
104 row-gap: props.get(vars.$grid-sm--quiet--row-gap);
105 }
106 }
107
108 @include bem.modifier('masonry') {
109 display: block;
110 columns: auto props.get(vars.$masonry--col-width);
111 column-gap: props.get(vars.$masonry--col-gap);
112
113 @include bem.elem('card') {
114 margin-block-end: props.get(vars.$masonry--row-gap);
115 break-inside: avoid;
116 }
117
118 @include bem.modifier('quiet') {
119 @include bem.elem('card') {
120 margin-block-end: props.get(vars.$masonry--quiet--row-gap);
121 }
122 }
123 }
124
125 @include bem.modifier('masonry-h') {
126 flex-flow: row wrap;
127 gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
128
129 @include bem.modifier('no-flush') {
130 &::after {
131 display: block;
132 flex: 1 0 auto;
133 inline-size: props.get(vars.$masonry-h--row-height);
134 content: '';
135 }
136 }
137
138 @include bem.elem('card') {
139 flex: 1 0 auto;
140 max-inline-size: 100%;
141 }
142
143 @include bem.elem('card-image') {
144 block-size: props.get(vars.$masonry-h--row-height);
145 }
146
147 @include bem.modifier('quiet') {
148 row-gap: props.get(vars.$masonry-h--quiet--row-gap);
149 }
150 }
151
152 @include bem.modifier('aspect-5\\/4') {
153 @include bem.elem('card-image') {
154 aspect-ratio: 5 / 4;
155 }
156 }
157 }
82} 158}
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index f77bfbf..75e72cc 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,5 +1,10 @@
1@use 'iro-sass/src/props'; 1@use 'iro-sass/src/props';
2@use '../core.vars' as core; 2@use '../core.vars' as core;
3@use '../objects/card' as card;
4
5$border-width: props.def(--l-card-list--border-width, props.get(card.$border-width)) !default;
6$merge-padding: props.def(--l-card-list--merge-padding, props.get(core.$border-width--thick)) !default;
7$rounding: props.def(--l-card-list--rounding, props.get(card.$rounding)) !default;
3 8
4$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default; 9$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
5$quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default; 10$quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default;
@@ -9,6 +14,11 @@ $grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(core.$s
9$grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default; 14$grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
10$grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default; 15$grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default;
11 16
17$grid-sm--row-gap: props.def(--l-card-list--grid-md--row-gap, props.get(core.$size--200)) !default;
18$grid-sm--col-gap: props.def(--l-card-list--grid-md--col-gap, props.get(core.$size--200)) !default;
19$grid-sm--col-width: props.def(--l-card-list--grid-md--col-width, props.get(core.$size--4600)) !default;
20$grid-sm--quiet--row-gap: props.def(--l-card-list--grid-sm--quiet--row-gap, props.get(core.$size--800)) !default;
21
12$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default; 22$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
13$masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default; 23$masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
14$masonry--col-width: props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default; 24$masonry--col-width: props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default;
@@ -19,4 +29,13 @@ $masonry-h--col-gap: props.def(--l-card-list--masonry-h--col-gap, props.g
19$masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default; 29$masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default;
20$masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default; 30$masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default;
21 31
22$border-color: props.def(--l-card-list--border-color, props.get(core.$theme, --border), 'color') !default; 32$shadow-x: props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default;
33$shadow-y: props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default;
34$shadow-blur: props.def(--l-card-list--shadow-blur, props.get(card.$shadow-blur)) !default;
35$shadow-grow: props.def(--l-card-list--shadow-grow, props.get(card.$shadow-grow)) !default;
36
37$card-bg-color: props.def(--l-card-list--bg-color, props.get(card.$bg-color), 'color') !default;
38$border-color: props.def(--l-card-list--border-color, props.get(card.$border-color), 'color') !default;
39$shadow-color: props.def(--l-card-list--shadow-color, props.get(card.$shadow-color), 'color') !default;
40
41$border-color-dark: props.def(--l-card-list--border-color, props.get(core.$theme, --bg-l1), 'dark') !default;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 17ab2f0..0ae68c1 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -7,22 +7,22 @@
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} 28}
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
index 56b6c89..8f0cef6 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -7,9 +7,9 @@ $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--400)) !default; 15$pad-i: props.def(--l-container--pad-i, props.get(core.$size--400)) !default;
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
index 902ecdb..c99b253 100644
--- a/src/layouts/_flex.scss
+++ b/src/layouts/_flex.scss
@@ -1,19 +1,19 @@
1@use 'iro-sass/src/bem'; 1@use '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 }
19} 19}
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 5f0567b..c804262 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -7,53 +7,53 @@
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 }
58 } 58 }
59} 59}
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index 2192db5..929e60f 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -7,35 +7,35 @@
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
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 } 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 }
40 } 40 }
41} 41}
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss
index fd6d986..dcb10de 100644
--- a/src/layouts/_media.vars.scss
+++ b/src/layouts/_media.vars.scss
@@ -9,8 +9,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 9fba7eb..6d31d37 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -3,9 +3,9 @@
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}
11 11
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index f522254..6469a7d 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -8,84 +8,84 @@
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 @include bem.modifier('side-25') { 23 @include bem.modifier('side-25') {
24 flex: 0 0 auto; 24 flex: 0 0 auto;
25 inline-size: 25%; 25 inline-size: 25%;
26 min-inline-size: props.get(vars.$panel--side-25--min); 26 min-inline-size: props.get(vars.$panel--side-25--min);
27 } 27 }
28 28
29 @include bem.modifier('sticky-0') { 29 @include bem.modifier('sticky-0') {
30 position: sticky; 30 position: sticky;
31 inset-block-start: 0; 31 inset-block-start: 0;
32 } 32 }
33 33
34 @include bem.modifier('sticky') { 34 @include bem.modifier('sticky') {
35 position: sticky; 35 position: sticky;
36 inset-block-start: props.get(vars.$panel--sticky-offset); 36 inset-block-start: props.get(vars.$panel--sticky-offset);
37 } 37 }
38 38
39 @include bem.modifier('sticky-400') { 39 @include bem.modifier('sticky-400') {
40 position: sticky; 40 position: sticky;
41 inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset)); 41 inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset));
42 } 42 }
43 43
44 @include bem.modifier('sticky-1200') { 44 @include bem.modifier('sticky-1200') {
45 position: sticky; 45 position: sticky;
46 inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset)); 46 inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset));
47 } 47 }
48 } 48 }
49 49
50 @include bem.modifier('gapless') { 50 @include bem.modifier('gapless') {
51 gap: props.get(vars.$gapless); 51 gap: props.get(vars.$gapless);
52 52
53 @include bem.elem('panel') { 53 @include bem.elem('panel') {
54 @include bem.modifier('side-25') { 54 @include bem.modifier('side-25') {
55 min-inline-size: calc(props.get(vars.$panel--side-25--min) + props.get(vars.$col-gap) - props.get(vars.$gapless)); 55 min-inline-size: calc(props.get(vars.$panel--side-25--min) + props.get(vars.$col-gap) - props.get(vars.$gapless));
56 } 56 }
57 } 57 }
58 } 58 }
59 59
60 @include bem.elem('content') { 60 @include bem.elem('content') {
61 inline-size: 100%; 61 inline-size: 100%;
62 } 62 }
63 63
64 @include media.media('<=md') { 64 @include media.media('<=md') {
65 flex-direction: column; 65 flex-direction: column;
66 gap: props.get(vars.$row-gap); 66 gap: props.get(vars.$row-gap);
67 align-items: stretch; 67 align-items: stretch;
68 68
69 @include bem.modifier('gapless') { 69 @include bem.modifier('gapless') {
70 gap: props.get(vars.$gapless); 70 gap: props.get(vars.$gapless);
71 } 71 }
72 72
73 @include bem.modifier('wrap-reverse') { 73 @include bem.modifier('wrap-reverse') {
74 flex-direction: column-reverse; 74 flex-direction: column-reverse;
75 } 75 }
76 76
77 @include bem.elem('panel') { 77 @include bem.elem('panel') {
78 inline-size: auto; 78 inline-size: auto;
79 79
80 @include bem.modifier('side-25') { 80 @include bem.modifier('side-25') {
81 inline-size: auto; 81 inline-size: auto;
82 min-inline-size: 0; 82 min-inline-size: 0;
83 } 83 }
84 84
85 @include bem.modifier('sticky', 'sticky-400', 'sticky-1200') { 85 @include bem.modifier('sticky', 'sticky-400', 'sticky-1200') {
86 position: static; 86 position: static;
87 } 87 }
88 } 88 }
89 } 89 }
90 } 90 }
91} 91}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-09-15 13:42:01 +0000