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.scss12
-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.scss119
-rw-r--r--src/layouts/_split-view.vars.scss3
13 files changed, 381 insertions, 225 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 cba7574..8f0cef6 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -2,14 +2,14 @@
2@use 'iro-sass/src/props'; 2@use 'iro-sass/src/props';
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4 4
5$fixed-125: props.def(--l-container--fixed-125, fn.px-to-rem(720px)) !default; 5$fixed-200: props.def(--l-container--fixed-200, fn.px-to-rem(1300px)) !default;
6$fixed: props.def(--l-container--fixed, fn.px-to-rem(610px)) !default; 6$fixed-150: props.def(--l-container--fixed-150, fn.px-to-rem(860px)) !default;
7$fixed-75: props.def(--l-container--fixed-75, fn.px-to-rem(500px)) !default; 7$fixed: props.def(--l-container--fixed, fn.px-to-rem(680px)) !default;
8 8
9$fixed-sizes: ( 9$fixed-sizes: (
10 'fixed-125': $fixed-125, 10 'fixed-200': $fixed-200,
11 'fixed': $fixed, 11 'fixed-150': $fixed-150,
12 'fixed-75': $fixed-75 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 2744510..6469a7d 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -8,69 +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.modifier('gapless') { 18 @include bem.elem('panel') {
19 gap: props.get(vars.$gapless); 19 flex: 1 1 auto;
20 } 20 inline-size: 100%;
21 min-inline-size: 0;
21 22
22 @include bem.elem('panel') { 23 @include bem.modifier('side-25') {
23 flex: 1 1 auto; 24 flex: 0 0 auto;
24 inline-size: 100%; 25 inline-size: 25%;
25 min-inline-size: 0; 26 min-inline-size: props.get(vars.$panel--side-25--min);
27 }
26 28
27 @include bem.modifier('side-25') { 29 @include bem.modifier('sticky-0') {
28 flex: 0 0 auto; 30 position: sticky;
29 inline-size: 25%; 31 inset-block-start: 0;
30 min-inline-size: props.get(vars.$panel--side-25--min); 32 }
31 }
32 33
33 @include bem.modifier('sticky-0') { 34 @include bem.modifier('sticky') {
34 position: sticky; 35 position: sticky;
35 inset-block-start: 0; 36 inset-block-start: props.get(vars.$panel--sticky-offset);
36 } 37 }
37 38
38 @include bem.modifier('sticky') { 39 @include bem.modifier('sticky-400') {
39 position: sticky; 40 position: sticky;
40 inset-block-start: props.get(vars.$panel--sticky-offset); 41 inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset));
41 } 42 }
42 43
43 @include bem.modifier('sticky-400') { 44 @include bem.modifier('sticky-1200') {
44 position: sticky; 45 position: sticky;
45 inset-block-start: calc(props.get(vars.$panel--sticky-400--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));
46 } 47 }
47 } 48 }
48 49
49 @include bem.elem('content') { 50 @include bem.modifier('gapless') {
50 inline-size: 100%; 51 gap: props.get(vars.$gapless);
51 }
52 52
53 @include media.media('<=md') { 53 @include bem.elem('panel') {
54 flex-direction: column; 54 @include bem.modifier('side-25') {
55 gap: props.get(vars.$row-gap); 55 min-inline-size: calc(props.get(vars.$panel--side-25--min) + props.get(vars.$col-gap) - props.get(vars.$gapless));
56 align-items: stretch; 56 }
57 }
58 }
57 59
58 @include bem.modifier('wrap-reverse') { 60 @include bem.elem('content') {
59 flex-direction: column-reverse; 61 inline-size: 100%;
60 } 62 }
61 63
62 @include bem.elem('panel') { 64 @include media.media('<=md') {
63 flex: 1 1 auto; 65 flex-direction: column;
66 gap: props.get(vars.$row-gap);
67 align-items: stretch;
64 68
65 @include bem.modifier('side-25') { 69 @include bem.modifier('gapless') {
66 inline-size: auto; 70 gap: props.get(vars.$gapless);
67 min-inline-size: 0; 71 }
68 }
69 72
70 @include bem.modifier('sticky', 'sticky-400') { 73 @include bem.modifier('wrap-reverse') {
71 position: static; 74 flex-direction: column-reverse;
72 } 75 }
73 } 76
74 } 77 @include bem.elem('panel') {
75 } 78 inline-size: auto;
79
80 @include bem.modifier('side-25') {
81 inline-size: auto;
82 min-inline-size: 0;
83 }
84
85 @include bem.modifier('sticky', 'sticky-400', 'sticky-1200') {
86 position: static;
87 }
88 }
89 }
90 }
76} 91}
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
index 01562e1..d519939 100644
--- a/src/layouts/_split-view.vars.scss
+++ b/src/layouts/_split-view.vars.scss
@@ -4,9 +4,10 @@
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, 0) !default; 7$gapless: props.def(--l-split-view--gapless, 0rem) !default;
8 8
9$panel--side-25--min: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--3200)) !default; 9$panel--side-25--min: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--3200)) !default;
10$panel--sticky-400--inset: props.def(--l-split-view--panel--sticky-400--inset, props.get(core.$size--400)) !default; 10$panel--sticky-400--inset: props.def(--l-split-view--panel--sticky-400--inset, props.get(core.$size--400)) !default;
11$panel--sticky-1200--inset: props.def(--l-split-view--panel--sticky-1200--inset, props.get(core.$size--1200)) !default;
11 12
12$panel--sticky-offset: props.def(--l-split-view--panel--sticky-offset, props.get(core.$sticky-top-offset)) !default; 13$panel--sticky-offset: props.def(--l-split-view--panel--sticky-offset, props.get(core.$sticky-top-offset)) !default;
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-09-14 08:21:02 +0000