Adding filled counts and fixing counts within buttons.

dist/ratchet.css

@@ -753,40 +753,52 @@ input[type="button"] {
 
 [class*="count"] {
   display: inline-block;
+  color: #929292;
+}
+[class*="count"].count-filled {
   padding: 4px 9px;
-  font-size: 12px;
-  font-weight: bold;
-  line-height: 13px;
   color: #fff;
+  line-height: 1;
   background-color: #929292;
   border-radius: 100px;
 }
 
 .count-primary {
+  color: #007aff;
+}
+.count-primary.count-filled {
   background-color: #007aff;
 }
 
 .count-positive {
+  color: #4cd964;
+}
+.count-positive.count-filled {
   background-color: #4cd964;
 }
 
 .count-negative {
+  color: #dd524d;
+}
+.count-negative.count-filled {
   background-color: #dd524d;
 }
 
 [class*="button"] [class*="count"] {
+  font-size: 12px;
   padding-top: 2px;
   padding-bottom: 2px;
-  margin-right: -4px;
-  margin-left: 4px;
-  background-color: rgba(0, 0, 0, 0.1);
+  margin: -2px -4px -2px 4px;
+}
+
+.button-filled .count-filled,
+[class*="button"]:active .count-filled {
+  background-color: rgba(0, 0, 0, 0.2);
 }
 
 .button-block [class*="count"] {
   position: absolute;
   right: 0;
-  padding-top: 4px;
-  padding-bottom: 4px;
   margin-right: 10px;
 }
 

docs/index.html

@@ -684,17 +684,22 @@
           <h3 class="component-title">Buttons with counts</h3>
 
           <div class="component-example">
-            <a class="button">Count button<span class="count">1</span></a>
-            <a class="button-primary">Count button<span class="count">1</span></a>
-            <a class="button-positive">Count button<span class="count">1</span></a>
-            <a class="button-negative">Count button<span class="count">1</span></a>
+            <a class="button">Count button<span class="count count-filled">1</span></a>
+            <a class="button-primary">Count button<span class="count-primary count-filled">1</span></a>
+            <a class="button-positive">Count button<span class="count-positive count-filled">1</span></a>
+            <a class="button-negative">Count button<span class="count-negative count-filled">1</span></a>
           </div>
 
 <pre class="prettyprint">
-&lt;a class=&quot;button&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
-&lt;a class=&quot;button-primary&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
-&lt;a class=&quot;button-positive&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
-&lt;a class=&quot;button-negative&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
+&lt;a class=&quot;button&quot;&gt;Count button&lt;span class=&quot;count count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
+&lt;a class=&quot;button-primary&quot;&gt;Count button&lt;span class=&quot;count-primary count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
+&lt;a class=&quot;button-positive&quot;&gt;Count button&lt;span class=&quot;count-positive count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
+&lt;a class=&quot;button-negative&quot;&gt;Count button&lt;span class=&quot;count-negative count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
+
+&lt;a class=&quot;button-filled&quot;&gt;Count button&lt;span class=&quot;count count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
+&lt;a class=&quot;button-filled button-primary&quot;&gt;Count button&lt;span class=&quot;count-primary count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
+&lt;a class=&quot;button-filled button-positive&quot;&gt;Count button&lt;span class=&quot;count-positive count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
+&lt;a class=&quot;button-filled button-negative&quot;&gt;Count button&lt;span class=&quot;count-negative count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
 </pre>
 
         </article>
@@ -795,6 +800,10 @@
             <span class="count-primary">2</span>
             <span class="count-positive">3</span>
             <span class="count-negative">4</span>
+            <span class="count count-filled">1</span>
+            <span class="count-primary count-filled">2</span>
+            <span class="count-positive count-filled">3</span>
+            <span class="count-negative count-filled">4</span>
           </div>
 
 <pre class="prettyprint">
@@ -802,6 +811,11 @@
 &lt;span class=&quot;count-primary&quot;&gt;2&lt;/span&gt;
 &lt;span class=&quot;count-positive&quot;&gt;3&lt;/span&gt;
 &lt;span class=&quot;count-negative&quot;&gt;4&lt;/span&gt;
+
+&lt;span class=&quot;count count-filled&quot;&gt;1&lt;/span&gt;
+&lt;span class=&quot;count-primary count-filled&quot;&gt;2&lt;/span&gt;
+&lt;span class=&quot;count-positive count-filled&quot;&gt;3&lt;/span&gt;
+&lt;span class=&quot;count-negative count-filled&quot;&gt;4&lt;/span&gt;
 </pre>
 
         </article>

lib/sass/counts.scss

@@ -4,14 +4,16 @@
 
 [class*="count"] {
   display: inline-block;
+  color: $default-color;
+
+  &.count-filled {
     padding: 4px 9px;
-  font-size: 12px;
-  font-weight: bold;
-  line-height: 13px;
     color: #fff;
+    line-height: 1;
     background-color: $default-color;
     border-radius: 100px;
   }
+}
 
 
 // Count modifiers
@@ -19,39 +21,52 @@
 
 // Main count
 .count-primary {
+  color: $primary-color;
+
+  &.count-filled {
     background-color: $primary-color;
   }
+}
 
 // Positive count
 .count-positive {
+  color: $positive-color;
+
+  &.count-filled {
     background-color: $positive-color;
   }
+}
 
 // Negative count
 .count-negative {
+  color: $negative-color;
+
+  &.count-filled {
     background-color: $negative-color;
   }
+}
 
 
 // Counts in buttons
 // --------------------------------------------------
 
-// Generic styles for all counts within buttons
+// Generic styles for all counts within default buttons
 [class*="button"] [class*="count"] {
+  font-size: 12px;
   padding-top: 2px;
   padding-bottom: 2px;
-  margin-right: -4px;
-  margin-left: 4px;
-  background-color: rgba(0, 0, 0, .1);
+  margin: -2px -4px -2px 4px;
+}
+// Styles for filled counts within filled buttons
+.button-filled .count-filled,
+[class*="button"]:active .count-filled {
+  background-color: rgba(0,0,0,.2);
 }
-
 // Position counts within block level buttons
 // Note: These are absolutely positioned so that text of button isn't "pushed" by count and always
 // stays at true center of button
 .button-block [class*="count"] {
   position: absolute;
   right: 0;
-  padding-top: 4px;
-  padding-bottom: 4px;
   margin-right: 10px;
 }