summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-07-04 15:49:10 +0200
committerVolpeon <git@volpeon.ink>2024-07-04 15:49:10 +0200
commit977446e39cdbb5af3f5829330d5a9c91c9d5d877 (patch)
tree59c2c663bda8b92d1254881c1baa26f50ac1d357 /src/objects
parentAdd t-50 (diff)
downloadiro-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.scss50
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);