1 files changed, 91 insertions, 0 deletions

diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
new file mode 100644
index 0000000..f522254
--- /dev/null
+++ b/src/layouts/_split-view.scss
@@ -0,0 +1,91 @@
+@use 'sass:meta';
+@use 'include-media/dist/include-media' as media;
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'split-view.vars';
+@use 'split-view.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.layout('split-view') {
+        display:     flex;
+        gap:         props.get(vars.$col-gap);
+        align-items: start;
+
+        @include bem.elem('panel') {
+            flex:            1 1 auto;
+            inline-size:     100%;
+            min-inline-size: 0;
+
+            @include bem.modifier('side-25') {
+                flex:            0 0 auto;
+                inline-size:     25%;
+                min-inline-size: props.get(vars.$panel--side-25--min);
+            }
+
+            @include bem.modifier('sticky-0') {
+                position:          sticky;
+                inset-block-start: 0;
+            }
+
+            @include bem.modifier('sticky') {
+                position:          sticky;
+                inset-block-start: props.get(vars.$panel--sticky-offset);
+            }
+
+            @include bem.modifier('sticky-400') {
+                position:          sticky;
+                inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset));
+            }
+
+            @include bem.modifier('sticky-1200') {
+                position:          sticky;
+                inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset));
+            }
+        }
+
+        @include bem.modifier('gapless') {
+            gap: props.get(vars.$gapless);
+
+            @include bem.elem('panel') {
+                @include bem.modifier('side-25') {
+                    min-inline-size: calc(props.get(vars.$panel--side-25--min) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+                }
+            }
+        }
+
+        @include bem.elem('content') {
+            inline-size: 100%;
+        }
+
+        @include media.media('<=md') {
+            flex-direction: column;
+            gap:            props.get(vars.$row-gap);
+            align-items:    stretch;
+
+            @include bem.modifier('gapless') {
+                gap: props.get(vars.$gapless);
+            }
+
+            @include bem.modifier('wrap-reverse') {
+                flex-direction: column-reverse;
+            }
+
+            @include bem.elem('panel') {
+                inline-size: auto;
+                
+                @include bem.modifier('side-25') {
+                    inline-size:     auto;
+                    min-inline-size: 0;
+                }
+
+                @include bem.modifier('sticky', 'sticky-400', 'sticky-1200') {
+                    position: static;
+                }
+            }
+        }
+    }
+}