refactoring icons and buttons in bars

8 files changed, 127 insertions, 242 deletions

diff --git a/dist/android-theme.css b/dist/android-theme.css
index 7a43669..f862805 100644
--- a/dist/android-theme.css
+++ b/dist/android-theme.css
@@ -197,12 +197,13 @@ a:active {
 }
 
 .bar .btn {
+  margin-top: 7px;
   padding-top: 9px;
   padding-bottom: 9px;
 }
 .bar .btn-link {
-  padding-top: 0;
-  padding-bottom: 0;
+  margin-top: 0;
+  padding: 0;
   color: #33b5e5;
   font-size: 18px;
   line-height: 49px;
@@ -210,27 +211,7 @@ a:active {
 .bar .btn-link:active, .bar .btn-link.active {
   color: #1a9bcb;
 }
-.bar .btn-link.pull-left {
-  padding-left: 12px;
-  padding-right: 0;
-}
-.bar .btn-link.pull-right {
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.bar-nav .btn {
-  margin-top: 7px;
-}
-.bar-nav .btn-link {
-  margin-top: 0;
-  color: #33b5e5;
-}
-.bar-nav .btn-link:active {
-  color: #33b5e5;
-  opacity: .6;
-}
-.bar-nav .btn-link .icon {
+.bar .btn-link .icon {
   top: 2px;
   padding: 0;
 }
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 2f1df19..b06f205 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -552,50 +552,31 @@ input[type="button"] {
   font-size: 11px;
 }
 
-.bar-nav .btn {
+.bar .btn {
   position: relative;
   z-index: 20;
   padding: 6px 12px;
   margin-top: 8px;
   font-weight: 400;
 }
-.bar-nav .btn.pull-right {
+.bar .btn.pull-right {
   margin-left: 10px;
 }
-.bar-nav .btn.pull-left {
+.bar .btn.pull-left {
   margin-right: 10px;
 }
 
-.bar-nav .btn-link {
+.bar .btn-link {
   margin-top: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding: 0;
   font-size: 16px;
   color: #428bca;
   line-height: 44px;
   border: 0;
 }
-.bar-nav .btn-link:active, .bar-nav .btn-link.active {
+.bar .btn-link:active, .bar .btn-link.active {
   color: #3071a9;
 }
-.bar-nav .btn-link .icon {
-  top: 2px;
-  padding: 0;
-}
-.bar-nav .btn-link.pull-left {
-  margin-left: -10px;
-}
-.bar-nav .btn-link.pull-left .icon {
-  margin-right: -5px;
-  margin-left: -7px;
-}
-.bar-nav .btn-link.pull-right {
-  margin-right: -10px;
-}
-.bar-nav .btn-link.pull-right .icon {
-  margin-right: -7px;
-  margin-left: -5px;
-}
 
 .bar .btn-block {
   padding: 7px 0 6px;
@@ -604,31 +585,28 @@ input[type="button"] {
   font-size: 16px;
 }
 
-.bar input[type="search"] {
-  height: 29px;
-  margin: 6px 0;
+.bar .btn-nav.pull-left {
+  margin-left: -5px;
 }
-
-.bar .segmented-control {
-  top: 8px;
-  margin: 0 auto;
+.bar .btn-nav.pull-left .icon-left-nav {
+  margin-right: -3px;
+}
+.bar .btn-nav.pull-right {
+  margin-right: -5px;
+}
+.bar .btn-nav.pull-right .icon-right-nav {
+  margin-left: -3px;
 }
 
 .bar .icon {
   position: relative;
-  padding: 10px 13px;
+  padding: 10px 0;
   z-index: 20;
   font-size: 24px;
 }
-.bar > .icon {
-  padding-right: 5px;
-  padding-left: 5px;
-}
-.bar > .icon.pull-left {
-  margin-left: -10px;
-}
-.bar > .icon.pull-right {
-  margin-right: -10px;
+.bar .btn .icon {
+  top: 2px;
+  padding: 0;
 }
 .bar .title .icon {
   padding: 0;
@@ -638,6 +616,16 @@ input[type="button"] {
   margin-left: -5px;
 }
 
+.bar input[type="search"] {
+  height: 29px;
+  margin: 6px 0;
+}
+
+.bar .segmented-control {
+  top: 8px;
+  margin: 0 auto;
+}
+
 .badge {
   display: inline-block;
   padding: 2px 9px;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index c330d5a..6df1380 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -1374,12 +1374,13 @@ hr {
   text-align: left;
 }
 .platform-android .bar .btn {
+  margin-top: 7px;
   padding-top: 9px;
   padding-bottom: 9px;
 }
 .platform-android .bar .btn-link {
-  padding-top: 0;
-  padding-bottom: 0;
+  margin-top: 0;
+  padding: 0;
   color: #33b5e5;
   font-size: 18px;
   line-height: 49px;
@@ -1387,26 +1388,7 @@ hr {
 .platform-android .bar .btn-link:active, .platform-android .bar .btn-link.active {
   color: #1a9bcb;
 }
-.platform-android .bar .btn-link.pull-left {
-  padding-left: 12px;
-  padding-right: 0;
-}
-.platform-android .bar .btn-link.pull-right {
-  padding-left: 0;
-  padding-right: 12px;
-}
-.platform-android .bar-nav .btn {
-  margin-top: 7px;
-}
-.platform-android .bar-nav .btn-link {
-  margin-top: 0;
-  color: #33b5e5;
-}
-.platform-android .bar-nav .btn-link:active {
-  color: #33b5e5;
-  opacity: .6;
-}
-.platform-android .bar-nav .btn-link .icon {
+.platform-android .bar .btn-link .icon {
   top: 2px;
   padding: 0;
 }
diff --git a/docs/components.html b/docs/components.html
index aa5e98a..8d5d5cf 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -127,11 +127,11 @@ title: Components · Ratchet
 
       <div class="component-example component-example-fullbleed">
         <header class="bar bar-nav">
-          <a class="btn btn-link pull-left">
+          <a class="btn btn-link btn-nav pull-left">
             <span class="icon icon-left-nav"></span>
             Left
           </a>
-          <a class="btn btn-link pull-right">
+          <a class="btn btn-link btn-nav pull-right">
             Right
             <span class="icon icon-right-nav"></span>
           </a>
@@ -141,11 +141,11 @@ title: Components &middot; Ratchet
 
 {% highlight html %}
 <header class="bar bar-nav">
-  <a class="btn btn-link pull-left">
+  <a class="btn btn-link btn-nav pull-left">
     <span class="icon icon-left-nav"></span>
     Left
   </a>
-  <a class="btn btn-link pull-right">
+  <a class="btn btn-link btn-nav pull-right">
     Right
     <span class="icon icon-right-nav"></span>
   </a>
diff --git a/docs/dist/android-theme.css b/docs/dist/android-theme.css
index 7a43669..f862805 100644
--- a/docs/dist/android-theme.css
+++ b/docs/dist/android-theme.css
@@ -197,12 +197,13 @@ a:active {
 }
 
 .bar .btn {
+  margin-top: 7px;
   padding-top: 9px;
   padding-bottom: 9px;
 }
 .bar .btn-link {
-  padding-top: 0;
-  padding-bottom: 0;
+  margin-top: 0;
+  padding: 0;
   color: #33b5e5;
   font-size: 18px;
   line-height: 49px;
@@ -210,27 +211,7 @@ a:active {
 .bar .btn-link:active, .bar .btn-link.active {
   color: #1a9bcb;
 }
-.bar .btn-link.pull-left {
-  padding-left: 12px;
-  padding-right: 0;
-}
-.bar .btn-link.pull-right {
-  padding-left: 0;
-  padding-right: 12px;
-}
-
-.bar-nav .btn {
-  margin-top: 7px;
-}
-.bar-nav .btn-link {
-  margin-top: 0;
-  color: #33b5e5;
-}
-.bar-nav .btn-link:active {
-  color: #33b5e5;
-  opacity: .6;
-}
-.bar-nav .btn-link .icon {
+.bar .btn-link .icon {
   top: 2px;
   padding: 0;
 }
diff --git a/docs/dist/ratchet.css b/docs/dist/ratchet.css
index 2f1df19..b06f205 100644
--- a/docs/dist/ratchet.css
+++ b/docs/dist/ratchet.css
@@ -552,50 +552,31 @@ input[type="button"] {
   font-size: 11px;
 }
 
-.bar-nav .btn {
+.bar .btn {
   position: relative;
   z-index: 20;
   padding: 6px 12px;
   margin-top: 8px;
   font-weight: 400;
 }
-.bar-nav .btn.pull-right {
+.bar .btn.pull-right {
   margin-left: 10px;
 }
-.bar-nav .btn.pull-left {
+.bar .btn.pull-left {
   margin-right: 10px;
 }
 
-.bar-nav .btn-link {
+.bar .btn-link {
   margin-top: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding: 0;
   font-size: 16px;
   color: #428bca;
   line-height: 44px;
   border: 0;
 }
-.bar-nav .btn-link:active, .bar-nav .btn-link.active {
+.bar .btn-link:active, .bar .btn-link.active {
   color: #3071a9;
 }
-.bar-nav .btn-link .icon {
-  top: 2px;
-  padding: 0;
-}
-.bar-nav .btn-link.pull-left {
-  margin-left: -10px;
-}
-.bar-nav .btn-link.pull-left .icon {
-  margin-right: -5px;
-  margin-left: -7px;
-}
-.bar-nav .btn-link.pull-right {
-  margin-right: -10px;
-}
-.bar-nav .btn-link.pull-right .icon {
-  margin-right: -7px;
-  margin-left: -5px;
-}
 
 .bar .btn-block {
   padding: 7px 0 6px;
@@ -604,31 +585,28 @@ input[type="button"] {
   font-size: 16px;
 }
 
-.bar input[type="search"] {
-  height: 29px;
-  margin: 6px 0;
+.bar .btn-nav.pull-left {
+  margin-left: -5px;
 }
-
-.bar .segmented-control {
-  top: 8px;
-  margin: 0 auto;
+.bar .btn-nav.pull-left .icon-left-nav {
+  margin-right: -3px;
+}
+.bar .btn-nav.pull-right {
+  margin-right: -5px;
+}
+.bar .btn-nav.pull-right .icon-right-nav {
+  margin-left: -3px;
 }
 
 .bar .icon {
   position: relative;
-  padding: 10px 13px;
+  padding: 10px 0;
   z-index: 20;
   font-size: 24px;
 }
-.bar > .icon {
-  padding-right: 5px;
-  padding-left: 5px;
-}
-.bar > .icon.pull-left {
-  margin-left: -10px;
-}
-.bar > .icon.pull-right {
-  margin-right: -10px;
+.bar .btn .icon {
+  top: 2px;
+  padding: 0;
 }
 .bar .title .icon {
   padding: 0;
@@ -638,6 +616,16 @@ input[type="button"] {
   margin-left: -5px;
 }
 
+.bar input[type="search"] {
+  height: 29px;
+  margin: 6px 0;
+}
+
+.bar .segmented-control {
+  top: 8px;
+  margin: 0 auto;
+}
+
 .badge {
   display: inline-block;
   padding: 2px 9px;
diff --git a/sass/bars.scss b/sass/bars.scss
index db1d58e..52576ae 100644
--- a/sass/bars.scss
+++ b/sass/bars.scss
@@ -120,10 +120,10 @@
 }
 
 
-// Nav bars with buttons
+// Bars with buttons
 // --------------------------------------------------
 
-.bar-nav .btn {
+.bar .btn {
   position: relative;
   z-index: 20; // Position the buttons on top of .title
   padding: 6px 12px;
@@ -138,11 +138,10 @@
   }
 }
 
-// Nav bars with link buttons (Line the text up with content)
-.bar-nav .btn-link {
+// Bars with link buttons (Line the text up with content)
+.bar .btn-link {
   margin-top: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding: 0;
   font-size: 16px;
   color: $primary-color;
   line-height: $bar-base-height;
@@ -152,34 +151,9 @@
   &.active {
     color: darken($primary-color, 10%);
   }
-
-  // Make sure link buttons w/ icons line up with the content correctly
-  .icon {
-    top: 2px;
-    padding: 0;
-  }
-  &.pull-left {
-    margin-left: -10px;
-
-    .icon {
-      margin-right: -5px;
-      margin-left: -7px;
-    }
-  }
-  &.pull-right {
-    margin-right: -10px;
-
-    .icon {
-      margin-right: -7px;
-      margin-left: -5px;
-    }
-  }
 }
 
-
 // Bars with block buttons
-// --------------------------------------------------
-
 // Add proper padding
 .bar .btn-block {
   padding: 7px 0 6px;
@@ -188,24 +162,24 @@
   font-size: 16px; // Scale down font size to fit in bar.
 }
 
+// Nav buttons (Only applicable within bars)
+//
+// Buttons inside bar that sit closer against the viewport.
+.bar .btn-nav {
+  &.pull-left {
+    margin-left: -5px;
 
-// Bars for search forms
-// --------------------------------------------------
-
-// Position/size search bar within the bar
-.bar input[type="search"] {
-  height: 29px;
-  margin: 6px 0;
-}
-
-
-// Bars with segmented controls
-// --------------------------------------------------
+    .icon-left-nav {
+      margin-right: -3px;
+    }
+  }
+  &.pull-right {
+    margin-right: -5px;
 
-// Remove standard segmented bottom margin
-.bar .segmented-control {
-  top: 8px;
-  margin: 0 auto;
+    .icon-right-nav {
+      margin-left: -3px;
+    }
+  }
 }
 
 
@@ -215,22 +189,17 @@
 .bar {
   .icon {
     position: relative;
-    padding: 10px 13px;
+    padding: 10px 0;
     z-index: 20; // Position the buttons on top of .title
     font-size: 24px;
   }
-  > .icon {
-    padding-right: 5px;
-    padding-left: 5px;
 
-    // Offset the bar's side padding
-    &.pull-left {
-      margin-left: -10px;
-    }
-    &.pull-right {
-      margin-right: -10px;
-    }
+  // Handle the larger icons in btns.
+  .btn .icon {
+    top: 2px;
+    padding: 0;
   }
+  
   // Handle carets in the titles
   .title .icon {
     padding: 0;
@@ -241,3 +210,23 @@
     }
   }
 }
+
+
+// Bars for search forms
+// --------------------------------------------------
+
+// Position/size search bar within the bar
+.bar input[type="search"] {
+  height: 29px;
+  margin: 6px 0;
+}
+
+
+// Bars with segmented controls
+// --------------------------------------------------
+
+// Remove standard segmented bottom margin
+.bar .segmented-control {
+  top: 8px;
+  margin: 0 auto;
+}
diff --git a/sass/theme-android.scss b/sass/theme-android.scss
index 0302253..a336e8c 100644
--- a/sass/theme-android.scss
+++ b/sass/theme-android.scss
@@ -287,12 +287,13 @@ a {
 // Bars with buttons
 .bar {
   .btn {
+    margin-top: 7px;
     padding-top: 9px;
     padding-bottom: 9px;
   }
   .btn-link {
-    padding-top: 0;
-    padding-bottom: 0;
+    margin-top: 0;
+    padding: 0;
     color: $primary-color;
     font-size: $font-size-default;
     line-height: 49px;
@@ -302,32 +303,6 @@ a {
       color: darken($primary-color, 10%);
     }
 
-    // Offset the bar's side padding
-    &.pull-left {
-      padding-left: 12px;
-      padding-right: 0;
-    }
-    &.pull-right {
-      padding-left: 0;
-      padding-right: 12px;
-    }
-  }
-}
-
-// Nav bars with buttons
-.bar-nav {
-  .btn {
-    margin-top: 7px;
-  }
-  .btn-link {
-    margin-top: 0;
-    color: $primary-color;
-
-    &:active {
-      color: $primary-color;
-      opacity: .6;
-    }
-
     // Make sure link buttons w/ icons line up with the content correctly
     .icon {
       top: 2px;
@@ -349,6 +324,7 @@ a {
     padding-top: 13px;
     padding-bottom: 13px;
   }
+
   // Handle carets in the titles
   .title .icon {
     padding: 0;