summaryrefslogtreecommitdiffstats
path: root/src/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts')
-rw-r--r--src/layouts/_button-group.scss62
-rw-r--r--src/layouts/_button-group.vars.scss8
-rw-r--r--src/layouts/_card-list.scss246
-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
11 files changed, 325 insertions, 325 deletions
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
index 6c874e1..44719be 100644
--- a/src/layouts/_button-group.scss
+++ b/src/layouts/_button-group.scss
@@ -8,43 +8,43 @@
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('button-group') { 13 @include bem.layout('button-group') {
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 } 22 }
23 23
24 @include bem.modifier('align-block') { 24 @include bem.modifier('align-block') {
25 margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width)); 25 margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width));
26 26
27 @include bem.modifier('pill') { 27 @include bem.modifier('pill') {
28 margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width)); 28 margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width));
29 } 29 }
30 30
31 @include bem.modifier('icon') { 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)); 32 margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
33 } 33 }
34 34
35 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes { 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}') { 36 @include bem.modifier('action-#{$mod}') {
37 margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width)); 37 margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));
38 38
39 @include bem.modifier('pill') { 39 @include bem.modifier('pill') {
40 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width)); 40 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width));
41 } 41 }
42 42
43 @include bem.modifier('icon') { 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)); 44 margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
45 } 45 }
46 } 46 }
47 } 47 }
48 } 48 }
49 } 49 }
50} 50}
diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss
index 50c1b53..b56eec7 100644
--- a/src/layouts/_button-group.vars.scss
+++ b/src/layouts/_button-group.vars.scss
@@ -9,8 +9,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; 9$xl: props.def(--l-button-group--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/_card-list.scss b/src/layouts/_card-list.scss
index cca6e72..aedbfd0 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -8,151 +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('merge') { 18 @include bem.modifier('merge') {
19 position: relative; 19 position: relative;
20 gap: calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width)); 20 gap: calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));
21 padding: props.get(vars.$merge-padding); 21 padding: props.get(vars.$merge-padding);
22 background-color: props.get(vars.$card-bg-color); 22 background-color: props.get(vars.$card-bg-color);
23 border: props.get(vars.$border-width) solid props.get(vars.$border-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)); 24 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
25 25
26 @include bem.elem('card') { 26 @include bem.elem('card') {
27 &:not(:last-child) { 27 &:not(:last-child) {
28 position: relative; 28 position: relative;
29 border-end-start-radius: 0; 29 border-end-start-radius: 0;
30 border-end-end-radius: 0; 30 border-end-end-radius: 0;
31 31
32 &::after { 32 &::after {
33 position: absolute; 33 position: absolute;
34 inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width)); 34 inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));
35 inset-inline: calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width)); 35 inset-inline: calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));
36 content: ''; 36 display: block;
37 display: block; 37 block-size: props.get(vars.$border-width);
38 block-size: props.get(vars.$border-width); 38 content: '';
39 background-color: props.get(vars.$border-color); 39 background-color: props.get(vars.$border-color);
40 } 40 }
41 } 41 }
42 42
43 &:hover, 43 &:hover,
44 &:active, 44 &:active,
45 &:focus-visible { 45 &:focus-visible {
46 transform: none; 46 transform: none;
47 } 47 }
48 48
49 @include bem.next-twin-elem { 49 @include bem.next-twin-elem {
50 border-start-start-radius: 0; 50 border-start-start-radius: 0;
51 border-start-end-radius: 0; 51 border-start-end-radius: 0;
52 } 52 }
53 } 53 }
54 54
55 @include bem.modifier('borderless') { 55 @include bem.modifier('borderless') {
56 border-color: props.get(vars.$card-bg-color); 56 border-color: props.get(vars.$card-bg-color);
57 57
58 @include bem.elem('card') { 58 @include bem.elem('card') {
59 &:not(:last-child) { 59 &:not(:last-child) {
60 &::after { 60 &::after {
61 inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width)); 61 inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
62 } 62 }
63 } 63 }
64 } 64 }
65 } 65 }
66 66
67 @include bem.modifier('shadow') { 67 @include bem.modifier('shadow') {
68 box-shadow: 68 box-shadow:
69 props.get(vars.$shadow-x) 69 props.get(vars.$shadow-x)
70 props.get(vars.$shadow-y) 70 props.get(vars.$shadow-y)
71 props.get(vars.$shadow-blur) 71 props.get(vars.$shadow-blur)
72 props.get(vars.$shadow-grow) 72 props.get(vars.$shadow-grow)
73 props.get(vars.$shadow-color); 73 props.get(vars.$shadow-color);
74 } 74 }
75 } 75 }
76 76
77 @include bem.modifier('quiet') { 77 @include bem.modifier('quiet') {
78 row-gap: props.get(vars.$quiet--row-gap); 78 row-gap: props.get(vars.$quiet--row-gap);
79 } 79 }
80 80
81 @include bem.modifier('grid') { 81 @include bem.modifier('grid') {
82 display: grid; 82 display: grid;
83 grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr)); 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); 84 gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
85 85
86 @include bem.modifier('quiet') { 86 @include bem.modifier('quiet') {
87 row-gap: props.get(vars.$grid--quiet--row-gap); 87 row-gap: props.get(vars.$grid--quiet--row-gap);
88 } 88 }
89 } 89 }
90 90
91 @include bem.modifier('grid-sm') { 91 @include bem.modifier('grid-sm') {
92 display: grid; 92 display: grid;
93 grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr)); 93 grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr));
94 gap: props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap); 94 gap: props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap);
95 95
96 @include bem.modifier("grid-sm") { 96 @include bem.modifier('grid-sm') {
97 @include media.media("<=md") { 97 @include media.media('<=md') {
98 display: flex; 98 display: flex;
99 gap: props.get(vars.$row-gap); 99 gap: props.get(vars.$row-gap);
100 } 100 }
101 } 101 }
102 102
103 @include bem.modifier('quiet') { 103 @include bem.modifier('quiet') {
104 row-gap: props.get(vars.$grid-sm--quiet--row-gap); 104 row-gap: props.get(vars.$grid-sm--quiet--row-gap);
105 } 105 }
106 } 106 }
107 107
108 @include bem.modifier('masonry') { 108 @include bem.modifier('masonry') {
109 display: block; 109 display: block;
110 columns: auto props.get(vars.$masonry--col-width); 110 columns: auto props.get(vars.$masonry--col-width);
111 column-gap: props.get(vars.$masonry--col-gap); 111 column-gap: props.get(vars.$masonry--col-gap);
112 112
113 @include bem.elem('card') { 113 @include bem.elem('card') {
114 margin-block-end: props.get(vars.$masonry--row-gap); 114 margin-block-end: props.get(vars.$masonry--row-gap);
115 break-inside: avoid; 115 break-inside: avoid;
116 } 116 }
117 117
118 @include bem.modifier('quiet') { 118 @include bem.modifier('quiet') {
119 @include bem.elem('card') { 119 @include bem.elem('card') {
120 margin-block-end: props.get(vars.$masonry--quiet--row-gap); 120 margin-block-end: props.get(vars.$masonry--quiet--row-gap);
121 } 121 }
122 } 122 }
123 } 123 }
124 124
125 @include bem.modifier('masonry-h') { 125 @include bem.modifier('masonry-h') {
126 flex-flow: row wrap; 126 flex-flow: row wrap;
127 gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap); 127 gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
128 128
129 @include bem.modifier('no-flush') { 129 @include bem.modifier('no-flush') {
130 &::after { 130 &::after {
131 display: block; 131 display: block;
132 flex: 1 0 auto; 132 flex: 1 0 auto;
133 inline-size: props.get(vars.$masonry-h--row-height); 133 inline-size: props.get(vars.$masonry-h--row-height);
134 content: ''; 134 content: '';
135 } 135 }
136 } 136 }
137 137
138 @include bem.elem('card') { 138 @include bem.elem('card') {
139 flex: 1 0 auto; 139 flex: 1 0 auto;
140 max-inline-size: 100%; 140 max-inline-size: 100%;
141 } 141 }
142 142
143 @include bem.elem('card-image') { 143 @include bem.elem('card-image') {
144 block-size: props.get(vars.$masonry-h--row-height); 144 block-size: props.get(vars.$masonry-h--row-height);
145 } 145 }
146 146
147 @include bem.modifier('quiet') { 147 @include bem.modifier('quiet') {
148 row-gap: props.get(vars.$masonry-h--quiet--row-gap); 148 row-gap: props.get(vars.$masonry-h--quiet--row-gap);
149 } 149 }
150 } 150 }
151 151
152 @include bem.modifier('aspect-5\\/4') { 152 @include bem.modifier('aspect-5\\/4') {
153 @include bem.elem('card-image') { 153 @include bem.elem('card-image') {
154 aspect-ratio: 5 / 4; 154 aspect-ratio: 5 / 4;
155 } 155 }
156 } 156 }
157 } 157 }
158} 158}
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-08-12 08:24:36 +0000