diff --git a/dist/css/ionic.css b/dist/css/ionic.css index f6f50b3271..909f0b5f74 100644 --- 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 index 92ccc62ad5..4e9b65f6d6 100644 --- 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 index bf01effe2a..e2ecd2fe71 100644 --- 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 index d81d0dc889..b6a49577e2 100644 --- 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 index 2b0bacf0db..b1bc18ad3a 100644 --- 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 index 5ef8d012a4..cf289fb962 100644 --- 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 index b196da41c5..0910775ecc 100644 --- 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 index 3571d93b80..3dc9e5e71e 100644 --- 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 index 2a0af25574..7743d8041b 100644 --- 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 index 47a3b695ec..085fcac1c8 100644 --- 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 index 3129f33041..2cb667cd78 100644 --- 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 index c44219b1d9..44479c3a6b 100644 --- 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; +