update: control pill size using parent

Author: vdvibhu20

examples/views/pills.hbs

@@ -1,58 +1,80 @@
 <div class="heading row">Small Pills</div>
 <div class="row">
-    <div class="col-4">
         <div class="pill-sm">
             Pill Default
         </div>
-    </div>
-    <div class="col-4">
+
         <div class="pill-sm bg-green">
             Pill Green
         </div>
-    </div>
-    <div class="col-4">
+
         <div class="pill-sm bg-red">
             Pill Red
         </div>
-    </div>
 </div>
 
 
 <div class="heading row">Default Pills</div>
 <div class="row">
-    <div class="col-4">
         <div class="pill">
             Pill Default
         </div>
-    </div>
-    <div class="col-4 ">
         <div class="pill bg-green">
             Pill Green
         </div>
-    </div>
-    <div class="col-4">
+
+
         <div class="pill bg-red">
             Pill Red
         </div>
-    </div>
 </div>
 
 <div class="heading row">Large Pills</div>
 <div class="row">
-    <div class="col-4">
         <div class="pill-lg">
             Pill Default
         </div>
-    </div>
-    <div class="col-4 ">
+
         <div class="pill-lg bg-green">
             Pill Green
         </div>
-    </div>
-    <div class="col-4">
+
         <div class="pill-lg bg-red">
             Pill Red
         </div>
+</div>
+
+
+<br>
+
+
+<div class="heading">Manage pill size by parent</div>
+
+<div class="row small">
+    <div class="pill">
+        Parent class=small
+    </div>
+
+    <div class="pill bg-green">
+        Parent class=small
+    </div>
+
+    <div class="pill bg-red">
+        Parent class=small
+    </div>
+</div>
+
+<div class="row large">
+    <div class="pill">
+        Parent class=large
+    </div>
+
+    <div class="pill bg-green">
+        Parent class=large
+    </div>
+
+    <div class="pill bg-red">
+        Parent class=large
     </div>
 </div>
 

sass/styles/_objects.scss

@@ -53,3 +53,4 @@
 @import "objects/o-signup/o-signup";
 @import "objects/tab-nav/tab-nav";
 @import "objects/o-changedp/o-changedp";
+@import "objects/o-pill/o-pill";

sass/styles/_tools.scss

@@ -8,4 +8,5 @@
 @import "tools/tools.border";
 @import "tools/tools.flexbox";
 @import "tools/tools.display";
+@import "tools/tools.width";
 

sass/styles/objects/o-pill/o-pill.scss

@@ -0,0 +1,18 @@
+.small{
+  .pill{
+    @include padding-s(0, 12px);
+
+    font-size: $card-sms;
+    height: 17px;
+  }
+}
+
+.large{
+  .pill{
+    @include padding-s(0, 30px);
+    @include border-radius(30px);
+
+    font-size: $font-sm;
+    height: 45px;
+  }
+}

sass/styles/tools/tools.dimensions.scss

@@ -1,11 +1,6 @@
 
-
 @mixin dimensions($width: $global-container-width, $height: $global-container-height) {
   width: $width;
   height: $height;
 }
 
-@mixin width-fit($moz: true){
-  width: fit-content;
-  @if($moz)       {width: -moz-fit-content}
-}

sass/styles/tools/tools.width.scss

@@ -0,0 +1,5 @@
+@mixin width-fit($moz: true, $webkit: true){
+  width: fit-content;
+  @if($moz)       {width: -moz-fit-content}
+  @if($webkit)       {width: -webkit-fit-content}
+}