From b0f622bcc5750c96f6f1b7efc5090cd8d5191745 Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sat, 1 Feb 2014 11:49:06 -0800
Subject: [PATCH] fix up badges

---
 components.html          | 6 +++---
 dist/ios-theme.css       | 7 ++++---
 dist/ratchet.css         | 2 +-
 docs-assets/css/docs.css | 6 +++---
 lib/sass/badges.scss     | 2 +-
 lib/sass/theme-ios.scss  | 8 +++++---
 6 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/components.html b/components.html
index 0753ec5..23cea9f 100644
--- a/components.html
+++ b/components.html
@@ -584,9 +584,9 @@ base_url: "../"
 <a class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></a>
 
 <a class="btn btn-outlined">Badge button <span class="badge badge-inverted">1</span></a>
-<a class="btn btn-outlined btn-primary">Badge button <span class="badge-primary badge-inverted">1</span></a>
-<a class="btn btn-outlined btn-positive">Badge button <span class="badge-positive badge-inverted">1</span></a>
-<a class="btn btn-outlined btn-negative">Badge button <span class="badge-negative badge-inverted">1</span></a>
+<a class="btn btn-outlined btn-primary">Badge button <span class="badge badge-primary badge-inverted">1</span></a>
+<a class="btn btn-outlined btn-positive">Badge button <span class="badge badge-positive badge-inverted">1</span></a>
+<a class="btn btn-outlined btn-negative">Badge button <span class="badge badge-negative badge-inverted">1</span></a>
 {% endhighlight %}
 
   </article>
diff --git a/dist/ios-theme.css b/dist/ios-theme.css
index 8aa2de3..110ebe0 100644
--- a/dist/ios-theme.css
+++ b/dist/ios-theme.css
@@ -222,7 +222,6 @@ textarea,
 
 .badge-primary {
   color: #fff;
-  background-color: #007aff;
 }
 .badge-primary.badge-inverted {
   color: #007aff;
@@ -230,7 +229,6 @@ textarea,
 
 .badge-positive {
   color: #fff;
-  background-color: #4cd964;
 }
 .badge-positive.badge-inverted {
   color: #4cd964;
@@ -238,12 +236,15 @@ textarea,
 
 .badge-negative {
   color: #fff;
-  background-color: #dd524d;
 }
 .badge-negative.badge-inverted {
   color: #dd524d;
 }
 
+.btn:active .badge-inverted {
+  color: #fff;
+}
+
 .segmented-control {
   color: #929292;
   background-color: transparent;
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 5a3775a..fabd166 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -791,7 +791,7 @@ input[type="button"] {
   border-radius: 100px;
 }
 .badge.badge-inverted {
-  padding: 0;
+  padding: 0 5px 0 0;
   background-color: transparent;
 }
 
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index 7480fe3..3844adb 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -992,25 +992,25 @@ hr {
 }
 .platform-ios .badge-primary {
   color: #fff;
-  background-color: #007aff;
 }
 .platform-ios .badge-primary.badge-inverted {
   color: #007aff;
 }
 .platform-ios .badge-positive {
   color: #fff;
-  background-color: #4cd964;
 }
 .platform-ios .badge-positive.badge-inverted {
   color: #4cd964;
 }
 .platform-ios .badge-negative {
   color: #fff;
-  background-color: #dd524d;
 }
 .platform-ios .badge-negative.badge-inverted {
   color: #dd524d;
 }
+.platform-ios .btn:active .badge-inverted {
+  color: #fff;
+}
 .platform-ios .segmented-control {
   color: #929292;
   background-color: transparent;
diff --git a/lib/sass/badges.scss b/lib/sass/badges.scss
index aac831d..6807543 100644
--- a/lib/sass/badges.scss
+++ b/lib/sass/badges.scss
@@ -12,7 +12,7 @@
   border-radius: 100px;
 
   &.badge-inverted {
-    padding: 0;
+    padding: 0 5px 0 0;
     background-color: transparent;
   }
 }
diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss
index 43ef547..5e2f8d4 100644
--- a/lib/sass/theme-ios.scss
+++ b/lib/sass/theme-ios.scss
@@ -313,7 +313,6 @@ textarea,
 // Main badge
 .badge-primary {
   color: #fff;
-  background-color: $primary-color;
 
   &.badge-inverted {
     color: $primary-color;
@@ -323,7 +322,6 @@ textarea,
 // Positive badge
 .badge-positive {
   color: #fff;
-  background-color: $positive-color;
 
   &.badge-inverted {
     color: $positive-color;
@@ -333,13 +331,17 @@ textarea,
 // Negative badge
 .badge-negative {
   color: #fff;
-  background-color: $negative-color;
 
   &.badge-inverted {
     color: $negative-color;
   }
 }
 
+// Active states
+.btn:active .badge-inverted {
+  color: #fff;
+}
+
 
 //
 // Segmented controllers