diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/layouts/_split-view.scss | 54 | ||||
-rw-r--r-- | src/layouts/_split-view.vars.scss | 8 |
2 files changed, 62 insertions, 0 deletions
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss new file mode 100644 index 0000000..eac739f --- /dev/null +++ b/src/layouts/_split-view.scss | |||
@@ -0,0 +1,54 @@ | |||
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 | @include bem.layout('split-view') { | ||
11 | display: flex; | ||
12 | gap: props.get(vars.$col-gap); | ||
13 | align-items: start; | ||
14 | |||
15 | @include bem.elem('panel') { | ||
16 | flex: 1 1 auto; | ||
17 | inline-size: 100%; | ||
18 | min-inline-size: 0; | ||
19 | |||
20 | @include bem.modifier('side-25') { | ||
21 | flex: 0 0 auto; | ||
22 | inline-size: 25%; | ||
23 | min-inline-size: props.get(vars.$panel--side-25--min); | ||
24 | } | ||
25 | |||
26 | @include bem.modifier('sticky') { | ||
27 | position: sticky; | ||
28 | inset-block-start: props.get(vars.$panel--sticky--inset); | ||
29 | } | ||
30 | } | ||
31 | |||
32 | @include bem.elem('content') { | ||
33 | inline-size: 100%; | ||
34 | } | ||
35 | |||
36 | @include media.media('<=md') { | ||
37 | flex-direction: column; | ||
38 | gap: props.get(vars.$row-gap); | ||
39 | align-items: stretch; | ||
40 | |||
41 | @include bem.elem('panel') { | ||
42 | flex: 1 1 auto; | ||
43 | |||
44 | @include bem.modifier('side-25') { | ||
45 | inline-size: auto; | ||
46 | min-inline-size: 0; | ||
47 | } | ||
48 | |||
49 | @include bem.modifier('sticky') { | ||
50 | position: static; | ||
51 | } | ||
52 | } | ||
53 | } | ||
54 | } | ||
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss new file mode 100644 index 0000000..581bba3 --- /dev/null +++ b/src/layouts/_split-view.vars.scss | |||
@@ -0,0 +1,8 @@ | |||
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 | $panel--side-25--min: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--3200)) !default; | ||
8 | $panel--sticky--inset: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--400)) !default; | ||