make icons easier to tap

dist/android-theme.css

@@ -183,6 +183,10 @@ a:active {
   color: #929292;
   background-color: #78c6e3;
 }
+.bar-tab .tab-item .icon {
+  top: 3px;
+  padding: 0;
+}
 
 .title {
   position: static;
@@ -222,11 +226,13 @@ a:active {
   top: 7px;
 }
 
-.bar > .icon {
+.bar .icon {
-  top: 13px;
+  padding-top: 13px;
+  padding-bottom: 13px;
 }
 .bar .title .icon-caret {
   top: 10px;
+  padding: 0;
   color: #777;
 }
 

dist/ratchet.css

@@ -541,8 +541,10 @@ input[type="button"] {
   color: #428bca;
 }
 .bar-tab .tab-item .icon {
+  top: 2px;
   width: 24px;
   height: 24px;
+  padding: 0;
 }
 .bar-tab .tab-item .icon ~ .tab-label {
   display: block;
@@ -576,23 +578,24 @@ input[type="button"] {
 .bar-nav .btn-link:active, .bar-nav .btn-link.active {
   color: #3071a9;
 }
+.bar-nav .btn-link .icon {
+  padding-right: 0;
+  padding-left: 0;
+}
 .bar-nav .btn-link.pull-left {
   margin-left: 5px;
 }
 .bar-nav .btn-link.pull-left .icon {
   margin-right: -3px;
-  margin-left: -8px;
+  margin-left: -10px;
 }
 .bar-nav .btn-link.pull-right {
   margin-right: 5px;
 }
 .bar-nav .btn-link.pull-right .icon {
-  margin-right: -8px;
+  margin-right: -10px;
   margin-left: -3px;
 }
-.bar-nav .btn-link .icon {
-  top: 2px;
-}
 
 .bar .btn-block {
   padding: 7px 0 6px;
@@ -613,21 +616,23 @@ input[type="button"] {
 
 .bar .icon {
   position: relative;
-  top: 2px;
+  padding: 10px;
   z-index: 20;
   font-size: 24px;
 }
-.bar .icon.pull-left {
+.bar > .icon {
-  margin-left: -3px;
+  padding-right: 5px;
+  padding-left: 5px;
 }
-.bar .icon.pull-right {
+.bar > .icon.pull-left {
-  margin-right: -3px;
+  margin-left: -10px;
 }
-.bar > .icon {
+.bar > .icon.pull-right {
-  top: 10px;
+  margin-right: -10px;
 }
 .bar .title .icon-caret {
   top: 4px;
+  padding: 0;
   margin-left: -5px;
 }
 

docs-assets/css/docs.css

@@ -1362,6 +1362,10 @@ hr {
   color: #929292;
   background-color: #78c6e3;
 }
+.platform-android .bar-tab .tab-item .icon {
+  top: 3px;
+  padding: 0;
+}
 .platform-android .title {
   position: static;
   padding-left: 15px;
@@ -1396,11 +1400,13 @@ hr {
 .platform-android .bar .segmented-control {
   top: 7px;
 }
-.platform-android .bar > .icon {
+.platform-android .bar .icon {
-  top: 13px;
+  padding-top: 13px;
+  padding-bottom: 13px;
 }
 .platform-android .bar .title .icon-caret {
   top: 10px;
+  padding: 0;
   color: #777;
 }
 .platform-android .bar input[type="search"] {

lib/sass/bars.scss

@@ -104,8 +104,10 @@
 
     // Tab icon
     .icon {
+      top: 2px;
       width: 24px;
       height: 24px;
+      padding: 0;
 
       // Make the label smaller if it's used with an icon
       ~ .tab-label {
@@ -150,27 +152,28 @@
   &.active {
     color: darken($primary-color, 10%);
   }
-  // Make sure link buttons line up with the content correctly
+
+  // Make sure link buttons w/ icons line up with the content correctly
+  .icon {
+    padding-right: 0;
+    padding-left: 0;
+  }
   &.pull-left {
     margin-left: 5px;
 
     .icon {
       margin-right: -3px;
-      margin-left: -8px;
+      margin-left: -10px;
     }
   }
   &.pull-right {
     margin-right: 5px;
 
     .icon {
-      margin-right: -8px;
+      margin-right: -10px;
       margin-left: -3px;
     }
   }
-  // Position icons in link buttons correctly.
-  .icon {
-    top: 2px;
-  }
 }
 
 
@@ -212,23 +215,26 @@
 .bar {
   .icon {
     position: relative;
-    top: 2px;
+    padding: 10px;
     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: -3px;
+      margin-left: -10px;
     }
     &.pull-right {
-      margin-right: -3px;
+      margin-right: -10px;
-    }
     }
-  > .icon {
-    top: 10px;
   }
   // Handle carets in the titles
   .title .icon-caret {
     top: 4px;
+    padding: 0;
     margin-left: -5px;
   }
 }

lib/sass/theme-android.scss

@@ -268,6 +268,10 @@ a {
       color: #929292;
       background-color: #78c6e3;
     }
+    .icon {
+      top: 3px;
+      padding: 0;
+    }
   }
 }
 
@@ -324,12 +328,14 @@ a {
 
 // Bars with Ratchicons
 .bar {
-  > .icon {
+  .icon {
-    top: 13px;
+    padding-top: 13px;
+    padding-bottom: 13px;
   }
   // Handle carets in the titles
   .title .icon-caret {
     top: 10px;
+    padding: 0;
     color: #777;
   }
 }