summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/layouts/_split-view.scss20
-rw-r--r--src/layouts/_split-view.vars.scss4
2 files changed, 12 insertions, 12 deletions
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index 6469a7d..33511d2 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -23,12 +23,11 @@
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--min-100);
27 } 27 }
28 28
29 @include bem.modifier('sticky-0') { 29 @include bem.modifier('min-200') {
30 position: sticky; 30 min-inline-size: props.get(vars.$panel--min-200);
31 inset-block-start: 0;
32 } 31 }
33 32
34 @include bem.modifier('sticky') { 33 @include bem.modifier('sticky') {
@@ -40,11 +39,6 @@
40 position: sticky; 39 position: sticky;
41 inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset)); 40 inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset));
42 } 41 }
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 } 42 }
49 43
50 @include bem.modifier('gapless') { 44 @include bem.modifier('gapless') {
@@ -52,7 +46,11 @@
52 46
53 @include bem.elem('panel') { 47 @include bem.elem('panel') {
54 @include bem.modifier('side-25') { 48 @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)); 49 min-inline-size: calc(props.get(vars.$panel--min-100) + props.get(vars.$col-gap) - props.get(vars.$gapless));
50 }
51
52 @include bem.modifier('min-200') {
53 min-inline-size: calc(props.get(vars.$panel--min-200) + props.get(vars.$col-gap) - props.get(vars.$gapless));
56 } 54 }
57 } 55 }
58 } 56 }
@@ -76,7 +74,7 @@
76 74
77 @include bem.elem('panel') { 75 @include bem.elem('panel') {
78 inline-size: auto; 76 inline-size: auto;
79 77
80 @include bem.modifier('side-25') { 78 @include bem.modifier('side-25') {
81 inline-size: auto; 79 inline-size: auto;
82 min-inline-size: 0; 80 min-inline-size: 0;
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
index d519939..5a8be2b 100644
--- a/src/layouts/_split-view.vars.scss
+++ b/src/layouts/_split-view.vars.scss
@@ -6,7 +6,9 @@ $row-gap: props.def(--l-split-view--row-gap, props.get(core.$size--600)) !defau
6 6
7$gapless: props.def(--l-split-view--gapless, 0rem) !default; 7$gapless: props.def(--l-split-view--gapless, 0rem) !default;
8 8
9$panel--side-25--min: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--3200)) !default; 9$panel--min-100: props.def(--l-split-view--panel--min-100, props.get(core.$size--3200)) !default;
10$panel--min-200: props.def(--l-split-view--panel--min-200, props.get(core.$size--4200)) !default;
11
10$panel--sticky-400--inset: props.def(--l-split-view--panel--sticky-400--inset, props.get(core.$size--400)) !default; 12$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; 13$panel--sticky-1200--inset: props.def(--l-split-view--panel--sticky-1200--inset, props.get(core.$size--1200)) !default;
12 14