diff options
| author | Volpeon <git@volpeon.ink> | 2024-11-16 11:34:57 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2024-11-16 11:34:57 +0100 |
| commit | 9262c000cde6610ff2be5a3f66f63a097101ef00 (patch) | |
| tree | 90b4bf213afa359b1371e6485a0574f6f7f9b501 /src/objects | |
| parent | Tabs (diff) | |
| download | iro-design-9262c000cde6610ff2be5a3f66f63a097101ef00.tar.gz iro-design-9262c000cde6610ff2be5a3f66f63a097101ef00.tar.bz2 iro-design-9262c000cde6610ff2be5a3f66f63a097101ef00.zip | |
Sticky offset
Diffstat (limited to 'src/objects')
| -rw-r--r-- | src/objects/_action-button.scss | 34 |
1 files changed, 29 insertions, 5 deletions
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 @@ | |||
| 158 | } | 158 | } |
| 159 | } | 159 | } |
| 160 | 160 | ||
| 161 | @include bem.modifier('icon') { | ||
| 162 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); | ||
| 163 | padding-inline: 0; | ||
| 164 | } | ||
| 165 | |||
| 161 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { | 166 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { |
| 162 | @include bem.modifier($mod) { | 167 | @include bem.modifier($mod) { |
| 163 | padding-block: props.get($pad-b); | 168 | padding-block: props.get($pad-b); |
| @@ -171,17 +176,36 @@ | |||
| 171 | @include bem.modifier('pill') { | 176 | @include bem.modifier('pill') { |
| 172 | padding-inline: props.get($pad-i-pill); | 177 | padding-inline: props.get($pad-i-pill); |
| 173 | } | 178 | } |
| 179 | |||
| 180 | @include bem.modifier('icon') { | ||
| 181 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); | ||
| 182 | padding-inline: 0; | ||
| 183 | } | ||
| 174 | } | 184 | } |
| 175 | } | 185 | } |
| 176 | 186 | ||
| 177 | @include bem.modifier('icon') { | 187 | @include bem.modifier('align-inline') { |
| 178 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); | 188 | margin-inline: calc(-1 * props.get(vars.$pad-i)); |
| 179 | padding-inline: 0; | 189 | |
| 190 | @include bem.modifier('pill') { | ||
| 191 | margin-inline: calc(-1 * props.get(vars.$pad-i-pill)); | ||
| 192 | } | ||
| 193 | |||
| 194 | @include bem.modifier('icon') { | ||
| 195 | margin-inline: calc(-1 * props.get(vars.$pad-b) - .5em * props.get(vars.$line-height)); | ||
| 196 | } | ||
| 180 | 197 | ||
| 181 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { | 198 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { |
| 182 | @include bem.modifier($mod) { | 199 | @include bem.modifier($mod) { |
| 183 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); | 200 | margin-inline: calc(-1 * props.get($pad-i)); |
| 184 | padding-inline: 0; | 201 | |
| 202 | @include bem.modifier('pill') { | ||
| 203 | margin-inline: calc(-1 * props.get($pad-i-pill)); | ||
| 204 | } | ||
| 205 | |||
| 206 | @include bem.modifier('icon') { | ||
| 207 | margin-inline: calc(-1 * props.get($pad-b) - .5em * props.get(vars.$line-height)); | ||
| 208 | } | ||
| 185 | } | 209 | } |
| 186 | } | 210 | } |
| 187 | } | 211 | } |