From 06086ee9ae2e0bfd02e5ed88ce086ae94ceadd70 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 5 Aug 2014 10:23:23 -0500
Subject: [PATCH] fix(header): buttons do not align in Android 4.4

Closes #1614
---
 scss/_bar.scss        |   4 ++
 test/css/headers.html | 102 ++++++++++--------------------------------
 2 files changed, 27 insertions(+), 79 deletions(-)

diff --git a/scss/_bar.scss b/scss/_bar.scss
index 9fc2370205f..7177c7f8711 100644
--- a/scss/_bar.scss
+++ b/scss/_bar.scss
@@ -237,6 +237,10 @@
   .buttons.right-buttons {
     display: inherit;
   }
+  .buttons span {
+    display: inline-flex;
+  }
+
   // Place the last button in a bar on the right of the bar
   .title + .button:last-child,
   > .button + .button:last-child,
diff --git a/test/css/headers.html b/test/css/headers.html
index 5395b8c6c40..e6f69004101 100644
--- a/test/css/headers.html
+++ b/test/css/headers.html
@@ -35,10 +35,10 @@ <h1 class="title">Really really really really really really really really long t
         </a>
       </div>
 
-      <header class="bar bar-header bar-positive">
+      <header class="bar bar-header bar-light">
         <a class="button icon ion-navicon"> Home</a>
         <div class="button-bar">
-          <a class="button button-calm">First</a>
+          <a class="button button-positive">First</a>
           <a class="button">Second</a>
           <a class="button">Third</a>
         </div>
@@ -47,22 +47,10 @@ <h1 class="title">Really really really really really really really really long t
         </a>
       </header>
 
-      <header class="bar bar-header bar-royal">
-        <a class="button button-clear icon ion-ios7-alarm"> Back</a>
-        <div class="button-bar">
-          <a class="button button-calm">First</a>
-          <a class="button">Second</a>
-          <a class="button">Third</a>
-        </div>
-        <a class="button">
-          <i class="icon ion-star"></i> Favorites
-        </a>
-      </header>
-
-      <header class="bar bar-header bar-positive">
+      <header class="bar bar-header bar-stable">
         <a class="button button-clear icon ion-ios7-arrow-back"> Back</a>
         <div class="button-bar">
-          <a class="button button-calm">First</a>
+          <a class="button button-dark">First</a>
           <a class="button">Second</a>
           <a class="button">Third</a>
         </div>
@@ -71,7 +59,7 @@ <h1 class="title">Really really really really really really really really long t
         </a>
       </header>
 
-      <div class="bar bar-header bar-calm">
+      <div class="bar bar-header bar-positive">
         <a class="button button-icon icon ion-home"></a>
         <div class="button-bar">
           <a href="#" class="button button-clear">Edit</a>
@@ -83,30 +71,6 @@ <h1 class="title">Really really really really really really really really long t
         </a>
       </div>
 
-      <header class="bar bar-dark">
-        <a class="button icon ion-home"></a>
-        <div class="button-bar">
-          <a class="button">First</a>
-          <a class="button">Second</a>
-          <a class="button">Third</a>
-        </div>
-        <a class="button">
-          <i class="icon ion-star"></i>
-        </a>
-      </header>
-
-      <header class="bar bar-positive">
-        <a class="button icon ion-home"></a>
-        <div class="button-bar">
-          <a class="button">First</a>
-          <a class="button">Second</a>
-          <a class="button">Third</a>
-        </div>
-        <a class="button">
-          <i class="icon ion-star"></i>
-        </a>
-      </header>
-
       <header class="bar bar-calm">
         <a class="button icon ion-home"></a>
         <div class="button-bar">
@@ -132,42 +96,6 @@ <h1 class="title">Really really really really really really really really long t
       </header>
 
       <header class="bar bar-balanced">
-        <a class="button icon ion-home"></a>
-        <div class="button-bar">
-          <a class="button">First</a>
-          <a class="button">Second</a>
-          <a class="button">Third</a>
-        </div>
-        <a class="button">
-          <i class="icon ion-star"></i>
-        </a>
-      </header>
-
-      <header class="bar bar-energized">
-        <a class="button icon ion-home"></a>
-        <div class="button-bar">
-          <a class="button">First</a>
-          <a class="button">Second</a>
-          <a class="button">Third</a>
-        </div>
-        <a class="button">
-          <i class="icon ion-star"></i>
-        </a>
-      </header>
-
-      <header class="bar bar-royal">
-        <a class="button icon ion-home"></a>
-        <div class="button-bar">
-          <a class="button">First</a>
-          <a class="button">Second</a>
-          <a class="button">Third</a>
-        </div>
-        <a class="button">
-          <i class="icon ion-star"></i>
-        </a>
-      </header>
-
-      <header class="bar bar-light">
         <a class="button icon ion-arrow-left-c"></a>
         <div class="button-bar">
           <a class="button">First</a>
@@ -179,7 +107,7 @@ <h1 class="title">Really really really really really really really really long t
         </a>
       </header>
 
-      <header class="bar bar-assertive">
+      <header class="bar bar-energized">
         <a class="button button-icon icon ion-arrow-left-c"></a>
         <div class="button-bar">
           <a class="button">First</a>
@@ -191,11 +119,27 @@ <h1 class="title">Really really really really really really really really long t
         </a>
       </header>
 
-      <header class="bar bar-header bar-stable">
+      <header class="bar bar-header bar-royal">
         <button class="button button-clear button-icon ion-ios7-arrow-back"> Back</button>
         <h1 class="title">Title here</h1>
       </header>
 
+      <header class="bar bar-header bar-dark nav-bar nav-title-slide-ios7">
+        <div class="buttons left-buttons">
+          <span>
+            <button class="button button-icon ion-ios7-world-outline"></button>
+            <button class="button button-icon ion-ios7-world-outline"></button>
+          </span>
+        </div>
+        <h1 class="title">Two Buttons</h1>
+        <div class="buttons right-buttons">
+          <span>
+            <button class="button button-icon ion-ios7-world-outline"></button>
+            <button class="button button-icon ion-ios7-world-outline"></button>
+          </span>
+        </div>
+      </header>
+
     </ion-content>
 
   </body>