From a4c5eb2ab28b73aba162407d88e34e5eb334f429 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 26 Oct 2024 21:48:20 +0200
Subject: Update split view
---
src/layouts/_split-view.scss | 27 ++++++++++++++++-----------
src/layouts/_split-view.vars.scss | 2 +-
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;
--
cgit v1.2.3-70-g09d2