icons in bars

components.html

@@ -100,15 +100,42 @@ base_url: "../"
 {% endhighlight %}
 
     </article>
+
+    <article class="component">
+      <h3 class="component-title">Title bar with icons</h3>
+
+      <div class="component-example component-example-fullbleed">
+        <header class="bar bar-nav">
+          <span class="icon icon-lg-left pull-left"></span>
+          <a class="icon icon-refresh pull-right"></a>
+          <h1 class="title">Title</h1>
+        </header>
+      </div>
+
+{% highlight html %}
+<header class="bar bar-nav">
+  <a class="icon icon-lg-left pull-left"></a>
+  <a class="icon icon-refresh pull-right"></a>
+  <h1 class="title">Title</h1>
+</header>
+{% endhighlight %}
+
+    </article>
+
     <article class="component">
       <h3 class="component-title">Title bar with link buttons and icons</h3>
+      <p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions.</p>
 
       <div class="component-example component-example-fullbleed">
         <header class="bar bar-nav">
           <a class="btn btn-link pull-left">
-            Previous
+            <span class="icon icon-lg-left"></span>
+            Left
+          </a>
+          <a class="btn btn-link pull-right">
+            <span class="icon icon-lg-right"></span>
+            Right
           </a>
-          <a class="icon icon-refresh pull-right"></a>
           <h1 class="title">Title</h1>
         </header>
       </div>
@@ -117,9 +144,12 @@ base_url: "../"
 <header class="bar bar-nav">
   <a class="btn btn-link pull-left">
     <span class="icon icon-lg-left"></span>
-    Previous
+    Left
+  </a>
+  <a class="btn btn-link pull-right">
+    Right
+    <span class="icon icon-lg-right"></span>
   </a>
-  <a class="icon icon-refresh pull-right"></a>
   <h1 class="title">Title</h1>
 </header>
 {% endhighlight %}

dist/android-theme.css

