From 9262c000cde6610ff2be5a3f66f63a097101ef00 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 16 Nov 2024 11:34:57 +0100 Subject: Sticky offset --- src/objects/_action-button.scss | 34 +++++++++++++++++++++++++++++----- 1 file changed, 29 insertions(+), 5 deletions(-) (limited to 'src/objects') 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)); + } } } } -- cgit v1.2.3-70-g09d2