fix up badges

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-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-positive 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-negative 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>

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;

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;
 }
 

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;

lib/sass/badges.scss

@@ -12,7 +12,7 @@
   border-radius: 100px;
 
   &.badge-inverted {
-    padding: 0;
+    padding: 0 5px 0 0;
     background-color: transparent;
   }
 }

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