Add pill version for badge

3 files changed, 43 insertions, 6 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);
         }
diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug
index 441eb51..53e972c 100644
--- a/tpl/objects/badge.pug
+++ b/tpl/objects/badge.pug
@@ -2,7 +2,8 @@ mixin badge(variant)
     -
         let classes = {
             'o-badge':       true,
-            'o-menu__badge': !!attributes.menu
+            'o-badge--pill': !!attributes.pill,
+            'o-menu__badge': !!attributes.menu,
         }
         if (attributes.size) {
             classes['o-badge--' + attributes.size] = true
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
index 9979049..4c44af2 100644
--- a/tpl/views/badge.pug
+++ b/tpl/views/badge.pug
@@ -16,3 +16,20 @@ mixin view-badge
             +badge('accent')(size=200)= 'new'
             = ' '
             +badge('accent-quiet')(size=200)= 'new'
+
+        .c-box
+            +badge(pill=true)= '100'
+            = ' '
+            +badge('primary')(pill=true)= 'new'
+            = ' '
+            +badge('accent')(pill=true)= 'new'
+            = ' '
+            +badge('accent-quiet')(pill=true)= 'new'
+            = ' '
+            +badge(size=200, pill=true)= '100'
+            = ' '
+            +badge('primary')(size=200, pill=true)= 'new'
+            = ' '
+            +badge('accent')(size=200, pill=true)= 'new'
+            = ' '
+            +badge('accent-quiet')(size=200, pill=true)= 'new'