summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/layouts/_split-view.scss54
-rw-r--r--src/layouts/_split-view.vars.scss8
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;