Header button love

example/headers.html

@@ -20,9 +20,9 @@
     <section>
 
       <header class="bar bar-header bar-dark">
+        <a class="button">Back</a>
         <h1 class="title">Really really really really really really really really long title!</h1>
-        <a class="button button-clear">Back</a>
-        <a class="button button-clear">This</a>
+        <a class="button">This</a>
       </header>
       <div class="bar bar-header-secondary bar-dark">
         <div class="button-bar">
@@ -32,13 +32,13 @@
         </div>
       </div>
       <header class="bar bar-header bar-dark">
-        <a class="button button-clear">Back</a>
+        <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>
-        <a class="button button-clear">This</a>
+        <a class="button">This</a>
       </header>
 
       <main class="content content-padded has-header">

scss/ionic/_structure-variables.scss

@@ -20,14 +20,18 @@ $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;
+
 // Horizontal forms & lists
 // -------------------------------
 $horizontalComponentOffset:       180px !default;

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

@@ -49,6 +49,16 @@
 
   .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

scss/ionic/structure/_button-group.scss

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