summaryrefslogtreecommitdiffstats
path: root/src/layouts
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts')
-rw-r--r--src/layouts/_button-group.scss56
-rw-r--r--src/layouts/_button-group.vars.scss16
-rw-r--r--src/layouts/_card-list.scss100
-rw-r--r--src/layouts/_card-list.vars.scss22
-rw-r--r--src/layouts/_container.scss49
-rw-r--r--src/layouts/_container.vars.scss22
-rw-r--r--src/layouts/_flex.scss26
-rw-r--r--src/layouts/_form.scss55
-rw-r--r--src/layouts/_form.vars.scss5
-rw-r--r--src/layouts/_media.scss40
-rw-r--r--src/layouts/_media.vars.scss16
-rw-r--r--src/layouts/_overflow.scss12
-rw-r--r--src/layouts/_split-view.scss91
-rw-r--r--src/layouts/_split-view.vars.scss13
14 files changed, 348 insertions, 175 deletions
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
index a70d27a..b0a3c8e 100644
--- a/src/layouts/_button-group.scss
+++ b/src/layouts/_button-group.scss
@@ -1,16 +1,50 @@
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('button-group') { 6@forward 'button-group.vars';
5 @include iro.props-store(( 7@use 'button-group.vars' as vars;
6 --dims: ( 8@use '../objects/action-button.vars' as action-button;
7 --spacing: fn.global-dim(--size --150),
8 ),
9 ));
10 9
11 @include iro.bem-layout(iro.props-namespace()) { 10@mixin styles {
12 display: flex; 11 @include materialize-at-root(meta.module-variables('vars'));
13 gap: fn.dim(--spacing); 12
13 @include bem.layout('button-group') {
14 display: inline-flex;
14 flex-wrap: wrap; 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 }
23
24 @include bem.modifier('align-block') {
25 margin-inline: calc(-1 * props.get(action-button.$pad-i) - props.get(action-button.$border-width));
26
27 @include bem.modifier('pill') {
28 margin-inline: calc(-1 * props.get(action-button.$pad-i-pill) - props.get(action-button.$border-width));
29 }
30
31 @include bem.modifier('icon') {
32 margin-inline: calc(-1 * props.get(action-button.$pad-b) - props.get(action-button.$border-width) - .5em * (props.get(action-button.$line-height) - 1));
33 }
34
35 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in action-button.$fixed-sizes {
36 @include bem.modifier('action-#{$mod}') {
37 margin-inline: calc(-1 * props.get($pad-i) - props.get(action-button.$border-width));
38
39 @include bem.modifier('pill') {
40 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(action-button.$border-width));
41 }
42
43 @include bem.modifier('icon') {
44 margin-inline: calc(-1 * props.get($pad-b) - props.get(action-button.$border-width) - .5em * (props.get(action-button.$line-height) - 1));
45 }
46 }
47 }
48 }
15 } 49 }
16} 50}
diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss
new file mode 100644
index 0000000..50c1b53
--- /dev/null
+++ b/src/layouts/_button-group.vars.scss
@@ -0,0 +1,16 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3
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 65b6a66..8ef40c5 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -1,94 +1,80 @@
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@forward 'card-list.vars';
6 @include iro.props-store(( 8@use 'card-list.vars' as vars;
7 --dims: (
8 --row-gap: fn.global-dim(--size --800),
9 --col-gap: fn.global-dim(--size --400),
10 9
11 --grid: ( 10@mixin styles {
12 --row-gap: fn.global-dim(--size --800), 11 @include materialize-at-root(meta.module-variables('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 12
32 @include iro.bem-layout(iro.props-namespace()) { 13 @include bem.layout('card-list') {
33 display: flex; 14 display: flex;
34 flex-direction: column; 15 flex-direction: column;
35 gap: fn.dim(--row-gap) fn.dim(--col-gap); 16 gap: props.get(vars.$row-gap);
36 17
37 @include iro.bem-modifier('grid') { 18 @include bem.modifier('quiet') {
19 row-gap: props.get(vars.$quiet--row-gap);
20 }
21
22 @include bem.modifier('grid') {
38 display: grid; 23 display: grid;
39 grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr)); 24 grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
40 gap: fn.dim(--grid --col-gap); 25 gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
41 26
42 @include iro.bem-modifier('quiet') { 27 @include bem.modifier('quiet') {
43 row-gap: fn.dim(--grid --row-gap); 28 row-gap: props.get(vars.$grid--quiet--row-gap);
44 } 29 }
45 } 30 }
46 31
47 @include iro.bem-modifier('masonry') { 32 @include bem.modifier('masonry') {
48 display: block; 33 display: block;
49 columns: auto fn.dim(--masonry --col-width); 34 columns: auto props.get(vars.$masonry--col-width);
50 column-gap: fn.dim(--masonry --col-gap); 35 column-gap: props.get(vars.$masonry--col-gap);
51 36
52 @include iro.bem-elem('card') { 37 @include bem.elem('card') {
53 margin-block-end: fn.dim(--masonry --col-gap); 38 margin-block-end: props.get(vars.$masonry--row-gap);
54 break-inside: avoid; 39 break-inside: avoid;
55 } 40 }
56 41
57 @include iro.bem-modifier('quiet') { 42 @include bem.modifier('quiet') {
58 @include iro.bem-elem('card') { 43 @include bem.elem('card') {
59 margin-block-end: fn.dim(--masonry --row-gap); 44 margin-block-end: props.get(vars.$masonry--quiet--row-gap);
60 } 45 }
61 } 46 }
62 } 47 }
63 48
64 @include iro.bem-modifier('masonry-h') { 49 @include bem.modifier('masonry-h') {
65 flex-flow: row wrap; 50 flex-flow: row wrap;
66 gap: fn.dim(--masonry-h --col-gap); 51 gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
67 52
68 &::after { 53 @include bem.modifier('no-flush') {
69 content: ''; 54 &::after {
70 display: block; 55 display: block;
71 flex: 1 0 auto; 56 flex: 1 0 auto;
72 inline-size: fn.dim(--masonry-h --row-height); 57 inline-size: props.get(vars.$masonry-h--row-height);
73 block-size: 0; 58 content: '';
59 }
74 } 60 }
75 61
76 @include iro.bem-elem('card') { 62 @include bem.elem('card') {
77 flex: 1 0 auto; 63 flex: 1 0 auto;
78 max-inline-size: 100%; 64 max-inline-size: 100%;
79 } 65 }
80 66
81 @include iro.bem-elem('card-image') { 67 @include bem.elem('card-image') {
82 block-size: fn.dim(--masonry-h --row-height); 68 block-size: props.get(vars.$masonry-h--row-height);
83 } 69 }
84 70
85 @include iro.bem-modifier('quiet') { 71 @include bem.modifier('quiet') {
86 row-gap: fn.dim(--masonry-h --row-gap); 72 row-gap: props.get(vars.$masonry-h--quiet--row-gap);
87 } 73 }
88 } 74 }
89 75
90 @include iro.bem-modifier('aspect-5\\/4') { 76 @include bem.modifier('aspect-5\\/4') {
91 @include iro.bem-elem('card-image') { 77 @include bem.elem('card-image') {
92 aspect-ratio: 5 / 4; 78 aspect-ratio: 5 / 4;
93 } 79 }
94 } 80 }
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
new file mode 100644
index 0000000..f77bfbf
--- /dev/null
+++ b/src/layouts/_card-list.vars.scss
@@ -0,0 +1,22 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3
4$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;
6
7$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--400)) !default;
8$grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(core.$size--400)) !default;
9$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;
11
12$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;
14$masonry--col-width: props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default;
15$masonry--quiet--row-gap: props.def(--l-card-list--masonry--quiet--row-gap, props.get(core.$size--800)) !default;
16
17$masonry-h--row-gap: props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--400)) !default;
18$masonry-h--col-gap: props.def(--l-card-list--masonry-h--col-gap, props.get(core.$size--400)) !default;
19$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;
21
22$border-color: props.def(--l-card-list--border-color, props.get(core.$theme, --border), 'color') !default;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index d13c4f3..17ab2f0 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -1,45 +1,28 @@
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 )
27 ), 'xs');
28
29 @include iro.bem-layout(iro.props-namespace()) {
30 @each $size in 'narrow-125' 'narrow' 'narrow-75' {
31 @include iro.bem-modifier($size) {
32 max-inline-size: fn.dim(--#{$size});
33 margin-inline: auto; 16 margin-inline: auto;
34 } 17 }
35 } 18 }
36 19
37 @include iro.bem-modifier('pad-i') { 20 @include bem.modifier('pad-i') {
38 padding-inline: fn.dim(--pad-i); 21 padding-inline: props.get(vars.$pad-i);
39 } 22 }
40 23
41 @include iro.bem-modifier('pad-b') { 24 @include bem.modifier('pad-b') {
42 padding-block: fn.dim(--pad-b); 25 padding-block: props.get(vars.$pad-b);
43 } 26 }
44 } 27 }
45} 28}
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
new file mode 100644
index 0000000..56b6c89
--- /dev/null
+++ b/src/layouts/_container.vars.scss
@@ -0,0 +1,22 @@
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--400)) !default;
16$pad-b: props.def(--l-container--pad-b, props.get(core.$size--800)) !default;
17
18$pad-i--sm: props.def(--l-container--pad-i, props.get(core.$size--200), 'sm') !default;
19$pad-b--sm: props.def(--l-container--pad-b, props.get(core.$size--600), 'sm') !default;
20
21$pad-i--xs: props.def(--l-container--pad-i, props.get(core.$size--150), 'xs') !default;
22$pad-b--xs: props.def(--l-container--pad-b, props.get(core.$size--450), 'xs') !default;
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
index d3f4f9c..902ecdb 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 }
10
11 @include iro.bem-modifier('align-center') {
12 align-items: center;
13 }
14
15 @include iro.bem-modifier('align-start') {
16 align-items: flex-start;
17 } 9 }
18 10
19 @include iro.bem-modifier('align-end') { 11 @include bem.modifier('wrap') {
20 align-items: flex-end; 12 flex-wrap: wrap;
21 } 13 }
22 14
23 @include iro.bem-modifier('column') { 15 @include bem.modifier('wrap-reverse') {
24 flex-direction: column; 16 flex-wrap: wrap-reverse;
25 } 17 }
26 } 18 }
27} 19}
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index f6b60ea..5f0567b 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -1,60 +1,57 @@
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;
38 grid-template-rows: auto; 34 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 }
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/_media.scss b/src/layouts/_media.scss
index c42aa3e..2192db5 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -1,45 +1,39 @@
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 --lg: fn.global-dim(--size --300),
14 --xl: fn.global-dim(--size --450),
15 )
16 ));
17
18 @include iro.bem-layout(iro.props-namespace()) {
19 display: flex; 13 display: flex;
14 gap: props.get(vars.$gap);
20 align-items: center; 15 align-items: center;
21 gap: fn.dim(--gap);
22 line-height: 1.4; 16 line-height: 1.4;
23 17
24 @each $size in $sizes { 18 @each $mod, $size in vars.$sizes {
25 @include iro.bem-modifier($size) { 19 @include bem.modifier($mod) {
26 gap: fn.dim(--#{$size}); 20 gap: props.get($size);
27 } 21 }
28 } 22 }
29 23
30 @include iro.bem-modifier('wrap') { 24 @include bem.modifier('wrap') {
31 flex-wrap: wrap; 25 flex-wrap: wrap;
32 } 26 }
33 27
34 @include iro.bem-elem('block') { 28 @include bem.elem('block') {
35 flex: 0 0 auto; 29 flex: 0 0 auto;
36 30
37 @include iro.bem-modifier('shrink', 'main') { 31 @include bem.modifier('shrink', 'main') {
38 flex-shrink: 1; 32 flex-shrink: 1;
39 min-inline-size: 0; 33 min-inline-size: 0;
40 } 34 }
41 35
42 @include iro.bem-modifier('main') { 36 @include bem.modifier('main') {
43 inline-size: 100%; 37 inline-size: 100%;
44 } 38 }
45 } 39 }
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss
new file mode 100644
index 0000000..fd6d986
--- /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..9fba7eb 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..f522254
--- /dev/null
+++ b/src/layouts/_split-view.scss
@@ -0,0 +1,91 @@
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 @include bem.modifier('side-25') {
24 flex: 0 0 auto;
25 inline-size: 25%;
26 min-inline-size: props.get(vars.$panel--side-25--min);
27 }
28
29 @include bem.modifier('sticky-0') {
30 position: sticky;
31 inset-block-start: 0;
32 }
33
34 @include bem.modifier('sticky') {
35 position: sticky;
36 inset-block-start: props.get(vars.$panel--sticky-offset);
37 }
38
39 @include bem.modifier('sticky-400') {
40 position: sticky;
41 inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset));
42 }
43
44 @include bem.modifier('sticky-1200') {
45 position: sticky;
46 inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset));
47 }
48 }
49
50 @include bem.modifier('gapless') {
51 gap: props.get(vars.$gapless);
52
53 @include bem.elem('panel') {
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));
56 }
57 }
58 }
59
60 @include bem.elem('content') {
61 inline-size: 100%;
62 }
63
64 @include media.media('<=md') {
65 flex-direction: column;
66 gap: props.get(vars.$row-gap);
67 align-items: stretch;
68
69 @include bem.modifier('gapless') {
70 gap: props.get(vars.$gapless);
71 }
72
73 @include bem.modifier('wrap-reverse') {
74 flex-direction: column-reverse;
75 }
76
77 @include bem.elem('panel') {
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 }
91}
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
new file mode 100644
index 0000000..d519939
--- /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--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;
11$panel--sticky-1200--inset: props.def(--l-split-view--panel--sticky-1200--inset, props.get(core.$size--1200)) !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.2.3-70-g09d2 (git 2.50.0) at 2025-07-01 11:56:39 +0000