From a4c5eb2ab28b73aba162407d88e34e5eb334f429 Mon Sep 17 00:00:00 2001 From: Volpeon 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