Update split view

2 files changed, 17 insertions, 12 deletions

diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index 9d6c4bc..591267d 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -11,8 +11,8 @@
     @include materialize-at-root(meta.module-variables('vars'));
 
     @include bem.layout('split-view') {
-        display: flex;
-        gap: props.get(vars.$col-gap);
+        display:     flex;
+        gap:         props.get(vars.$col-gap);
         align-items: start;
 
         @include bem.modifier('gapless') {
@@ -20,18 +20,23 @@
         }
 
         @include bem.elem('panel') {
-            flex: 1 1 auto;
-            inline-size: 100%;
+            flex:            1 1 auto;
+            inline-size:     100%;
             min-inline-size: 0;
 
             @include bem.modifier('side-25') {
-                flex: 0 0 auto;
-                inline-size: 25%;
+                flex:            0 0 auto;
+                inline-size:     25%;
                 min-inline-size: props.get(vars.$panel--side-25--min);
             }
 
             @include bem.modifier('sticky') {
-                position: sticky;
+                position:          sticky;
+                inset-block-start: 0;
+            }
+
+            @include bem.modifier('sticky-400') {
+                position:          sticky;
                 inset-block-start: props.get(vars.$panel--sticky--inset);
             }
         }
@@ -42,18 +47,18 @@
 
         @include media.media('<=md') {
             flex-direction: column;
-            gap: props.get(vars.$row-gap);
-            align-items: stretch;
+            gap:            props.get(vars.$row-gap);
+            align-items:    stretch;
 
             @include bem.elem('panel') {
                 flex: 1 1 auto;
 
                 @include bem.modifier('side-25') {
-                    inline-size: auto;
+                    inline-size:     auto;
                     min-inline-size: 0;
                 }
 
-                @include bem.modifier('sticky') {
+                @include bem.modifier('sticky', 'sticky-400') {
                     position: static;
                 }
             }
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
index 864ab5d..8f6bf93 100644
--- a/src/layouts/_split-view.vars.scss
+++ b/src/layouts/_split-view.vars.scss
@@ -7,4 +7,4 @@ $row-gap:  props.def(--l-split-view--row-gap, props.get(core.$size--600)) !defau
 $gapless: props.def(--l-split-view--gapless, 0) !default;
 
 $panel--side-25--min: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--3200)) !default;
-$panel--sticky--inset: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--400)) !default;
+$panel--sticky-400--inset: props.def(--l-split-view--panel--sticky-400--inset, props.get(core.$size--400)) !default;