Update split view

1 files changed, 16 insertions, 11 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;
                 }
             }