Add pill version for badge

1 files changed, 24 insertions, 5 deletions

diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 7258cc0..17bb204 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -13,7 +13,15 @@
             --200: (
                 --pad-x: fn.global-dim(--size --75),
                 --pad-y: fn.global-dim(--size --25),
-            )
+            ),
+
+            --pill: (
+                --pad-x: fn.global-dim(--size --115),
+
+                --200: (
+                    --pad-x: fn.global-dim(--size --125),
+                ),
+            ),
         ),
     ), 'dims');
 
@@ -119,6 +127,21 @@
             }
         }
     
+        @include iro.bem-modifier('pill') {
+            padding-right: fn.dim(--pill --pad-x);
+            padding-left:  fn.dim(--pill --pad-x);
+            border-radius: 10em;
+        }
+    
+        @include iro.bem-modifier('200') {
+            padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x);
+    
+            @include iro.bem-modifier('pill') {
+                padding-right: fn.dim(--pill --200 --pad-x);
+                padding-left:  fn.dim(--pill --200 --pad-x);
+            }
+        }
+    
         @include iro.bem-modifier('fixed-100') {
             width: fn.dim(--fixed-100);
         }
@@ -127,10 +150,6 @@
             width: fn.dim(--fixed-200);
         }
     
-        @include iro.bem-modifier('200') {
-            padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x);
-        }
-    
         @include iro.bem-modifier('small') {
             font-size: fn.global-dim(--font-size --75);
         }