conflict fix

Conflicts:
	dist/ionic.css
	scss/ionic/_structure-variables.scss

dist/ionic.css

@@ -435,29 +435,22 @@ a {
   -webkit-user-select: none;
   -moz-user-select: -moz-none;
   user-select: none;
+  display: -webkit-box;
+  display: box;
   position: fixed;
   left: 0;
   right: 0;
   z-index: 10;
   width: 100%;
   height: 44px;
-  padding: 8px;
-  box-sizing: border-box;
-  /*
-  .title + .button:last-child,
-  .button + .button:last-child,
-  .button.pull-right {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-  }
-  */ }
+  padding: 5px;
+  box-sizing: border-box; }
   .bar .title {
     position: absolute;
     z-index: 0;
-    width: 100%;
     top: 0;
     left: 0;
+    right: 0;
     line-height: 44px;
     margin: 0;
     min-width: 30px;
@@ -467,23 +460,22 @@ a {
     font-size: 18px; }
   .bar .title a {
     color: inherit; }
-
-.buttons {
+  .bar .button {
+    box-flex: 1;
+    -webkit-box-flex: 0;
+    -moz-box-flex: 0;
+    line-height: 23px;
+    font-size: 12px; }
+  .bar .button-bar {
+    line-height: 18px; }
+  .bar .button-bar + .button, .bar .button + .button-bar {
+    margin-left: 5px; }
+  .bar .title + .button:last-child,
+  .bar > .button + .button:last-child,
+  .bar > .button.pull-right {
     position: absolute;
-  z-index: 1;
-  padding: 8px;
-  line-height: 6px; }
-  .buttons .button {
-    padding: 6px 12px;
-    line-height: 14px; }
-
-.buttons:first-child {
-  left: 0;
-  top: 0; }
-
-.buttons:last-child {
-  right: 0;
-  top: 0; }
+    top: 5px;
+    right: 5px; }
 
 .bar-header {
   top: 0; }
@@ -595,15 +587,15 @@ a {
   box-flex: 1;
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
-  width: 0;
-  line-height: 8px;
+  line-height: 15px;
   border-radius: 0;
   overflow: hidden;
   text-align: center;
   white-space: nowrap;
   display: block;
   text-overflow: ellipsis;
-  border-width: 1px 0px 1px 1px; }
+  border-width: 1px 0px 1px 1px;
+  padding: 8px 16px; }
   .button-bar > .button:last-child {
     border-right-width: 1px; }
 
@@ -1985,7 +1977,7 @@ main {
   border-radius: 2px;
   border-width: 1px;
   border-style: solid;
-  padding: 10px 15px; }
+  padding: 4px 12px; }
   .button.button-default {
     color: #333333;
     background-color: white;

example/headers.html

@@ -20,36 +20,25 @@
     <section>
 
       <header class="bar bar-header bar-dark">
-        <div class="buttons">
-          <a class="button button-clear">Back</a>
-          <a class="button button-clear">This</a>
-        </div>
+        <a class="button">Back</a>
         <h1 class="title">Really really really really really really really really long title!</h1>
-        <div class="buttons">
-          <a class="button">Forward</a>
-        </div>
+        <a class="button">This</a>
       </header>
-      <div class="bar bar-header-secondary bar-dark">
+      <div class="bar bar-header-secondary bar-success">
         <div class="button-bar">
           <a class="button">Success</a>
           <a class="button">Warning</a>
           <a class="button">Danger</a>
         </div>
       </div>
-      <header class="bar bar-header bar-dark">
-        <div class="buttons">
-          <a class="button button-clear">Back</a>
-          <a class="button button-clear">This</a>
-        </div>
+      <header class="bar bar-header bar-default">
+        <a class="button">Back</a>
         <div class="button-bar">
           <a class="button">Success</a>
           <a class="button">Warning</a>
           <a class="button">Danger</a>
         </div>
-        <div class="buttons">
-          <a class="button button-clear">Back</a>
-          <a class="button button-clear">This</a>
-        </div>
+        <a class="button">This</a>
       </header>
 
       <main class="content content-padded has-header">

scss/ionic/_structure-variables.scss

@@ -20,14 +20,19 @@ $roundedRadius:            5px;
 // -------------------------------
 $barHeight:                    44px !default;
 $barLineHeight:                44px !default;
-$barButtonsLineHeight:         6px !default;
+$barButtonLineHeight: 		   23px !default;
+$barButtonBarLineHeight: 	   18px !default;
 $barTitleFontSize:             $fontSizeLarge;
 $barTitleLineHeightComputed:   26px;//$barHeight - 2;
-$barPaddingVertical:           (($barHeight - $baseLineHeightComputed) / 2);
-$barPaddingPortrait:           8px;
+$barPaddingPortrait:           5px;
 $barPaddingLandscape:          5px;
 
 
+// Button bar stuff
+// -------------------------------
+$buttonBarButtonLineHeight:	   15px !default;
+
+
 // Forms
 // -------------------------------
 $textInputBorderRadius:     2px;

scss/ionic/_theme-variables.scss

@@ -65,7 +65,7 @@ $darkColor:             #333;
 // Buttons
 // -------------------------------
 $buttonColor:           #222;
-$buttonPadding:         10px 15px;
+$buttonPadding:         4px 12px;
 $buttonClearPadding:    10px 0px;
 $buttonBorderRadius:    2px;
 $buttonBorderWidth:     1px;

scss/ionic/structure/_bar.scss

@@ -3,6 +3,9 @@
 .bar {
   @include disable-user-select();
 
+  display: -webkit-box;
+  display: box;
+
   position: fixed;
   left: 0;
   right: 0;
@@ -19,9 +22,9 @@
     position: absolute;
     z-index: 0;
 
-    width: 100%;
     top: 0;
     left: 0;
+    right: 0;
 
     line-height: $barHeight;
 
@@ -44,41 +47,30 @@
     color: inherit;
   }
 
+  .button {
+    @include box-flex(0);
+    line-height: $barButtonLineHeight;
+    font-size: 12px;
+  }
+
+  .button-bar {
+    line-height: $barButtonBarLineHeight;
+  }
+
+  .button-bar + .button, .button + .button-bar {
+    margin-left: 5px;
+  }
+
   // Place the last button in a bar on the right of the bar
-  /*
   .title + .button:last-child,
-  .button + .button:last-child,
-  .button.pull-right {
+  > .button + .button:last-child,
+  > .button.pull-right {
     position: absolute;
     top: 5px;
     right: 5px;
   }
-  */
 }
 
-.buttons {
-  position: absolute;
-
-  // Lift the buttons container above the title
-  z-index: 1;
-
-  padding: $barPaddingPortrait;
-  line-height: $barButtonsLineHeight;
-
-
-  .button {
-    padding: 6px 12px;
-    line-height: 14px;
-  }
-}
-.buttons:first-child {
-  left: 0;
-  top: 0;
-}
-.buttons:last-child {
-  right: 0;
-  top: 0;
-}
 
 // Header at top
 .bar-header {

scss/ionic/structure/_button-group.scss

@@ -75,9 +75,8 @@
 .button-bar > .button {
   @include box-flex(1);
   // Fix for box-flex width issue
-  width: 0;
 
-  line-height: 8px;
+  line-height: $buttonBarButtonLineHeight;
   border-radius: 0;
   
   overflow: hidden;
@@ -88,6 +87,8 @@
 
   border-width: 1px 0px 1px 1px;
 
+  padding: 8px 16px;
+
   &:last-child {
     border-right-width: 1px;
   }