Sticky offset

5 files changed, 41 insertions, 8 deletions

diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 53c7067..5ea8326 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -102,6 +102,8 @@ $key-focus--border-offset: props.def(--key-focus--border-offset, props.get($bord
 $list--indent:         props.def(--list--indent, props.get($size--400)) !default;
 $list--compact-indent: props.def(--list--compact-indent, props.get($size--250)) !default;
 
+$sticky-top-offset: props.def(--sticky-top-offset, 0) !default;
+
 //
 
 $-static-colors: ();
diff --git a/src/_utils.scss b/src/_utils.scss
index 598eae4..6e7faf7 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -214,7 +214,7 @@ $-sizes: (
 
     @include bem.utility('p-sticky-bs') {
         position:          sticky;
-        inset-block-start: 0;
+        inset-block-start: props.get(vars.$sticky-top-offset);
     }
 
     @include bem.utility('p-sticky-be') {
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index a76f6e8..2744510 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -30,14 +30,19 @@
                 min-inline-size: props.get(vars.$panel--side-25--min);
             }
 
-            @include bem.modifier('sticky') {
+            @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: props.get(vars.$panel--sticky-400--inset);
+                inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset));
             }
         }
 
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
index 8f6bf93..01562e1 100644
--- a/src/layouts/_split-view.vars.scss
+++ b/src/layouts/_split-view.vars.scss
@@ -8,3 +8,5 @@ $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-400--inset: props.def(--l-split-view--panel--sticky-400--inset, props.get(core.$size--400)) !default;
+
+$panel--sticky-offset: props.def(--l-split-view--panel--sticky-offset, props.get(core.$sticky-top-offset)) !default;
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index dcabb57..206c611 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -158,6 +158,11 @@
             }
         }
 
+        @include bem.modifier('icon') {
+            inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
+            padding-inline: 0;
+        }
+
         @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
             @include bem.modifier($mod) {
                 padding-block:  props.get($pad-b);
@@ -171,17 +176,36 @@
                 @include bem.modifier('pill') {
                     padding-inline: props.get($pad-i-pill);
                 }
+
+                @include bem.modifier('icon') {
+                    inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
+                    padding-inline: 0;
+                }
             }
         }
 
-        @include bem.modifier('icon') {
-            inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
-            padding-inline: 0;
+        @include bem.modifier('align-inline') {
+            margin-inline: calc(-1 * props.get(vars.$pad-i));
+
+            @include bem.modifier('pill') {
+                margin-inline: calc(-1 * props.get(vars.$pad-i-pill));
+            }
+
+            @include bem.modifier('icon') {
+                margin-inline: calc(-1 * props.get(vars.$pad-b) - .5em * props.get(vars.$line-height));
+            }
 
             @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
                 @include bem.modifier($mod) {
-                    inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
-                    padding-inline: 0;
+                    margin-inline: calc(-1 * props.get($pad-i));
+    
+                    @include bem.modifier('pill') {
+                        margin-inline: calc(-1 * props.get($pad-i-pill));
+                    }
+
+                    @include bem.modifier('icon') {
+                        margin-inline: calc(-1 * props.get($pad-b) - .5em * props.get(vars.$line-height));
+                    }
                 }
             }
         }