z-index variables

dist/css/ionic.css

@@ -2727,17 +2727,18 @@ body, .ionic-body {
   bottom: 49px; }
 
 .pane {
-  position: fixed; }
+  position: fixed;
+  z-index: 1; }
 
 .view {
-  position: absolute; }
+  position: absolute;
+  z-index: 1; }
 
 .pane, .view {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 1;
   width: 100%;
   height: 100%;
   background-color: #fff; }
@@ -2924,6 +2925,7 @@ a.subdued {
   position: fixed;
   top: 0;
   left: 0;
+  z-index: 10;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0); }

scss/_action-sheet.scss

@@ -24,7 +24,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: $zindex-modal;
+  z-index: $z-index-action-sheet;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0);
@@ -98,7 +98,7 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
   position: fixed;
   bottom: 0;
   left: 15px; 
-  z-index: $zindex-modal;
+  z-index: $z-index-action-sheet;
   overflow: hidden;
   width: calc(100% - 30px);
 

scss/_bar.scss

@@ -10,7 +10,7 @@
   position: absolute;
   right: 0;
   left: 0;
-  z-index: 10;
+  z-index: $z-index-bar;
 
   box-sizing: border-box;
   padding: $bar-padding-portrait;
@@ -98,7 +98,7 @@
     top: 0;
     right: 0;
     left: 0;
-    z-index: 0;
+    z-index: $z-index-bar-title;
     overflow: hidden;
 
     margin: 0 10px;
@@ -128,7 +128,7 @@
   }
 
   .button {
-    z-index: 1;
+    z-index: $z-index-bar-button;
     padding: 0 $button-bar-button-padding;
     min-width: initial;
     min-height: $button-bar-button-height - 1;

scss/_checkbox.scss

@@ -79,6 +79,6 @@
   position: absolute;
   top: 0;
   left: $item-padding / 2;
-  z-index: 3;
+  z-index: $z-index-item-checkbox;
   height: 100%;
 }

scss/_items.scss

@@ -8,7 +8,7 @@
   @include transition(margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out);
 
   position: relative;
-  z-index: 2; // Make sure the borders and stuff don't get hidden by children
+  z-index: $z-index-item; // Make sure the borders and stuff don't get hidden by children
   display: block;
 
   margin: $item-border-width * -1;
@@ -181,7 +181,7 @@ button.item.item-complex {
    * UI interactions.
    */
   position: relative;
-  z-index: 2;
+  z-index: $z-index-item;
 
   padding: $item-padding (($item-padding * 3) - 5) $item-padding $item-padding;
   border: none;
@@ -522,7 +522,7 @@ button.item-button-right:after {
   position: absolute;
   top: 0;
   left: 8px;
-  z-index: 0;
+  z-index: $z-index-item-edit;
   width: 48px;
   height: 100%;
   line-height: 100%;
@@ -564,7 +564,7 @@ button.item-button-right:after {
   position: absolute;
   top: 0;
   right: 0;
-  z-index: 0;
+  z-index: $z-index-item-drag;
   height: 100%;
 
   .button {
@@ -589,7 +589,7 @@ button.item-button-right:after {
   position: absolute;
   top: 0;
   right: 0;
-  z-index: 1;
+  z-index: $z-index-item-options;
   height: 100%;
 
   .button {

scss/_menu.scss

@@ -9,7 +9,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  z-index: 0;
+  z-index: $z-index-menu;
   overflow: hidden;
 
   min-height: 100%;

scss/_modal.scss

@@ -9,7 +9,7 @@
   @include translate3d(0, 100%, 0);
   position: fixed;
   top: 0; 
-  z-index: $zindex-modal;
+  z-index: $z-index-modal;
   overflow: hidden;
 
   min-height: 100%;

scss/_radio.scss

@@ -22,7 +22,7 @@
   position: absolute;
   top: 0;
   right: 0;
-  z-index: 3;
+  z-index: $z-index-item-radio;
   visibility: hidden;
   padding: $item-padding - 2;
   height: 100%;

scss/_scaffolding.scss

@@ -105,7 +105,7 @@ body, .ionic-body {
 // Scroll bar styles
 .scroll-bar {
   position: absolute;
-  z-index: 9999;
+  z-index: $z-index-scroll-bar;
 }
 .scroll-bar-h {
   height: 3px;
@@ -263,16 +263,17 @@ body, .ionic-body {
 // A full screen section with a solid background
 .pane {
   position: fixed;
+  z-index: $z-index-pane;
 }
 .view {
   position: absolute;
+  z-index: $z-index-view;
 }
 .pane, .view {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 1;
   width: 100%;
   height: 100%;
   background-color: #fff;

scss/_tabs.scss

@@ -15,7 +15,7 @@
   position: absolute;
   bottom: 0;
 
-  z-index: 5;
+  z-index: $z-index-tabs;
 
   width: 100%;
   height: $tabs-height;

scss/_toggle.scss

@@ -82,5 +82,5 @@
   position: absolute;
   top: $item-padding / 2;
   right: $item-padding;
-  z-index: 3;
+  z-index: $z-index-item-toggle;
 }

scss/_variables.scss

@@ -544,4 +544,21 @@ $badge-default-text:               #AAAAAA !default;
 // Z-Indexes
 // -------------------------------
 
-$zindex-modal: 10;
+$z-index-action-sheet:       10;
+$z-index-bar:                10;
+$z-index-bar-title:          0;
+$z-index-bar-button:         1;
+$z-index-item:               2;
+$z-index-item-checkbox:      3;
+$z-index-item-drag:          0;
+$z-index-item-edit:          0;
+$z-index-item-options:       1;
+$z-index-item-radio:         3;
+$z-index-item-toggle:        3;
+$z-index-menu:               0;
+$z-index-modal:              10;
+$z-index-pane:               1;
+$z-index-scroll-bar:         9999;
+$z-index-tabs:               5;
+$z-index-view:               1;
+