vuejs#2297 - Fix hidden hamburger menu mobile (vuejs#2298)

* fix (vuejs#2297): Fix hidden hamburger menu on mobile

* fix (vuejs#2297): Keep icon hidden on home page under side menu

* refactor (vuejs#2297): Remove duplicate z-index definition

* refactor (vuejs#2297): Setup base z-index manifest

* refactor (vuejs#2297): Abstract sidebar z-index baseline

* refactor (vuejs#2297): Establish base header z-index

* refactor (vuejs#2297): Establish z-index for overlay and modals

Author: bencodezen

themes/vue/source/css/_ad.styl

@@ -2,7 +2,7 @@
 #ad
   width 125px
   position fixed
-  z-index 99
+  z-index ($z-header - 1)
   bottom 10px
   right 10px
   padding 10px

themes/vue/source/css/_common.styl

@@ -76,7 +76,7 @@ input.button
 
 #main
   position: relative
-  z-index: 1
+  z-index: $z-base
   padding: 0 60px 30px
   overflow-x: hidden
 

themes/vue/source/css/_header.styl

@@ -15,7 +15,7 @@ red-dot-before(leftPos = -8px)
   height: $header-height
   padding: $heading-padding-vertical 60px
   position: relative
-  z-index: 100
+  z-index: $z-header
 
 body.docs
   #header
@@ -121,7 +121,7 @@ body.docs
   width: 100%
   height: 40px
   background-color: #fff
-  z-index: 9
+  z-index: $z-header
   display: none
   box-shadow: 0 0 2px rgba(0,0,0,.25)
   .menu-button

themes/vue/source/css/_modal.styl

@@ -7,13 +7,12 @@
   padding: .5em
   background-color: #f9f9f9
   box-shadow: 0 0 10px rgba(0,0,0,.2)
-  z-index: 11
   &.open
     display: block
     top: 50%
     left: 50%
     transform: translate(-50%, -50%)
-    z-index: 1000
+    z-index: $z-modal
 .modal-text
   margin-bottom 0.5em
   text-align center
@@ -27,7 +26,7 @@
   left: 0
   right: 0
   background: rgba(0,0,0,.2)
-  z-index: 10
+  z-index: $z-overlay
 .stop-scroll
   overflow: hidden
   height: 100%

themes/vue/source/css/_settings.styl

@@ -30,3 +30,10 @@ $heading-link-padding-top = $header-height + $content-padding-top
 $mobile-heading-link-padding-top = $mobile-header-height + $content-padding-top
 $h2-margin-top = 45px
 $h3-margin-top = 52px
+
+// z-index manifest
+$z-base = 1
+$z-sidebar = 10
+$z-header = 20
+$z-overlay = 30
+$z-modal = 40

themes/vue/source/css/_sidebar.styl

@@ -2,7 +2,7 @@
 
 .sidebar
   position: absolute
-  z-index: 10
+  z-index: $z-sidebar
   top: $header-height
   left: 0
   bottom: 0
@@ -65,7 +65,6 @@
 @media screen and (max-width: 900px)
   .sidebar
     position: fixed
-    z-index: 10
     background-color: #f9f9f9
     height: 100%
     top: 0

themes/vue/source/css/_sponsors-sidebar.styl

@@ -34,7 +34,7 @@
 #sidebar-sponsors-platinum-right
   display none
   position fixed
-  z-index 99
+  z-index ($z-header - 1)
   top 90px
   right 20px
 

themes/vue/source/css/index.styl

@@ -24,6 +24,7 @@ body
   &.top
     background-color: transparent
     box-shadow: none
+    z-index: ($z-sidebar - 1)
     .logo
       display: none
 

themes/vue/source/css/page.styl

@@ -97,7 +97,7 @@
     margin: 1.2em 0 -1.2em
     padding-bottom: 1.2em
     position: relative
-    z-index: 1
+    z-index: $z-base
   ul, ol
     padding-left: 1.5em
     // FIX: Some link click targets are covered without this
@@ -201,7 +201,7 @@
   .content.with-sidebar
     margin-left: 290px
   #ad
-    z-index: 1
+    z-index: $z-base
     position: relative
     padding: 0
     bottom: 0