summaryrefslogtreecommitdiffstats
path: root/src/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts')
-rw-r--r--src/layouts/_button-group.scss16
-rw-r--r--src/layouts/_card-list.scss267
-rw-r--r--src/layouts/_card-list.vars.scss45
-rw-r--r--src/layouts/_container.scss71
-rw-r--r--src/layouts/_container.vars.scss39
-rw-r--r--src/layouts/_flex.scss36
-rw-r--r--src/layouts/_form.scss107
-rw-r--r--src/layouts/_form.vars.scss5
-rw-r--r--src/layouts/_hlist.scss74
-rw-r--r--src/layouts/_hlist.vars.scss16
-rw-r--r--src/layouts/_media.scss70
-rw-r--r--src/layouts/_media.vars.scss16
-rw-r--r--src/layouts/_overflow.scss16
-rw-r--r--src/layouts/_split-view.scss104
-rw-r--r--src/layouts/_split-view.vars.scss13
15 files changed, 639 insertions, 256 deletions
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
deleted file mode 100644
index a70d27a..0000000
--- a/src/layouts/_button-group.scss
+++ /dev/null
@@ -1,16 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('button-group') {
5 @include iro.props-store((
6 --dims: (
7 --spacing: fn.global-dim(--size --150),
8 ),
9 ));
10
11 @include iro.bem-layout(iro.props-namespace()) {
12 display: flex;
13 gap: fn.dim(--spacing);
14 flex-wrap: wrap;
15 }
16}
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 65b6a66..8f96ce0 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -1,96 +1,203 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn;
3@use 'include-media/dist/include-media' as media; 2@use 'include-media/dist/include-media' as media;
3@use 'iro-sass/src/bem';
4@use 'iro-sass/src/props';
5@use '../props' as *;
4 6
5@include iro.props-namespace('card-list') { 7@use '../objects/card.vars' as card;
6 @include iro.props-store((
7 --dims: (
8 --row-gap: fn.global-dim(--size --800),
9 --col-gap: fn.global-dim(--size --400),
10 8
11 --grid: ( 9@forward 'card-list.vars';
12 --row-gap: fn.global-dim(--size --800), 10@use 'card-list.vars' as vars;
13 --col-gap: fn.global-dim(--size --400),
14 --col-width: fn.global-dim(--size --3200),
15 ),
16 --masonry: (
17 --row-gap: fn.global-dim(--size --800),
18 --col-gap: fn.global-dim(--size --400),
19 --col-width: fn.global-dim(--size --3200),
20 ),
21 --masonry-h: (
22 --row-gap: fn.global-dim(--size --800),
23 --col-gap: fn.global-dim(--size --400),
24 --row-height: fn.global-dim(--size --3200),
25 )
26 ),
27 --colors: (
28 --border: fn.global-color(--border),
29 ),
30 ));
31 11
32 @include iro.bem-layout(iro.props-namespace()) { 12@mixin styles {
33 display: flex; 13 @include materialize-at-root(meta.module-variables('vars'));
34 flex-direction: column;
35 gap: fn.dim(--row-gap) fn.dim(--col-gap);
36 14
37 @include iro.bem-modifier('grid') { 15 @include bem.layout('card-list') {
38 display: grid; 16 display: flex;
39 grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr)); 17 flex-direction: column;
40 gap: fn.dim(--grid --col-gap); 18 gap: props.get(vars.$row-gap);
41 19
42 @include iro.bem-modifier('quiet') { 20 @include bem.modifier('merge') {
43 row-gap: fn.dim(--grid --row-gap); 21 position: relative;
44 } 22 gap: 0;
45 } 23 border-radius: props.get(card.$rounding);
46 24
47 @include iro.bem-modifier('masonry') { 25 @include bem.elem('card') {
48 display: block; 26 border-color: props.get(card.$border-color) props.get(card.$border-color) props.get(vars.$border-color);
49 columns: auto fn.dim(--masonry --col-width); 27 background-clip: content-box;
50 column-gap: fn.dim(--masonry --col-gap); 28 box-shadow: none;
51 29
52 @include iro.bem-elem('card') { 30 &:not(:last-child) {
53 margin-block-end: fn.dim(--masonry --col-gap); 31 position: relative;
54 break-inside: avoid; 32 border-end-start-radius: 0;
55 } 33 border-end-end-radius: 0;
34 }
56 35
57 @include iro.bem-modifier('quiet') { 36 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
58 @include iro.bem-elem('card') { 37 &:hover,
59 margin-block-end: fn.dim(--masonry --row-gap); 38 &:active,
60 } 39 &:focus-visible {
61 } 40 transform: none;
62 } 41 }
63 42
64 @include iro.bem-modifier('masonry-h') { 43 &:focus-visible {
65 flex-flow: row wrap; 44 z-index: 10;
66 gap: fn.dim(--masonry-h --col-gap); 45 }
46 }
67 47
68 &::after { 48 @include bem.next-twin-elem {
69 content: ''; 49 margin-block-start: calc(-1 * props.get(card.$border-width));
70 display: block; 50 border-block-start-color: transparent;
71 flex: 1 0 auto; 51 border-start-start-radius: 0;
72 inline-size: fn.dim(--masonry-h --row-height); 52 border-start-end-radius: 0;
73 block-size: 0;
74 }
75 53
76 @include iro.bem-elem('card') { 54 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
77 flex: 1 0 auto; 55 &:hover,
78 max-inline-size: 100%; 56 &:active {
79 } 57 border-block-start-color: props.get(card.$hover--border-color);
58 }
80 59
81 @include iro.bem-elem('card-image') { 60 &:focus-visible {
82 block-size: fn.dim(--masonry-h --row-height); 61 margin-block-start: calc(-1 * props.get(card.$border-width) - props.get(card.$key-focus--border-width));
83 } 62 }
63 }
64 }
84 65
85 @include iro.bem-modifier('quiet') { 66 &:last-child {
86 row-gap: fn.dim(--masonry-h --row-gap); 67 border-block-end-color: props.get(card.$border-color);
87 } 68 }
88 }
89 69
90 @include iro.bem-modifier('aspect-5\\/4') { 70 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
91 @include iro.bem-elem('card-image') { 71 &:hover,
92 aspect-ratio: 5 / 4; 72 &:active {
93 } 73 border-color: props.get(card.$hover--border-color);
94 } 74 }
95 } 75
76 &:focus-visible {
77 border-color: props.get(card.$hover--bg-color);
78 box-shadow:
79 0 0 0
80 calc(props.get(card.$key-focus--border-width) + props.get(card.$key-focus--outline-width))
81 props.get(card.$key-focus--outline-color);
82 }
83 }
84 }
85
86 @include bem.modifier('borderless') {
87 @include bem.elem('card') {
88 border-color: props.get(card.$bg-color) props.get(card.$bg-color) props.get(vars.$border-color);
89
90 @include bem.next-twin-elem {
91 border-block-start-color: transparent;
92 }
93
94 &:last-child {
95 border-block-end-color: props.get(card.$bg-color);
96 }
97
98 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
99 &:hover,
100 &:active {
101 border-color: props.get(card.$hover--border-color);
102 }
103
104 &:focus-visible {
105 border-color: props.get(card.$hover--bg-color);
106 }
107 }
108 }
109 }
110
111 @include bem.modifier('shadow') {
112 box-shadow:
113 props.get(vars.$shadow-x)
114 props.get(vars.$shadow-y)
115 props.get(vars.$shadow-blur)
116 props.get(vars.$shadow-grow)
117 props.get(card.$shadow-color);
118 }
119
120 @include bem.modifier('interactive') {
121 transition: transform .2s, box-shadow .2s;
122
123 &:hover,
124 &:active,
125 &:focus-within {
126 box-shadow: none;
127 transform: translateY(props.get(card.$hover--offset-b));
128 }
129 }
130 }
131
132 @include bem.modifier('quiet') {
133 row-gap: props.get(vars.$quiet--row-gap);
134 }
135
136
137 @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$grid-layouts {
138 @include bem.modifier($mod) {
139 display: grid;
140 grid-template-columns: repeat(auto-fill, minmax(props.get($col-width), 1fr));
141 gap: props.get($row-gap) props.get($col-gap);
142
143 @include bem.modifier('quiet') {
144 row-gap: props.get($quiet--row-gap);
145 }
146
147 @include media.media('<=#{$breakpoint}') {
148 display: flex;
149 }
150 }
151 }
152
153 @include bem.modifier('masonry') {
154 display: block;
155 columns: auto props.get(vars.$masonry--col-width);
156 column-gap: props.get(vars.$masonry--col-gap);
157
158 @include bem.elem('card') {
159 margin-block-end: props.get(vars.$masonry--row-gap);
160 break-inside: avoid;
161 }
162
163 @include bem.modifier('quiet') {
164 @include bem.elem('card') {
165 margin-block-end: props.get(vars.$masonry--quiet--row-gap);
166 }
167 }
168 }
169
170 @include bem.modifier('masonry-h') {
171 flex-flow: row wrap;
172 gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
173
174 @include bem.modifier('no-flush') {
175 &::after {
176 display: block;
177 flex: 1 0 auto;
178 inline-size: props.get(vars.$masonry-h--row-height);
179 content: '';
180 }
181 }
182
183 @include bem.elem('card') {
184 flex: 1 0 auto;
185 max-inline-size: 100%;
186 }
187
188 @include bem.elem('card-image') {
189 block-size: props.get(vars.$masonry-h--row-height);
190 }
191
192 @include bem.modifier('quiet') {
193 row-gap: props.get(vars.$masonry-h--quiet--row-gap);
194 }
195 }
196
197 @include bem.modifier('aspect-5\\/4') {
198 @include bem.elem('card-image') {
199 aspect-ratio: 5 / 4;
200 }
201 }
202 }
96} 203}
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
new file mode 100644
index 0000000..d860ec9
--- /dev/null
+++ b/src/layouts/_card-list.vars.scss
@@ -0,0 +1,45 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3@use '../objects/card' as card;
4
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;
7
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;
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;
12
13$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;
15$grid-sm--col-width: props.def(--l-card-list--grid-sm--col-width, props.get(core.$size--4600)) !default;
16$grid-sm--quiet--row-gap: props.def(--l-card-list--grid-sm--quiet--row-gap, props.get(core.$size--800)) !default;
17
18$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;
20$grid-xs--col-width: props.def(--l-card-list--grid-xs--col-width, props.get(core.$size--1600)) !default;
21$grid-xs--quiet--row-gap: props.def(--l-card-list--grid-xs--quiet--row-gap, props.get(core.$size--800)) !default;
22
23$grid-layouts: (
24 '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,
26 'grid-xs' $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs,
27) !default;
28
29$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
30$masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
31$masonry--col-width: props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default;
32$masonry--quiet--row-gap: props.def(--l-card-list--masonry--quiet--row-gap, props.get(core.$size--800)) !default;
33
34$masonry-h--row-gap: props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--400)) !default;
35$masonry-h--col-gap: props.def(--l-card-list--masonry-h--col-gap, props.get(core.$size--400)) !default;
36$masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default;
37$masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default;
38
39$shadow-x: props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default;
40$shadow-y: props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default;
41$shadow-blur: props.def(--l-card-list--shadow-blur, props.get(card.$shadow-blur)) !default;
42$shadow-grow: props.def(--l-card-list--shadow-grow, props.get(card.$shadow-grow)) !default;
43
44$border-color: props.def(--l-card-list--border-color, props.get(card.$border-color), 'color') !default;
45$border-color-dark: props.def(--l-card-list--border-color, props.get(core.$theme, --border-mute), 'dark') !default;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index d13c4f3..05d99a8 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -1,45 +1,40 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
3 5
4@include iro.props-namespace('container') { 6@forward 'container.vars';
5 @include iro.props-store(( 7@use 'container.vars' as vars;
6 --dims: (
7 --narrow-125: iro.fn-px-to-rem(720px),
8 --narrow: iro.fn-px-to-rem(610px),
9 --narrow-75: iro.fn-px-to-rem(500px),
10 --pad-i: fn.global-dim(--size --400),
11 --pad-b: fn.global-dim(--size --800),
12 )
13 ));
14 8
15 @include iro.props-store(( 9@mixin styles {
16 --dims: ( 10 @include materialize-at-root(meta.module-variables('vars'));
17 --pad-i: fn.global-dim(--size --200),
18 --pad-b: fn.global-dim(--size --600),
19 )
20 ), 'sm');
21 11
22 @include iro.props-store(( 12 @include bem.layout('container') {
23 --dims: ( 13 @each $mod, $size in vars.$fixed-sizes {
24 --pad-i: fn.global-dim(--size --150), 14 @include bem.modifier($mod) {
25 --pad-b: fn.global-dim(--size --450), 15 max-inline-size: props.get($size);
26 ) 16 margin-inline: auto;
27 ), 'xs'); 17 }
18 }
28 19
29 @include iro.bem-layout(iro.props-namespace()) { 20 @include bem.modifier('pad-i') {
30 @each $size in 'narrow-125' 'narrow' 'narrow-75' { 21 padding-inline: props.get(vars.$pad-i);
31 @include iro.bem-modifier($size) { 22 }
32 max-inline-size: fn.dim(--#{$size});
33 margin-inline: auto;
34 }
35 }
36 23
37 @include iro.bem-modifier('pad-i') { 24 @include bem.modifier('pad-b') {
38 padding-inline: fn.dim(--pad-i); 25 padding-block: props.get(vars.$pad-b);
39 } 26 }
40 27
41 @include iro.bem-modifier('pad-b') { 28 @each $mod, $pad-i, $pad-b in vars.$sizes {
42 padding-block: fn.dim(--pad-b); 29 @include bem.modifier($mod) {
43 } 30 @include bem.modifier('pad-i') {
44 } 31 padding-inline: props.get($pad-i);
32 }
33
34 @include bem.modifier('pad-b') {
35 padding-block: props.get($pad-b);
36 }
37 }
38 }
39 }
45} 40}
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
new file mode 100644
index 0000000..285b784
--- /dev/null
+++ b/src/layouts/_container.vars.scss
@@ -0,0 +1,39 @@
1@use 'iro-sass/src/functions' as fn;
2@use 'iro-sass/src/props';
3@use '../core.vars' as core;
4
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;
7$fixed: props.def(--l-container--fixed, fn.px-to-rem(680px)) !default;
8
9$fixed-sizes: (
10 'fixed-200': $fixed-200,
11 'fixed-150': $fixed-150,
12 'fixed': $fixed
13) !default;
14
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;
17
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;
20
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;
23
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;
26
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;
29
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;
32
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;
35
36$sizes: (
37 'sm' $sm--pad-i $sm--pad-b,
38 'md' $sm--pad-i $sm--pad-b,
39) !default;
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
index d3f4f9c..c99b253 100644
--- a/src/layouts/_flex.scss
+++ b/src/layouts/_flex.scss
@@ -1,27 +1,19 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/bem';
2 2
3@include iro.props-namespace('flex') { 3@mixin styles {
4 @include iro.bem-layout(iro.props-namespace()) { 4 @include bem.layout('flex') {
5 display: flex; 5 display: flex;
6 6
7 @include iro.bem-modifier('align-stretch') { 7 @include bem.modifier('column') {
8 align-items: stretch; 8 flex-direction: column;
9 } 9 }
10 10
11 @include iro.bem-modifier('align-center') { 11 @include bem.modifier('wrap') {
12 align-items: center; 12 flex-wrap: wrap;
13 } 13 }
14 14
15 @include iro.bem-modifier('align-start') { 15 @include bem.modifier('wrap-reverse') {
16 align-items: flex-start; 16 flex-wrap: wrap-reverse;
17 } 17 }
18 18 }
19 @include iro.bem-modifier('align-end') {
20 align-items: flex-end;
21 }
22
23 @include iro.bem-modifier('column') {
24 flex-direction: column;
25 }
26 }
27} 19}
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index f6b60ea..c804262 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -1,62 +1,59 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
3 5
4// @use '../objects/field-label'; 6@forward 'form.vars';
7@use 'form.vars' as vars;
5 8
6@include iro.props-namespace('form') { 9@mixin styles {
7 @include iro.props-store(( 10 @include materialize-at-root(meta.module-variables('vars'));
8 --dims: (
9 --item-spacing-b: fn.global-dim(--size --325),
10 --label-spacing-i: fn.global-dim(--size --325),
11 --hint-font-size: fn.global-dim(--font-size --75),
12 ),
13 ));
14 11
15 @include iro.bem-layout(iro.props-namespace()) { 12 @include bem.layout('form') {
16 display: flex; 13 display: flex;
17 flex-direction: column; 14 flex-direction: column;
18 gap: fn.dim(--item-spacing-b) fn.dim(--label-spacing-i); 15 gap: props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
19 16
20 @include iro.bem-elem('item') { 17 @include bem.elem('item') {
21 display: block; 18 display: block;
22 } 19 }
23 20
24 @include iro.bem-elem('item-content') { 21 @include bem.elem('item-content') {
25 @include iro.bem-modifier('align-start') { 22 @include bem.modifier('align-start') {
26 align-self: start; 23 align-self: start;
27 } 24 }
28 } 25 }
29 26
30 @include iro.bem-modifier('row') { 27 @include bem.modifier('row') {
31 flex-direction: row; 28 flex-direction: row;
32 align-items: flex-end; 29 align-items: flex-end;
33 } 30 }
34 31
35 @include iro.bem-modifier('labels-start', 'labels-end') { 32 @include bem.modifier('labels-start', 'labels-end') {
36 display: grid; 33 display: grid;
37 grid-template-columns: auto 1fr; 34 grid-template-rows: auto;
38 grid-template-rows: auto; 35 grid-template-columns: auto 1fr;
39 align-items: baseline; 36 align-items: baseline;
40 37
41 @include iro.bem-elem('item') { 38 @include bem.elem('item') {
42 display: contents; 39 display: contents;
43 } 40 }
44 41
45 @include iro.bem-elem('item-label') { 42 @include bem.elem('item-label') {
46 grid-column: 1; 43 grid-column: 1;
47 padding-inline-end: 0; 44 padding-inline-end: 0;
48 } 45 }
49 46
50 @include iro.bem-elem('item-content') { 47 @include bem.elem('item-content') {
51 grid-column: 2; 48 grid-column: 2;
52 margin-block-start: 0; 49 margin-block-start: 0;
53 } 50 }
54 } 51 }
55 52
56 @include iro.bem-modifier('labels-end') { 53 @include bem.modifier('labels-end') {
57 @include iro.bem-elem('item-label') { 54 @include bem.elem('item-label') {
58 text-align: end; 55 text-align: end;
59 } 56 }
60 } 57 }
61 } 58 }
62} 59}
diff --git a/src/layouts/_form.vars.scss b/src/layouts/_form.vars.scss
new file mode 100644
index 0000000..c533e6b
--- /dev/null
+++ b/src/layouts/_form.vars.scss
@@ -0,0 +1,5 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3
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;
diff --git a/src/layouts/_hlist.scss b/src/layouts/_hlist.scss
new file mode 100644
index 0000000..06eb8dd
--- /dev/null
+++ b/src/layouts/_hlist.scss
@@ -0,0 +1,74 @@
1@use 'sass:meta';
2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
5
6@forward 'hlist.vars';
7@use 'hlist.vars' as vars;
8@use '../objects/button.vars' as button;
9
10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars'));
12
13 @include bem.layout('hlist') {
14 display: inline-flex;
15 flex-wrap: wrap;
16 gap: props.get(vars.$gap);
17
18 @each $mod, $size in vars.$sizes {
19 @include bem.modifier($mod) {
20 gap: props.get($size);
21
22 @include bem.modifier('separated') {
23 @include bem.elem('item') {
24 @include bem.next-twin-elem {
25 &::before {
26 content: '·';
27 margin-inline: calc(.65 * props.get($size));
28 }
29 }
30 }
31 }
32 }
33 }
34
35 @include bem.modifier('separated') {
36 gap: 0;
37
38 @include bem.elem('item') {
39 @include bem.next-twin-elem {
40 &::before {
41 content: '·';
42 margin-inline: calc(.65 * props.get(vars.$gap));
43 }
44 }
45 }
46 }
47
48 @include bem.modifier('buttons') {
49 margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width));
50
51 @include bem.modifier('pill') {
52 margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width));
53 }
54
55 @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));
57 }
58
59 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes {
60 @include bem.modifier('buttons-#{$mod}') {
61 margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));
62
63 @include bem.modifier('pill') {
64 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width));
65 }
66
67 @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));
69 }
70 }
71 }
72 }
73 }
74}
diff --git a/src/layouts/_hlist.vars.scss b/src/layouts/_hlist.vars.scss
new file mode 100644
index 0000000..fecded5
--- /dev/null
+++ b/src/layouts/_hlist.vars.scss
@@ -0,0 +1,16 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3
4$gap: props.def(--l-hlist--gap, props.get(core.$size--150)) !default;
5
6$gapless: props.def(--l-hlist--gapless, 0) !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;
9$xl: props.def(--l-hlist--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/_media.scss b/src/layouts/_media.scss
index c42aa3e..929e60f 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -1,47 +1,41 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
3 5
4$sizes: 'gapless' 'sm' 'lg' 'xl' !default; 6@forward 'media.vars';
7@use 'media.vars' as vars;
5 8
6@include iro.props-namespace('media') { 9@mixin styles {
7 @include iro.props-store(( 10 @include materialize-at-root(meta.module-variables('vars'));
8 --dims: (
9 --gap: fn.global-dim(--size --150),
10 11
11 --gapless: 0, 12 @include bem.layout('media') {
12 --sm: fn.global-dim(--size --100), 13 display: flex;
13 --lg: fn.global-dim(--size --300), 14 gap: props.get(vars.$gap);
14 --xl: fn.global-dim(--size --450), 15 align-items: center;
15 ) 16 line-height: 1.4;
16 ));
17 17
18 @include iro.bem-layout(iro.props-namespace()) { 18 @each $mod, $size in vars.$sizes {
19 display: flex; 19 @include bem.modifier($mod) {
20 align-items: center; 20 gap: props.get($size);
21 gap: fn.dim(--gap); 21 }
22 line-height: 1.4; 22 }
23 23
24 @each $size in $sizes { 24 @include bem.modifier('wrap') {
25 @include iro.bem-modifier($size) { 25 flex-wrap: wrap;
26 gap: fn.dim(--#{$size}); 26 }
27 }
28 }
29 27
30 @include iro.bem-modifier('wrap') { 28 @include bem.elem('block') {
31 flex-wrap: wrap; 29 flex: 0 0 auto;
32 }
33 30
34 @include iro.bem-elem('block') { 31 @include bem.modifier('shrink', 'main') {
35 flex: 0 0 auto; 32 flex-shrink: 1;
33 min-inline-size: 0;
34 }
36 35
37 @include iro.bem-modifier('shrink', 'main') { 36 @include bem.modifier('main') {
38 flex-shrink: 1; 37 inline-size: 100%;
39 min-inline-size: 0; 38 }
40 } 39 }
41 40 }
42 @include iro.bem-modifier('main') {
43 inline-size: 100%;
44 }
45 }
46 }
47} 41}
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss
new file mode 100644
index 0000000..dcb10de
--- /dev/null
+++ b/src/layouts/_media.vars.scss
@@ -0,0 +1,16 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3
4$gap: props.def(--l-media--gap, props.get(core.$size--150)) !default;
5
6$gapless: props.def(--l-media--gapless, 0) !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;
9$xl: props.def(--l-media--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/_overflow.scss b/src/layouts/_overflow.scss
index 8643bbf..6d31d37 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -1,9 +1,11 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/bem';
2@use '../functions' as fn; 2@use 'iro-sass/src/props';
3@use '../core.vars' as core;
3 4
4@include iro.props-namespace('overflow') { 5@mixin styles {
5 @include iro.bem-layout(iro.props-namespace()) { 6 @include bem.layout('overflow') {
6 overflow: auto; 7 overflow: auto;
7 scrollbar-color: fn.global-color(--text-disabled) transparent; 8 scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
8 } 9 }
9} 10}
11
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
new file mode 100644
index 0000000..4e34380
--- /dev/null
+++ b/src/layouts/_split-view.scss
@@ -0,0 +1,104 @@
1@use 'sass:meta';
2@use 'include-media/dist/include-media' as media;
3@use 'iro-sass/src/bem';
4@use 'iro-sass/src/props';
5@use '../props' as *;
6
7@forward 'split-view.vars';
8@use 'split-view.vars' as vars;
9
10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars'));
12
13 @include bem.layout('split-view') {
14 display: flex;
15 gap: props.get(vars.$col-gap);
16 align-items: start;
17
18 @include bem.elem('panel') {
19 flex: 1 1 auto;
20 inline-size: 100%;
21 min-inline-size: 0;
22
23 &::before {
24 display: block;
25 margin-block: -100em 100em;
26 content: '';
27 }
28
29 @include bem.modifier('side-25') {
30 flex: 0 0 auto;
31 inline-size: 25%;
32 }
33
34 @include bem.modifier('min-50') {
35 min-inline-size: props.get(vars.$panel--min-50);
36 }
37
38 @include bem.modifier('min-100') {
39 min-inline-size: props.get(vars.$panel--min-100);
40 }
41
42 @include bem.modifier('min-200') {
43 min-inline-size: props.get(vars.$panel--min-200);
44 }
45
46 @include bem.modifier('sticky') {
47 position: sticky;
48 inset-block-start: props.get(vars.$panel--sticky-offset);
49 }
50 }
51
52 @include bem.modifier('gapless') {
53 gap: props.get(vars.$gapless);
54
55 @include bem.elem('panel') {
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));
58 }
59
60 @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));
62 }
63
64 @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));
66 }
67 }
68 }
69
70 @include bem.elem('content') {
71 inline-size: 100%;
72 }
73
74 @include media.media('<=md') {
75 flex-direction: column;
76 gap: props.get(vars.$row-gap);
77 align-items: stretch;
78
79 @include bem.modifier('gapless') {
80 gap: props.get(vars.$gapless);
81 }
82
83 @include bem.modifier('wrap-reverse') {
84 flex-direction: column-reverse;
85 }
86
87 @include bem.elem('panel') {
88 inline-size: auto;
89
90 @include bem.modifier('side-25') {
91 inline-size: auto;
92 }
93
94 @include bem.modifier('min-50', 'min-100', 'min-200') {
95 min-inline-size: 0;
96 }
97
98 @include bem.modifier('sticky') {
99 position: static;
100 }
101 }
102 }
103 }
104}
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
new file mode 100644
index 0000000..1011948
--- /dev/null
+++ b/src/layouts/_split-view.vars.scss
@@ -0,0 +1,13 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3
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;
6
7$gapless: props.def(--l-split-view--gapless, 0rem) !default;
8
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;
11$panel--min-200: props.def(--l-split-view--panel--min-200, props.get(core.$size--4200)) !default;
12
13$panel--sticky-offset: props.def(--l-split-view--panel--sticky-offset, props.get(core.$sticky-top-offset)) !default;
generated by cgit v1.3 (git 2.53.0) at 2026-04-09 00:04:25 +0000