From 7e9110196a1c8b8ec978f5fe3e194ca334a9157b Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Fri, 20 Dec 2013 13:43:28 -0800
Subject: [PATCH] twerkin badges

---
 dist/ratchet.css      | 39 ++++++++++++++++++++-------------
 index.html            | 13 +++++++----
 lib/sass/badges.scss  | 50 +++++++++++++++++++++++++------------------
 lib/sass/buttons.scss |  2 +-
 4 files changed, 63 insertions(+), 41 deletions(-)

diff --git a/dist/ratchet.css b/dist/ratchet.css
index 6545caa..0d6a49a 100644
--- a/dist/ratchet.css
+++ b/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"]:active .badge-filled {
-  background-color: rgba(0, 0, 0, 0.15);
+[class*="button"] .badge-inverted,
+[class*="button"]:active .badge-inverted {
+  background-color: transparent;
+}
+
+.button-primary:active .badge-inverted,
+.button-positive:active .badge-inverted,
+.button-negative:active .badge-inverted {
+  color: #fff;
 }
 
 .button-block [class*="badge"] {
diff --git a/index.html b/index.html
index 8eefbc7..1472f58 100644
--- a/index.html
+++ b/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 button-primary">Badge button<span class="badge-primary">1</span></a>
-<a class="button-outlined button-positive">Badge button<span class="badge-positive">1</span></a>
-<a class="button-outlined button-negative">Badge button<span class="badge-negative">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 badge-inverted">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 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 %}
 
 
diff --git a/lib/sass/badges.scss b/lib/sass/badges.scss
index 177cef1..7d2d0de 100644
--- a/lib/sass/badges.scss
+++ b/lib/sass/badges.scss
@@ -4,14 +4,16 @@
 
 [class*="badge"] {
   display: inline-block;
+  padding: 2px 9px;
+  font-size: 13px;
+  line-height: 1;
   color: #333;
+  background-color: rgba(0,0,0,.15);
+  border-radius: 100px;
 
-  &.badge-filled {
-    padding: 2px 9px;
-    font-size: 13px;
-    line-height: 1;
-    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;
+  color: #fff;
+  background-color: $primary-color;
 
-  &.badge-filled {
-    color: #fff;
-    background-color: $primary-color;
+  &.badge-inverted {
+    color: $primary-color;
   }
 }
 
 // Positive badge
 .badge-positive {
-  color: $positive-color;
+  color: #fff;
+  background-color: $positive-color;
 
-  &.badge-filled {
-    color: #fff;
-    background-color: $positive-color;
+  &.badge-inverted {
+    color: $positive-color;
   }
 }
 
 // Negative badge
 .badge-negative {
-  color: $negative-color;
+  color: #fff;
+  background-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"]:active .badge-filled {
-  background-color: rgba(0,0,0,.15);
+[class*="button"] .badge-inverted,
+[class*="button"]:active .badge-inverted {
+  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
diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss
index 7595510..bbf3ba3 100644
--- a/lib/sass/buttons.scss
+++ b/lib/sass/buttons.scss
@@ -74,7 +74,7 @@
   }
 }
 
-// Outline buttons 
+// Outlined buttons 
 .button-outlined {
   background-color: transparent;