Better badge

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;
 @include iro.props-namespace('badge') {
     @include iro.props-store((
         --dims: (
-            --pad-b:      fn.global-dim(--size --50),
-            --pad-i:      fn.global-dim(--size --150),
-            --pad-i-pill: fn.global-dim(--size --200),
-            --rounding:   fn.global-dim(--rounding),
-            --font-size:  fn.global-dim(--font-size --75),
+            --pad-b:       fn.global-dim(--size --50),
+            --pad-i:       fn.global-dim(--size --100),
+            --pad-i-pill:  fn.global-dim(--size --150),
+            --pad-i-label: fn.global-dim(--size --50),
+            --rounding:    fn.global-dim(--rounding),
+            --font-size:   fn.global-dim(--font-size --75),
 
             --sm: (
-                --pad-b:      fn.global-dim(--size --25),
-                --pad-i:      fn.global-dim(--size --115),
-                --pad-i-pill: fn.global-dim(--size --150),
-                --font-size:  fn.global-dim(--font-size --50),
+                --pad-b:       fn.global-dim(--size --25),
+                --pad-i:       fn.global-dim(--size --75),
+                --pad-i-pill:  fn.global-dim(--size --125),
+                --pad-i-label: fn.global-dim(--size --25),
+                --font-size:   fn.global-dim(--font-size --50),
             ),
             --lg: (
-                --pad-b:      fn.global-dim(--size --75),
-                --pad-i:      fn.global-dim(--size --175),
-                --pad-i-pill: fn.global-dim(--size --225),
-                --font-size:  fn.global-dim(--font-size --100),
-            ),
-            --xl: (
-                --pad-b:      fn.global-dim(--size --100),
-                --pad-i:      fn.global-dim(--size --225),
-                --pad-i-pill: fn.global-dim(--size --300),
-                --font-size:  fn.global-dim(--font-size --150),
+                --pad-b:       fn.global-dim(--size --75),
+                --pad-i:       fn.global-dim(--size --125),
+                --pad-i-pill:  fn.global-dim(--size --175),
+                --pad-i-label: fn.global-dim(--size --50),
+                --font-size:   fn.global-dim(--font-size --100),
+            ), 
+            --xl: ( 
+                --pad-b:       fn.global-dim(--size --100),
+                --pad-i:       fn.global-dim(--size --150),
+                --pad-i-pill:  fn.global-dim(--size --225),
+                --pad-i-label: fn.global-dim(--size --75),
+                --font-size:   fn.global-dim(--font-size --150),
             ),
             
             --key-focus: (
@@ -223,6 +227,10 @@ $static-themes: 'black' 'white' !default;
             }
         }
 
+        @include iro.bem-elem('label') {
+            margin-inline: fn.dim(--pad-i-label);
+        }
+
         @include iro.bem-modifier('quiet') {
             background-color: fn.color(--quiet --bg);
             color:            fn.color(--quiet --label);
@@ -277,6 +285,10 @@ $static-themes: 'black' 'white' !default;
                 padding-block:  fn.dim(--#{$size} --pad-b);
                 padding-inline: fn.dim(--#{$size} --pad-i);
                 font-size:      fn.dim(--#{$size} --font-size);
+
+                @include iro.bem-elem('label') {
+                    margin-inline: fn.dim(--#{$size} --pad-i-label);
+                }
         
                 @include iro.bem-modifier('pill') {
                     padding-inline: fn.dim(--#{$size} --pad-i-pill);