From 279079b1ec34dd54b620949c2a21acb43d4f995b Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Sat, 31 Aug 2013 18:49:48 -0500
Subject: [PATCH] Fixed panel buttons zindex

---
 dist/ionic.css                       | 26 ++++++++++++++------------
 example/panel_controller.html        |  8 ++++++--
 example/tab-bars.html                |  6 ------
 scss/ionic/_structure-variables.scss |  1 +
 scss/ionic/structure/_bar.scss       | 11 +++++++++++
 scss/ionic/structure/_base.scss      |  4 ++++
 scss/ionic/structure/_button.scss    |  1 +
 scss/ionic/structure/_panel.scss     |  5 ++++-
 scss/ionic/structure/_tabs.scss      | 15 +++++----------
 9 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/dist/ionic.css b/dist/ionic.css
index 326e1f0c73..70ec46d682 100644
--- a/dist/ionic.css
+++ b/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;
diff --git a/example/panel_controller.html b/example/panel_controller.html
index 3afd299f9e..ff98328589 100644
--- a/example/panel_controller.html
+++ b/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">
diff --git a/example/tab-bars.html b/example/tab-bars.html
index 004bc30f72..00ca7666cf 100644
--- a/example/tab-bars.html
+++ b/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>
diff --git a/scss/ionic/_structure-variables.scss b/scss/ionic/_structure-variables.scss
index b0812b8617..baf37df188 100644
--- a/scss/ionic/_structure-variables.scss
+++ b/scss/ionic/_structure-variables.scss
@@ -35,6 +35,7 @@ $purple:                #7a43b6 !default;
 // Content stuff
 // -------------------------
 $contentPadding: 10px;
+$roundedRadius: 5px;
 
 
 // Bar stuff
diff --git a/scss/ionic/structure/_bar.scss b/scss/ionic/structure/_bar.scss
index d9f4d86c39..41fc59d3e7 100644
--- a/scss/ionic/structure/_bar.scss
+++ b/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;
diff --git a/scss/ionic/structure/_base.scss b/scss/ionic/structure/_base.scss
index 725d72e3a1..c7804ba890 100644
--- a/scss/ionic/structure/_base.scss
+++ b/scss/ionic/structure/_base.scss
@@ -65,3 +65,7 @@ main > * {
   width: 100%;
   height: 100%;
 }
+
+.rounded {
+  border-radius: $roundedRadius;
+}
diff --git a/scss/ionic/structure/_button.scss b/scss/ionic/structure/_button.scss
index c403c53c16..02267f4a70 100644
--- a/scss/ionic/structure/_button.scss
+++ b/scss/ionic/structure/_button.scss
@@ -4,6 +4,7 @@
 	vertical-align: middle;
 	text-align: center;
 	cursor: pointer;
+  margin: 0;
 
   &.button-block {
     margin: $buttonBlockMargin;
diff --git a/scss/ionic/structure/_panel.scss b/scss/ionic/structure/_panel.scss
index 5c0303ce4d..dfaf48c050 100644
--- a/scss/ionic/structure/_panel.scss
+++ b/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;
 }
 
diff --git a/scss/ionic/structure/_tabs.scss b/scss/ionic/structure/_tabs.scss
index 4c5fa99539..e65718b4a1 100644
--- a/scss/ionic/structure/_tabs.scss
+++ b/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;