From 459ce9e603eb62dc664a0ed68c9c7a29c80aee3a Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sat, 8 Feb 2014 16:59:51 -0800
Subject: [PATCH] icons in bars

---
 components.html             | 38 +++++++++++++++++++++++++++++++++----
 dist/android-theme.css      | 12 ++++++++++++
 dist/ios-theme.css          |  8 --------
 dist/ratchet.css            | 14 ++++++++++++++
 docs-assets/css/docs.css    | 19 +++++++++++--------
 lib/sass/buttons.scss       | 10 ++++++++++
 lib/sass/ratchicons.scss    | 13 +++++++++----
 lib/sass/theme-android.scss | 14 ++++++++++++++
 lib/sass/theme-ios.scss     | 10 +---------
 9 files changed, 105 insertions(+), 33 deletions(-)

diff --git a/components.html b/components.html
index e46426a..9736115 100644
--- a/components.html
+++ b/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 %}
diff --git a/dist/android-theme.css b/dist/android-theme.css
index c5b9429..30e9574 100644
--- a/dist/android-theme.css
+++ b/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;
+}
diff --git a/dist/ios-theme.css b/dist/ios-theme.css
index 23b5c7d..afea7c7 100644
--- a/dist/ios-theme.css
+++ b/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;
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 039f4c7..3c81e0f 100644
--- a/dist/ratchet.css
+++ b/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;
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index 0b6fc8d..615c195 100644
--- a/docs-assets/css/docs.css
+++ b/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");
diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss
index bca59b4..2a5c91c 100644
--- a/lib/sass/buttons.scss
+++ b/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;
+    }
   }
 }
 
diff --git a/lib/sass/ratchicons.scss b/lib/sass/ratchicons.scss
index ae50d8a..eb0aa13 100644
--- a/lib/sass/ratchicons.scss
+++ b/lib/sass/ratchicons.scss
@@ -49,10 +49,15 @@
 }
 
 // Ratchicons in nav bars
-.bar {
-  .icon {
-    font-size: 24px;
-    margin-top: 11px;
+.bar .icon {
+  font-size: 24px;
+  margin-top: 11px;
+
+  &.pull-left {
+    margin-left: -3px;
+  }
+  &.pull-right {
+    margin-right: -3px;
   }
 }
 
diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss
index 8a08b5b..0fbe4a3 100644
--- a/lib/sass/theme-android.scss
+++ b/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;
+}
diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss
index ec30727..1cd7920 100644
--- a/lib/sass/theme-ios.scss
+++ b/lib/sass/theme-ios.scss
@@ -288,15 +288,7 @@ textarea,
   // Link buttons in nav bars
   .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;