From ce96e6e378525592afc9d6bd8fd1b4064655b5e0 Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Fri, 20 Dec 2013 15:06:50 -0800
Subject: [PATCH] fix all the badges

---
 dist/ios-theme.css        | 23 ++++++++++-------------
 dist/ratchet.css          | 11 +++++++++--
 index.html                |  8 ++++----
 lib/sass/buttons.scss     | 23 +++++++++++++++++------
 lib/sass/table-views.scss |  4 +++-
 lib/sass/theme-ios.scss   | 28 +++++++++++++---------------
 6 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/dist/ios-theme.css b/dist/ios-theme.css
index 5464ac5..3c21785 100644
--- a/dist/ios-theme.css
+++ b/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;
diff --git a/dist/ratchet.css b/dist/ratchet.css
index a40d494..c3e74b4 100644
--- a/dist/ratchet.css
+++ b/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;
diff --git a/index.html b/index.html
index b138d9c..fd7df26 100644
--- a/index.html
+++ b/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>
diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss
index 4e66e3f..4175214 100644
--- a/lib/sass/buttons.scss
+++ b/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;
+    }
+  }
 }
diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss
index 2561ba0..9fa3747 100644
--- a/lib/sass/table-views.scss
+++ b/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
diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss
index b61b0ff..0fd12ba 100644
--- a/lib/sass/theme-ios.scss
+++ b/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;
   }
 }