diff options
| author | Volpeon <git@volpeon.ink> | 2024-07-04 15:49:10 +0200 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2024-07-04 15:49:10 +0200 |
| commit | 977446e39cdbb5af3f5829330d5a9c91c9d5d877 (patch) | |
| tree | 59c2c663bda8b92d1254881c1baa26f50ac1d357 /src/objects | |
| parent | Add t-50 (diff) | |
| download | iro-design-977446e39cdbb5af3f5829330d5a9c91c9d5d877.tar.gz iro-design-977446e39cdbb5af3f5829330d5a9c91c9d5d877.tar.bz2 iro-design-977446e39cdbb5af3f5829330d5a9c91c9d5d877.zip | |
Better badge
Diffstat (limited to 'src/objects')
| -rw-r--r-- | src/objects/_badge.scss | 50 |
1 files changed, 31 insertions, 19 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index 06261b8..8a9fb58 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss | |||
| @@ -55,29 +55,33 @@ $static-themes: 'black' 'white' !default; | |||
| 55 | @include iro.props-namespace('badge') { | 55 | @include iro.props-namespace('badge') { |
| 56 | @include iro.props-store(( | 56 | @include iro.props-store(( |
| 57 | --dims: ( | 57 | --dims: ( |
| 58 | --pad-b: fn.global-dim(--size --50), | 58 | --pad-b: fn.global-dim(--size --50), |
| 59 | --pad-i: fn.global-dim(--size --150), | 59 | --pad-i: fn.global-dim(--size --100), |
| 60 | --pad-i-pill: fn.global-dim(--size --200), | 60 | --pad-i-pill: fn.global-dim(--size --150), |
| 61 | --rounding: fn.global-dim(--rounding), | 61 | --pad-i-label: fn.global-dim(--size --50), |
| 62 | --font-size: fn.global-dim(--font-size --75), | 62 | --rounding: fn.global-dim(--rounding), |
| 63 | --font-size: fn.global-dim(--font-size --75), | ||
| 63 | 64 | ||
| 64 | --sm: ( | 65 | --sm: ( |
| 65 | --pad-b: fn.global-dim(--size --25), | 66 | --pad-b: fn.global-dim(--size --25), |
| 66 | --pad-i: fn.global-dim(--size --115), | 67 | --pad-i: fn.global-dim(--size --75), |
| 67 | --pad-i-pill: fn.global-dim(--size --150), | 68 | --pad-i-pill: fn.global-dim(--size --125), |
| 68 | --font-size: fn.global-dim(--font-size --50), | 69 | --pad-i-label: fn.global-dim(--size --25), |
| 70 | --font-size: fn.global-dim(--font-size --50), | ||
| 69 | ), | 71 | ), |
| 70 | --lg: ( | 72 | --lg: ( |
| 71 | --pad-b: fn.global-dim(--size --75), | 73 | --pad-b: fn.global-dim(--size --75), |
| 72 | --pad-i: fn.global-dim(--size --175), | 74 | --pad-i: fn.global-dim(--size --125), |
| 73 | --pad-i-pill: fn.global-dim(--size --225), | 75 | --pad-i-pill: fn.global-dim(--size --175), |
| 74 | --font-size: fn.global-dim(--font-size --100), | 76 | --pad-i-label: fn.global-dim(--size --50), |
| 75 | ), | 77 | --font-size: fn.global-dim(--font-size --100), |
| 76 | --xl: ( | 78 | ), |
| 77 | --pad-b: fn.global-dim(--size --100), | 79 | --xl: ( |
| 78 | --pad-i: fn.global-dim(--size --225), | 80 | --pad-b: fn.global-dim(--size --100), |
| 79 | --pad-i-pill: fn.global-dim(--size --300), | 81 | --pad-i: fn.global-dim(--size --150), |
| 80 | --font-size: fn.global-dim(--font-size --150), | 82 | --pad-i-pill: fn.global-dim(--size --225), |
| 83 | --pad-i-label: fn.global-dim(--size --75), | ||
| 84 | --font-size: fn.global-dim(--font-size --150), | ||
| 81 | ), | 85 | ), |
| 82 | 86 | ||
| 83 | --key-focus: ( | 87 | --key-focus: ( |
| @@ -223,6 +227,10 @@ $static-themes: 'black' 'white' !default; | |||
| 223 | } | 227 | } |
| 224 | } | 228 | } |
| 225 | 229 | ||
| 230 | @include iro.bem-elem('label') { | ||
| 231 | margin-inline: fn.dim(--pad-i-label); | ||
| 232 | } | ||
| 233 | |||
| 226 | @include iro.bem-modifier('quiet') { | 234 | @include iro.bem-modifier('quiet') { |
| 227 | background-color: fn.color(--quiet --bg); | 235 | background-color: fn.color(--quiet --bg); |
| 228 | color: fn.color(--quiet --label); | 236 | color: fn.color(--quiet --label); |
| @@ -277,6 +285,10 @@ $static-themes: 'black' 'white' !default; | |||
| 277 | padding-block: fn.dim(--#{$size} --pad-b); | 285 | padding-block: fn.dim(--#{$size} --pad-b); |
| 278 | padding-inline: fn.dim(--#{$size} --pad-i); | 286 | padding-inline: fn.dim(--#{$size} --pad-i); |
| 279 | font-size: fn.dim(--#{$size} --font-size); | 287 | font-size: fn.dim(--#{$size} --font-size); |
| 288 | |||
| 289 | @include iro.bem-elem('label') { | ||
| 290 | margin-inline: fn.dim(--#{$size} --pad-i-label); | ||
| 291 | } | ||
| 280 | 292 | ||
| 281 | @include iro.bem-modifier('pill') { | 293 | @include iro.bem-modifier('pill') { |
| 282 | padding-inline: fn.dim(--#{$size} --pad-i-pill); | 294 | padding-inline: fn.dim(--#{$size} --pad-i-pill); |