@@ -52,6 +52,7 @@ body {
 .title {
   position: static;
   padding-left: 15px;
+  font-size: 18px;
   line-height: 50px;
   text-align: left;
 }
@@ -74,6 +75,12 @@ body {
 .table-view .table-view-cell:last-child {
   background-image: none;
 }
+.table-view .table-view-cell > a:not(.btn):active {
+  background-color: #33b5e5;
+}
+.table-view .table-view-cell > a:not(.btn):active .icon {
+  color: #fff;
+}
 .table-view .table-view-divider {
   padding-top: 25px;
   font-size: 12px;
@@ -166,6 +173,7 @@ textarea,
 .bar .btn-link {
   padding: 0;
   color: #33b5e5;
+  font-size: 18px;
   line-height: 50px;
 }
 .bar .btn-link:active, .bar .btn-link.active {
@@ -375,3 +383,7 @@ textarea,
   color: #fff;
   content: "On";
 }
+
+.bar .icon {
+  margin-top: 13px;
+}

dist/ios-theme.css

@@ -215,14 +215,6 @@ textarea,
 .bar-nav .btn-link {
   color: #007aff;
 }
-.bar-nav .btn-link.pull-right .icon {
-  margin-right: -8px;
-  margin-left: -3px;
-}
-.bar-nav .btn-link.pull-left .icon {
-  margin-right: -3px;
-  margin-left: -8px;
-}
 .bar-nav .btn-link:active {
   color: #007aff;
   opacity: .6;

dist/ratchet.css

@@ -767,9 +767,17 @@ input[type="button"] {
 .bar-nav .btn-link.pull-left {
   margin-left: 5px;
 }
+.bar-nav .btn-link.pull-left .icon {
+  margin-right: -3px;
+  margin-left: -8px;
+}
 .bar-nav .btn-link.pull-right {
   margin-right: 5px;
 }
+.bar-nav .btn-link.pull-right .icon {
+  margin-right: -8px;
+  margin-left: -3px;
+}
 
 .table-view .btn {
   margin-top: -1px;
@@ -1240,6 +1248,12 @@ input[type="button"] {
   font-size: 24px;
   margin-top: 11px;
 }
+.bar .icon.pull-left {
+  margin-left: -3px;
+}
+.bar .icon.pull-right {
+  margin-right: -3px;
+}
 
 .table-view .icon {
   margin-top: 3px;

docs-assets/css/docs.css

@@ -980,14 +980,6 @@ hr {
 .platform-ios .bar-nav .btn-link {
   color: #007aff;
 }
-.platform-ios .bar-nav .btn-link.pull-right .icon {
-  margin-right: -8px;
-  margin-left: -3px;
-}
-.platform-ios .bar-nav .btn-link.pull-left .icon {
-  margin-right: -3px;
-  margin-left: -8px;
-}
 .platform-ios .bar-nav .btn-link:active {
   color: #007aff;
   opacity: .6;
@@ -1231,6 +1223,7 @@ hr {
 .platform-android .title {
   position: static;
   padding-left: 15px;
+  font-size: 18px;
   line-height: 50px;
   text-align: left;
 }
@@ -1250,6 +1243,12 @@ hr {
 .platform-android .table-view .table-view-cell:last-child {
   background-image: none;
 }
+.platform-android .table-view .table-view-cell > a:not(.btn):active {
+  background-color: #33b5e5;
+}
+.platform-android .table-view .table-view-cell > a:not(.btn):active .icon {
+  color: #fff;
+}
 .platform-android .table-view .table-view-divider {
   padding-top: 25px;
   font-size: 12px;
@@ -1331,6 +1330,7 @@ hr {
 .platform-android .bar .btn-link {
   padding: 0;
   color: #33b5e5;
+  font-size: 18px;
   line-height: 50px;
 }
 .platform-android .bar .btn-link:active, .platform-android .bar .btn-link.active {
@@ -1526,6 +1526,9 @@ hr {
   color: #fff;
   content: "On";
 }
+.platform-android .bar .icon {
+  margin-top: 13px;
+}
 .platform-android .device {
   font-family: 'Roboto', sans-serif;
   background-image: url("../img/android.png");

lib/sass/buttons.scss

@@ -187,9 +187,19 @@ input[type="button"] {
 .bar-nav .btn-link {
   &.pull-left {
     margin-left: 5px;
+
+    .icon {
+      margin-right: -3px;
+      margin-left: -8px;
+    }
   }
   &.pull-right {
     margin-right: 5px;
+
+    .icon {
+      margin-right: -8px;
+      margin-left: -3px;
+    }
   }
 }
 

lib/sass/ratchicons.scss

@@ -49,10 +49,15 @@
 }
 
 // Ratchicons in nav bars
-.bar {
-  .icon {
+.bar .icon {
   font-size: 24px;
   margin-top: 11px;
+
+  &.pull-left {
+    margin-left: -3px;
+  }
+  &.pull-right {
+    margin-right: -3px;
   }
 }
 

lib/sass/theme-android.scss

@@ -89,6 +89,7 @@ body {
 .title {
   position: static;
   padding-left: 15px;
+  font-size: $font-size-default;
   line-height: $bar-base-height;
   text-align: left;
 }
@@ -124,6 +125,13 @@ body {
     &:last-child {
       background-image: none;
     }
+    > a:not(.btn):active {
+      background-color: $primary-color;
+
+      .icon {
+        color: #fff;
+      }
+    }
   }
 
   // Table view dividers
@@ -236,6 +244,7 @@ textarea,
   .btn-link {
     padding: 0;
     color: $primary-color;
+    font-size: $font-size-default;
     line-height: $bar-base-height;
 
     &:active,
@@ -522,3 +531,8 @@ textarea,
     }
   }
 }
+
+// Ratchicons in nav bars
+.bar .icon {
+  margin-top: 13px;
+}

lib/sass/theme-ios.scss

@@ -289,14 +289,6 @@ textarea,
   .btn-link {
     color: $primary-color;
     
-    &.pull-right .icon{
-      margin-right: -8px;
-      margin-left: -3px;
-    }
-    &.pull-left .icon {
-      margin-right: -3px;
-      margin-left: -8px;
-    }
     &:active {
       color: $primary-color;
       opacity: .6;