From 87d0d687d48b5939a441b893ef0bf6d41353982d Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 25 Oct 2024 14:45:21 +0200 Subject: Fix --- src/layouts/_split-view.scss | 54 +++++++++++++++++++++++++++++++++++++++ src/layouts/_split-view.vars.scss | 8 ++++++ 2 files changed, 62 insertions(+) create mode 100644 src/layouts/_split-view.scss create mode 100644 src/layouts/_split-view.vars.scss diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss new file mode 100644 index 0000000..eac739f --- /dev/null +++ b/src/layouts/_split-view.scss @@ -0,0 +1,54 @@ +@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; + +@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') { + position: sticky; + inset-block-start: props.get(vars.$panel--sticky--inset); + } + } + + @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.elem('panel') { + flex: 1 1 auto; + + @include bem.modifier('side-25') { + inline-size: auto; + min-inline-size: 0; + } + + @include bem.modifier('sticky') { + position: static; + } + } + } +} diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss new file mode 100644 index 0000000..581bba3 --- /dev/null +++ b/src/layouts/_split-view.vars.scss @@ -0,0 +1,8 @@ +@use 'iro-sass/src/props'; +@use '../core.vars' as core; + +$col-gap: props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default; +$row-gap: props.def(--l-split-view--row-gap, props.get(core.$size--600)) !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; -- cgit v1.2.3-70-g09d2