fix all the badges

dist/ios-theme.css

@@ -206,36 +206,33 @@ textarea,
   opacity: .6;
 }
 
-[class*="badge"] {
-  color: #929292;
-}
-[class*="badge"].badge-filled {
+[class*="badge"].badge-inverted {
   color: #929292;
 }
 
 .badge-primary {
-  color: #007aff;
-}
-.badge-primary.badge-filled {
   color: #fff;
   background-color: #007aff;
 }
+.badge-primary.badge-inverted {
+  color: #007aff;
+}
 
 .badge-positive {
-  color: #4cd964;
-}
-.badge-positive.badge-filled {
   color: #fff;
   background-color: #4cd964;
 }
+.badge-positive.badge-inverted {
+  color: #4cd964;
+}
 
 .badge-negative {
-  color: #dd524d;
-}
-.badge-negative.badge-filled {
   color: #fff;
   background-color: #dd524d;
 }
+.badge-negative.badge-inverted {
+  color: #dd524d;
+}
 
 .segmented-controller {
   background-color: transparent;

dist/ratchet.css

@@ -463,9 +463,11 @@ strong {
 .table-view .chevron {
   margin-top: -10px;
 }
+.table-view [class*="badge"] {
+  margin-top: -9px;
+}
 .table-view .chevron + [class*="badge"] {
   right: 30px;
-  margin-top: -9px;
 }
 .table-view [class*="button"] {
   left: auto;
@@ -746,10 +748,15 @@ input[type="button"] {
 .popover .button-block {
   margin-bottom: 5px;
 }
-
 .popover .button-block:last-child {
   margin-bottom: 0;
 }
+.popover .bar-nav .button-link.pull-left {
+  margin-left: 5px;
+}
+.popover .bar-nav .button-link.pull-right {
+  margin-right: 5px;
+}
 
 .chevron {
   display: block;

index.html

@@ -872,9 +872,9 @@ document
       <div class="component-example">
         <div id="myPopover" class="popover">  
           <header class="bar-nav">
-            <a class="button pull-left">
+            <a class="button-link pull-left">
               Left
-            </a><a class="button pull-right">
+            </a><a class="button-link pull-right">
               Right
             </a>
             <h3 class="title">Popover title</h3>
@@ -895,10 +895,10 @@ document
 {% highlight html %}
 <div id="popover" class="popover">  
   <header class="bar-nav">
-    <a class="button pull-left">
+    <a class="button-link pull-left">
       Left
     </a>
-    <a class="button pull-right">
+    <a class="button-link pull-right">
       Right
     </a>
     <h3 class="title">Popover title</h3>

lib/sass/buttons.scss

@@ -180,11 +180,22 @@ input[type="button"] {
 // --------------------------------------------------
 
 // Positioning and giving darker border to look sharp against dark popover
-.popover .button-block {
-  margin-bottom: 5px;
-}
+.popover {
+  .button-block {
+    margin-bottom: 5px;
+  }
 
-// Remove extra margin on bottom of last button
-.popover .button-block:last-child {
-  margin-bottom: 0;
+  // Remove extra margin on bottom of last button
+  .button-block:last-child {
+    margin-bottom: 0;
+  }
+  // Line the button text up with content's text
+  .bar-nav .button-link {
+    &.pull-left {
+      margin-left: 5px;
+    }
+    &.pull-right {
+      margin-right: 5px;
+    }
+  }
 }

lib/sass/table-views.scss

@@ -97,11 +97,13 @@
   .chevron {
     margin-top: -10px; // Half height of chevron
   }
+  [class*="badge"] {
+    margin-top: -9px; // Aligned just right
+  }
 
   // Push badge over if there's a sibling chevron
   .chevron + [class*="badge"] {
     right: 30px;
-    margin-top: -9px;
   }
 
   // Position buttons vertically centered on the right in table view items

lib/sass/theme-ios.scss

@@ -287,9 +287,7 @@ textarea,
 // --------------------------------------------------
 
 [class*="badge"] {
-  color: $default-color;
-
-  &.badge-filled {
+  &.badge-inverted {
     color: $default-color;
   }
 }
@@ -300,31 +298,31 @@ textarea,
 
 // 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;
   }
 }