Add gapless modifier to split view

2 files changed, 6 insertions, 0 deletions

diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index 2bc35bc..9d6c4bc 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -15,6 +15,10 @@
         gap: props.get(vars.$col-gap);
         align-items: start;
 
+        @include bem.modifier('gapless') {
+            gap: props.get(vars.$gapless);
+        }
+
         @include bem.elem('panel') {
             flex: 1 1 auto;
             inline-size: 100%;
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
index 581bba3..864ab5d 100644
--- a/src/layouts/_split-view.vars.scss
+++ b/src/layouts/_split-view.vars.scss
@@ -4,5 +4,7 @@
 $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;
 
+$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;