Fixed panel buttons zindex

dist/ionic.css

@@ -52,6 +52,9 @@ main > * {
   width: 100%;
   height: 100%; }
 
+.rounded {
+  border-radius: 5px; }
+
 .alert {
   padding: 8px 35px 8px 14px; }
 
@@ -95,6 +98,7 @@ main > * {
   */ }
   .bar .title {
     position: absolute;
+    z-index: 0;
     width: 100%;
     top: 0;
     left: 0;
@@ -108,8 +112,11 @@ main > * {
 
 .buttons {
   position: absolute;
+  z-index: 1;
   padding: 8px;
   line-height: 6px; }
+  .buttons .button {
+    line-height: 6px; }
 
 .buttons:first-child {
   left: 0;
@@ -141,7 +148,8 @@ main > * {
   display: inline-block;
   vertical-align: middle;
   text-align: center;
-  cursor: pointer; }
+  cursor: pointer;
+  margin: 0; }
   .button.button-block {
     margin: 0 0 10px 0;
     display: block; }
@@ -1052,7 +1060,6 @@ a.list-item {
   bottom: 0;
   z-index: 0;
   overflow-y: scroll;
-  /* has to be scroll, not auto */
   -webkit-overflow-scrolling: touch; }
 
 .ion-panel-left {
@@ -1084,16 +1091,11 @@ a.list-item {
 .ptr-content .refreshing {
   display: none; }
 
-/* Bar docked to bottom used for primary app navigation */
-.tabs {
-  right: 0;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  box-sizing: border-box; }
-
+/**
+ * Tabs
+ * 
+ * A navigation bar with any number of tab items supported.
+ */
 .tabs-inner {
   display: -webkit-box;
   display: box;

example/panel_controller.html

@@ -14,9 +14,13 @@
     <section id="page" class="full-section ion-panel-animated">
 
       <header class="bar bar-header bar-dark">
-        <button id="left-button" class="button">Left</button>
+        <div class="buttons">
+          <a id="left-button" class="button button-dark" href="#">Left</a>
+        </div>
         <h1 class="title">Panels</h1>
-        <button id="right-button" class="button">Left</button>
+        <div class="buttons">
+          <button id="right-button" class="button button-default">Right</button>
+        </div>
       </header>
 
       <main class="content content-padded has-header">

example/tab-bars.html

@@ -24,12 +24,6 @@
       <footer class="bar bar-tabs bar-footer bar-success">
         <nav class="tabs">
           <ul class="tabs-inner">
-            <li class="tab-item">
-              <a href="#">
-                <i class="glyphicon glyphicon-home"></i>
-                Home
-              </a>
-            </li>
             <li class="tab-item">
               <a href="#">
                 <i class="glyphicon glyphicon-user"></i>

scss/ionic/_structure-variables.scss

@@ -35,6 +35,7 @@ $purple:                #7a43b6 !default;
 // Content stuff
 // -------------------------
 $contentPadding: 10px;
+$roundedRadius: 5px;
 
 
 // Bar stuff

scss/ionic/structure/_bar.scss

@@ -16,6 +16,8 @@
   // Title inside of a bar is centered
   .title {
     position: absolute;
+    z-index: 0;
+
     width: 100%;
     top: 0;
     left: 0;
@@ -50,8 +52,17 @@
 
 .buttons {
   position: absolute;
+
+  // Lift the buttons container above the title
+  z-index: 1;
+
   padding: $barPaddingPortrait;
   line-height: $barButtonsLineHeight;
+
+
+  .button {
+    line-height: 6px;
+  }
 }
 .buttons:first-child {
   left: 0;

scss/ionic/structure/_base.scss

@@ -65,3 +65,7 @@ main > * {
   width: 100%;
   height: 100%;
 }
+
+.rounded {
+  border-radius: $roundedRadius;
+}

scss/ionic/structure/_button.scss

@@ -4,6 +4,7 @@
 	vertical-align: middle;
 	text-align: center;
 	cursor: pointer;
+  margin: 0;
 
   &.button-block {
     margin: $buttonBlockMargin;

scss/ionic/structure/_panel.scss

@@ -11,7 +11,10 @@
   top: 0;
   bottom: 0;
   z-index: 0;
-  overflow-y: scroll; /* has to be scroll, not auto */
+
+  // has to be scroll, not auto
+  overflow-y: scroll;
+
   -webkit-overflow-scrolling: touch;
 }
 

scss/ionic/structure/_tabs.scss

@@ -1,13 +1,8 @@
-/* Bar docked to bottom used for primary app navigation */
-.tabs {
-  right: 0;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  box-sizing: border-box;
-}
+/**
+ * Tabs
+ * 
+ * A navigation bar with any number of tab items supported.
+ */
 
 .tabs-inner {
   display: -webkit-box;