From d4216b038653dee2c371348f09c1c106c29dd22d Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sat, 15 Feb 2014 18:13:32 -0800
Subject: [PATCH] make btn links easier to tap

---
 dist/android-theme.css      | 10 ++++++++--
 dist/ratchet.css            | 34 ++++++++++++++++++----------------
 docs-assets/css/docs.css    | 10 ++++++++--
 lib/sass/bars.scss          | 37 ++++++++++++++++++++-----------------
 lib/sass/theme-android.scss | 15 ++++++++++++---
 5 files changed, 66 insertions(+), 40 deletions(-)

diff --git a/dist/android-theme.css b/dist/android-theme.css
index 9281b77..012e404 100644
--- a/dist/android-theme.css
+++ b/dist/android-theme.css
@@ -221,6 +221,10 @@ a:active {
   color: #33b5e5;
   opacity: .6;
 }
+.bar-nav .btn-link .icon {
+  top: 2px;
+  padding: 0;
+}
 
 .bar .segmented-control {
   top: 7px;
@@ -230,9 +234,11 @@ a:active {
   padding-top: 13px;
   padding-bottom: 13px;
 }
-.bar .title .icon-caret {
-  top: 10px;
+.bar .title .icon {
   padding: 0;
+}
+.bar .title .icon.icon-caret {
+  top: 10px;
   color: #777;
 }
 
diff --git a/dist/ratchet.css b/dist/ratchet.css
index e2ae5d8..f944f58 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -567,34 +567,34 @@ input[type="button"] {
 }
 
 .bar-nav .btn-link {
-  padding: 0;
   margin-top: 0;
+  padding-top: 0;
+  padding-bottom: 0;
   font-size: 16px;
   color: #428bca;
   line-height: 44px;
-  border: none;
-  background-color: transparent;
+  border: 0;
 }
 .bar-nav .btn-link:active, .bar-nav .btn-link.active {
   color: #3071a9;
 }
 .bar-nav .btn-link .icon {
-  padding-right: 0;
-  padding-left: 0;
+  top: 2px;
+  padding: 0;
 }
 .bar-nav .btn-link.pull-left {
-  margin-left: 5px;
+  margin-left: -10px;
 }
 .bar-nav .btn-link.pull-left .icon {
-  margin-right: -3px;
-  margin-left: -10px;
+  margin-right: -4px;
+  margin-left: -4px;
 }
 .bar-nav .btn-link.pull-right {
-  margin-right: 5px;
+  margin-right: -10px;
 }
 .bar-nav .btn-link.pull-right .icon {
-  margin-right: -10px;
-  margin-left: -3px;
+  margin-right: -4px;
+  margin-left: -4px;
 }
 
 .bar .btn-block {
@@ -616,13 +616,13 @@ input[type="button"] {
 
 .bar .icon {
   position: relative;
-  padding: 10px;
+  padding: 10px 13px;
   z-index: 20;
   font-size: 24px;
 }
 .bar > .icon {
-  padding-right: 5px;
-  padding-left: 5px;
+  padding-right: 8px;
+  padding-left: 8px;
 }
 .bar > .icon.pull-left {
   margin-left: -10px;
@@ -630,9 +630,11 @@ input[type="button"] {
 .bar > .icon.pull-right {
   margin-right: -10px;
 }
-.bar .title .icon-caret {
-  top: 4px;
+.bar .title .icon {
   padding: 0;
+}
+.bar .title .icon.icon-caret {
+  top: 4px;
   margin-left: -5px;
 }
 
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index 30e5947..1898d8b 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -1397,6 +1397,10 @@ hr {
   color: #33b5e5;
   opacity: .6;
 }
+.platform-android .bar-nav .btn-link .icon {
+  top: 2px;
+  padding: 0;
+}
 .platform-android .bar .segmented-control {
   top: 7px;
 }
@@ -1404,9 +1408,11 @@ hr {
   padding-top: 13px;
   padding-bottom: 13px;
 }
-.platform-android .bar .title .icon-caret {
-  top: 10px;
+.platform-android .bar .title .icon {
   padding: 0;
+}
+.platform-android .bar .title .icon.icon-caret {
+  top: 10px;
   color: #777;
 }
 .platform-android .bar input[type="search"] {
diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss
index 3f3832e..861fd5b 100644
--- a/lib/sass/bars.scss
+++ b/lib/sass/bars.scss
@@ -140,13 +140,13 @@
 
 // Nav bars with link buttons (Line the text up with content)
 .bar-nav .btn-link {
-  padding: 0;
   margin-top: 0;
+  padding-top: 0;
+  padding-bottom: 0;
   font-size: 16px;
   color: $primary-color;
   line-height: $bar-base-height;
-  border: none;
-  background-color: transparent;
+  border: 0;
 
   &:active,
   &.active {
@@ -155,23 +155,23 @@
 
   // Make sure link buttons w/ icons line up with the content correctly
   .icon {
-    padding-right: 0;
-    padding-left: 0;
+    top: 2px;
+    padding: 0;
   }
   &.pull-left {
-    margin-left: 5px;
+    margin-left: -10px;
 
     .icon {
-      margin-right: -3px;
-      margin-left: -10px;
+      margin-right: -4px;
+      margin-left: -4px;
     }
   }
   &.pull-right {
-    margin-right: 5px;
+    margin-right: -10px;
 
     .icon {
-      margin-right: -10px;
-      margin-left: -3px;
+      margin-right: -4px;
+      margin-left: -4px;
     }
   }
 }
@@ -215,13 +215,13 @@
 .bar {
   .icon {
     position: relative;
-    padding: 10px;
+    padding: 10px 13px;
     z-index: 20; // Position the buttons on top of .title
     font-size: 24px;
   }
   > .icon {
-    padding-right: 5px;
-    padding-left: 5px;
+    padding-right: 8px;
+    padding-left: 8px;
 
     // Offset the bar's side padding
     &.pull-left {
@@ -232,9 +232,12 @@
     }
   }
   // Handle carets in the titles
-  .title .icon-caret {
-    top: 4px;
+  .title .icon {
     padding: 0;
-    margin-left: -5px;
+
+    &.icon-caret {
+      top: 4px;
+      margin-left: -5px;
+    }
   }
 }
diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss
index 8583baf..72fbbdf 100644
--- a/lib/sass/theme-android.scss
+++ b/lib/sass/theme-android.scss
@@ -316,6 +316,12 @@ a {
       color: $primary-color;
       opacity: .6;
     }
+
+    // Make sure link buttons w/ icons line up with the content correctly
+    .icon {
+      top: 2px;
+      padding: 0;
+    }
   }
 }
 
@@ -333,10 +339,13 @@ a {
     padding-bottom: 13px;
   }
   // Handle carets in the titles
-  .title .icon-caret {
-    top: 10px;
+  .title .icon {
     padding: 0;
-    color: #777;
+
+    &.icon-caret {
+      top: 10px;
+      color: #777;
+    }
   }
 }