summaryrefslogtreecommitdiffstats
path: root/src/layouts/_split-view.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts/_split-view.scss')
-rw-r--r--src/layouts/_split-view.scss128
1 files changed, 64 insertions, 64 deletions
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}