z-index variables

Adam Bradley · Adam Bradley · commit aae39e64f58a · 2013-12-12T11:35:31.000-06:00
diff --git a/dist/css/ionic.css b/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); }
diff --git a/scss/_action-sheet.scss b/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);
 
diff --git a/scss/_bar.scss b/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;
diff --git a/scss/_checkbox.scss b/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%;
 }
diff --git a/scss/_items.scss b/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 {
diff --git a/scss/_menu.scss b/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%;
diff --git a/scss/_modal.scss b/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%;
diff --git a/scss/_radio.scss b/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%;
diff --git a/scss/_scaffolding.scss b/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;
diff --git a/scss/_tabs.scss b/scss/_tabs.scss
@@ -15,7 +15,7 @@
   position: absolute;
   bottom: 0;
 
-  z-index: 5;
+  z-index: $z-index-tabs;
 
   width: 100%;
   height: $tabs-height;
diff --git a/scss/_toggle.scss b/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;
 }
diff --git a/scss/_variables.scss b/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;
+

Original file line number	Diff line number	Diff line change
`@@ -79,6 +79,6 @@`
`79`	`79`	`position: absolute;`
`80`	`80`	`top: 0;`
`81`	`81`	`left: $item-padding / 2;`
`82`		`- z-index: 3;`
	`82`	`+ z-index: $z-index-item-checkbox;`
`83`	`83`	`height: 100%;`
`84`	`84`	`}`