diff options
Diffstat (limited to 'src')
-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); |