twerkin badges

dist/ratchet.css

@@ -777,50 +777,59 @@ input[type="button"] {
 
 [class*="badge"] {
   display: inline-block;
-  color: #333;
-}
-[class*="badge"].badge-filled {
   padding: 2px 9px;
   font-size: 13px;
   line-height: 1;
+  color: #333;
   background-color: rgba(0, 0, 0, 0.15);
   border-radius: 100px;
 }
+[class*="badge"].badge-inverted {
+  padding: 0;
+  background-color: transparent;
+}
 
 .badge-primary {
-  color: #428bca;
-}
-.badge-primary.badge-filled {
   color: #fff;
   background-color: #428bca;
 }
+.badge-primary.badge-inverted {
+  color: #428bca;
+}
 
 .badge-positive {
-  color: #5cb85c;
-}
-.badge-positive.badge-filled {
   color: #fff;
   background-color: #5cb85c;
 }
+.badge-positive.badge-inverted {
+  color: #5cb85c;
+}
 
 .badge-negative {
-  color: #d9534f;
-}
-.badge-negative.badge-filled {
   color: #fff;
   background-color: #d9534f;
 }
+.badge-negative.badge-inverted {
+  color: #d9534f;
+}
 
 [class*="button"] [class*="badge"] {
   font-size: 12px;
   padding-top: 2px;
   padding-bottom: 2px;
   margin: -2px -4px -2px 4px;
+  background-color: rgba(0, 0, 0, 0.15);
 }
 
-.button-filled .badge-filled,
+[class*="button"] .badge-inverted,
-[class*="button"]:active .badge-filled {
+[class*="button"]:active .badge-inverted {
-  background-color: rgba(0, 0, 0, 0.15);
+  background-color: transparent;
+}
+
+.button-primary:active .badge-inverted,
+.button-positive:active .badge-inverted,
+.button-negative:active .badge-inverted {
+  color: #fff;
 }
 
 .button-block [class*="badge"] {

index.html

@@ -621,10 +621,10 @@ layout: default
 <a class="button-positive">Badge button<span class="badge-positive">1</span></a>
 <a class="button-negative">Badge button<span class="badge-negative">1</span></a>
 
-<a class="button-outlined">Badge button<span class="badge">1</span></a>
+<a class="button-outlined">Badge button<span class="badge badge-inverted">1</span></a>
-<a class="button-outlined button-primary">Badge button<span class="badge-primary">1</span></a>
+<a class="button-outlined button-primary">Badge button<span class="badge-primary badge-inverted">1</span></a>
-<a class="button-outlined button-positive">Badge button<span class="badge-positive">1</span></a>
+<a class="button-outlined button-positive">Badge button<span class="badge-positive badge-inverted">1</span></a>
-<a class="button-outlined button-negative">Badge button<span class="badge-negative">1</span></a>
+<a class="button-outlined button-negative">Badge button<span class="badge-negative badge-inverted">1</span></a>
 {% endhighlight %}
 
     </article>
@@ -733,6 +733,11 @@ layout: default
 <span class="badge-primary">2</span>
 <span class="badge-positive">3</span>
 <span class="badge-negative">4</span>
+
+<span class="badge badge-inverted">1</span>
+<span class="badge-primary badge-inverted">2</span>
+<span class="badge-positive badge-inverted">3</span>
+<span class="badge-negative badge-inverted">4</span>
 {% endhighlight %}
 
 

lib/sass/badges.scss

@@ -4,14 +4,16 @@
 
 [class*="badge"] {
   display: inline-block;
-  color: #333;
-
-  &.badge-filled {
   padding: 2px 9px;
   font-size: 13px;
   line-height: 1;
+  color: #333;
   background-color: rgba(0,0,0,.15);
   border-radius: 100px;
+
+  &.badge-inverted {
+    padding: 0;
+    background-color: transparent;
   }
 }
 
@@ -21,31 +23,31 @@
 
 // Main badge
 .badge-primary {
-  color: $primary-color;
-
-  &.badge-filled {
   color: #fff;
   background-color: $primary-color;
+
+  &.badge-inverted {
+    color: $primary-color;
   }
 }
 
 // Positive badge
 .badge-positive {
-  color: $positive-color;
-
-  &.badge-filled {
   color: #fff;
   background-color: $positive-color;
+
+  &.badge-inverted {
+    color: $positive-color;
   }
 }
 
 // Negative badge
 .badge-negative {
-  color: $negative-color;
-
-  &.badge-filled {
   color: #fff;
   background-color: $negative-color;
+
+  &.badge-inverted {
+    color: $negative-color;
   }
 }
 
@@ -59,12 +61,18 @@
   padding-top: 2px;
   padding-bottom: 2px;
   margin: -2px -4px -2px 4px;
+  background-color: rgba(0,0,0,.15);
 }
 
 // Styles for filled badges within filled buttons
-.button-filled .badge-filled,
+[class*="button"] .badge-inverted,
-[class*="button"]:active .badge-filled {
+[class*="button"]:active .badge-inverted {
-  background-color: rgba(0,0,0,.15);
+  background-color: transparent;
+}
+.button-primary:active .badge-inverted,
+.button-positive:active .badge-inverted,
+.button-negative:active .badge-inverted {
+  color: #fff;
 }
 
 // Position badges within block level buttons

lib/sass/buttons.scss

@@ -74,7 +74,7 @@
   }
 }
 
-// Outline buttons 
+// Outlined buttons 
 .button-outlined {
   background-color: transparent;