UX: Implementing a z-index system (#5507)

app/assets/stylesheets/common/admin/admin_base.scss

@@ -195,7 +195,7 @@ $mobile-breakpoint: 700px;
     position: absolute;
     width: 460px;
     right: 0px;
-    z-index: 990;
+    z-index: z("dropdown");
     box-shadow: 0 2px 6px rgba(0,0,0, .8);
     margin-top: -2px;
     background-color: $secondary;
@@ -403,7 +403,7 @@ $mobile-breakpoint: 700px;
   // The admin-nav becomes a slide-out menu at the mobile-nav breakpoint
   @media (max-width: $mobile-breakpoint) {
     position: absolute;
-    z-index: 0;
+    z-index: z("base") - 1;
     width: 50%;
   }
 }
@@ -411,7 +411,7 @@ $mobile-breakpoint: 700px;
 .admin-detail {
   width: 76.5765%;
   @media (max-width: $mobile-breakpoint) {
-    z-index: 10;
+    z-index: z("base");
     width: 100%;
   }
   background-color: $secondary;

app/assets/stylesheets/common/admin/customize.scss

@@ -61,7 +61,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 100000;
+    z-index: z("fullscreen");
     background-color: white;
     width: 100%;
     padding: 0;

app/assets/stylesheets/common/base/_topic-list.scss

@@ -1,6 +1,6 @@
 .show-more {
   width: 100%;
-  z-index: 1;
+  z-index: z("base");
   &.has-topics {
     position: absolute;
     top: 7px;
@@ -259,7 +259,7 @@ ol.category-breadcrumb {
   position: absolute;
   border: 1px solid $primary-low;
   background-color: $secondary;
-  z-index: 100;
+  z-index: z("dropdown");
 
   a.badge-category, a.badge-category-parent {
     line-height: $line-height-large;

app/assets/stylesheets/common/base/compose.scss

@@ -16,7 +16,7 @@
   @media screen and (max-width: 1200px) {
     min-width: 0;
   }
-  z-index: 999;
+  z-index: z("composer","content");
   transition: height 250ms ease, background 250ms ease, transform 250ms ease, max-width 250ms ease;
   background-color: $secondary;
   box-shadow: 0 -1px 40px rgba(0,0,0, .12);
@@ -271,7 +271,7 @@
 }
 
 .autocomplete {
-  z-index: 999999;
+  z-index: z("dropdown");
   position: absolute;
   width: 240px;
   background-color: $secondary;

app/assets/stylesheets/common/base/crawler_layout.scss

@@ -3,7 +3,7 @@ body.crawler {
     width: 100%;
     position: absolute;
     top: 0;
-    z-index: 1001;
+    z-index: z("max");
     background-color: #fff;
     padding: 10px;
     box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);

app/assets/stylesheets/common/base/discourse.scss

@@ -353,7 +353,7 @@ select {
   top: -18px !important;
   right: -18px !important;
   box-shadow: 0 0 0 9999px rgba($primary, 0.85);
-  z-index: 1040;
+  z-index: z("modal","overlay");
 }
 
 .ring-first-notification {

app/assets/stylesheets/common/base/emoji.scss

@@ -7,7 +7,7 @@ img.emoji {
 .emoji-picker {
   box-shadow: 0 1px 5px rgba(0,0,0,0.4);
   background-clip: padding-box;
-  z-index: 10000;
+  z-index: z("modal","content"); 
   position: fixed;
   display: none;
   flex-direction: row;
@@ -177,7 +177,7 @@ img.emoji {
 }
 
 .emoji-picker-modal.fadeIn {
-  z-index: 9999;
+  z-index: z("modal","overlay");
   position: fixed;
   left: 0;
   top: 0;

app/assets/stylesheets/common/base/header.scss

@@ -2,7 +2,7 @@
   width: 100%;
   position: absolute;
   top: 0;
-  z-index: 1001;
+  z-index: z("header");
   background-color: $header_background;
   box-shadow: 0 2px 4px -1px rgba(0,0,0, .25);
 
@@ -110,7 +110,7 @@
         position: absolute;
         top: 100%;
         left: 0;
-        z-index: 1101;
+        z-index: z("header") + 1; // Higher than .menu-panel
         width: 100%;
         height: 0;
         content: "";
@@ -135,7 +135,7 @@
   .ring {
     position: absolute;
     top: -9px;
-    z-index: 1;
+    z-index: z("base");
     margin-left: 0;
   }
   .header-dropdown-toggle {
@@ -143,7 +143,7 @@
   }
   .badge-notification {
     position: absolute;
-    z-index: 1;
+    z-index: z("base");
     left: 0;
     top: -4px;
     min-width: 6px;

app/assets/stylesheets/common/base/menu-panel.scss

@@ -21,7 +21,7 @@
   border: 1px solid $primary-low;
   box-shadow: 0 2px 2px rgba(0,0,0, .25);
   background-color: $secondary;
-  z-index: 1100;
+  z-index: z("header");
   padding: 0.5em;
   width: 300px;
 

app/assets/stylesheets/common/base/modal.scss

@@ -1,12 +1,12 @@
 .modal-open {
   .dropdown-menu {
-     z-index: 2050;
+     z-index: z("modal","dropdown");
   }
   .popover {
-    z-index: 2060;
+    z-index: z("modal","popover");
   }
   .tooltip {
-    z-index: 2070;
+    z-index: z("modal","tooltip");
   }
 
 }
@@ -26,7 +26,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 1040;
+  z-index: z("modal","overlay");
   background-color: #111;
   &.fade {
     opacity: 0;
@@ -98,7 +98,7 @@
   top: 0;
   width: 100%;
   height: 100%;
-  z-index: 1050;
+  z-index: z("modal","content");
   overflow: auto;
 }
 .modal-form {
@@ -169,7 +169,7 @@
         position: relative;
       }
       .jsfu-shade {
-        z-index: 1;
+        z-index: z("base");
         position: absolute;
         top: 0;
         left: 0;

app/assets/stylesheets/common/base/onebox.scss

@@ -376,7 +376,7 @@ aside.onebox.twitterstatus .onebox-body {
 .onebox.imgur-album {
   .outer-box {
     position: absolute;
-    z-index: 935;
+    z-index: z("base");
     overflow: hidden;
     font-size: $font-down-1;
     color: #fff;

app/assets/stylesheets/common/base/share_link.scss

@@ -3,7 +3,7 @@
 #share-link {
   position: absolute;
   left: 20px;
-  z-index: 1200;
+  z-index: z("dropdown");
   box-shadow: 0 1px 5px rgba(0,0,0, .4);
   background-color: $secondary;
   padding: 6px 10px 10px 10px;

app/assets/stylesheets/common/base/topic-admin-menu.scss

@@ -4,7 +4,7 @@
   position: fixed;
   top: 120px;
   right: 10px;
-  z-index: 999;
+  z-index: z("dropdown");
   height: 35px;
 }
 
@@ -13,7 +13,7 @@
   width: 205px;
   padding: 10px;
   border: 1px solid $primary-low; 
-  z-index: 999;
+  z-index: z("dropdown");
 
   ul {
     list-style: none;

app/assets/stylesheets/common/base/topic-post.scss

@@ -174,7 +174,7 @@ aside.quote {
   background-color: blend-primary-secondary(50%);
   color: dark-light-choose($secondary, $primary);
   padding: 10px;
-  z-index: 401;
+  z-index: z("dropdown");
   opacity: 0.9;
 
   .d-icon {

app/assets/stylesheets/common/base/topic.scss

@@ -9,7 +9,7 @@
 .progress-back-container {
   position: fixed;
   bottom: 40px;
-  z-index: 950;
+  z-index: z("dropdown");
   margin-right: 0px;
   animation-duration: 0.5s;
   animation-name: button-jump-up;

app/assets/stylesheets/common/components/banner.scss

@@ -7,7 +7,7 @@
   background: $tertiary-low;
   box-shadow: 0 2px 4px -1px rgba(0,0,0, .25);
   color: $primary;
-  z-index: 1001;
+  z-index: z("base") + 1;
   overflow: auto;
 
   &.overlay {

app/assets/stylesheets/common/d-editor.scss

@@ -8,12 +8,12 @@
   position: absolute;
   background-color: black;
   opacity: 0.8;
-  z-index: 1000;
+  z-index: z("modal","overlay");
 }
 
 .d-editor-modals {
   position: absolute;
-  z-index: 1001;
+  z-index: z("modal","content");
 }
 
 .d-editor {

app/assets/stylesheets/common/foundation/variables.scss

@@ -53,6 +53,56 @@ $line-height-large: 1.4; // Normal or small text
 @import "plugins_variables";
 @import "common/foundation/math";
 
+// Z-index
+// --------------------------------------------------
+
+$z-layers: (
+  "max":              9999, 
+  "fullscreen":       1700,
+  "modal": (
+    "tooltip":        1600,   
+    "popover":        1500,
+    "dropdown":       1400,
+    "content":        1300,
+    "overlay":        1200,
+  ),
+  "mobile-composer":  1100,
+  "header":           1000,
+  "tooltip":          600,
+  "composer": (
+      "popover":      500,
+      "content":      400,
+  ),
+  "dropdown":         300,  
+  "usercard":         200,
+  "timeline":         100,
+  "base":             1
+  );
+
+@function map-has-nested-keys($map, $keys...) {
+  @each $key in $keys {
+    @if not map-has-key($map, $key) {
+      @return false;
+    }
+    $map: map-get($map, $key);
+  }
+  @return true;
+}
+
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}
+
+@function z($layers...) {
+  @if not map-has-nested-keys($z-layers, $layers...) {
+    @warn "No layer defined for `#{inspect($layers...)}` in $z-layers map. Check variables.scss, property omitted.";
+  }
+  @return map-deep-get($z-layers, $layers...);
+}
+
 // Color utilities
 // --------------------------------------------------
 

app/assets/stylesheets/common/input_tip.scss

@@ -5,7 +5,7 @@
   position: absolute;
   display: block;
   padding: 5px 10px;
-  z-index: 101;
+  z-index: z("tooltip");
   &.bad {
     background: $danger-medium;
     color: white;

app/assets/stylesheets/common/select-kit/select-kit.scss

@@ -1,5 +1,5 @@
 .mobile-view .select-kit.is-expanded {
-  z-index: 1000;
+  z-index: z("dropdown");
 }
 
 .select-box-kit, .select-kit {
@@ -30,7 +30,7 @@
   }
 
   &.is-expanded {
-    z-index: 999;
+    z-index: z("dropdown");
 
     .select-kit-body {
       display: -webkit-box;

app/assets/stylesheets/common/topic-entrance.scss

@@ -4,7 +4,7 @@
   padding: 5px;
   background: $secondary;
   box-shadow: 0 0px 2px rgba(0,0,0, .2);
-  z-index: 100;
+  z-index: z("dropdown");
 
   position: absolute;
   width: 133px;

app/assets/stylesheets/common/topic-timeline.scss

@@ -4,7 +4,7 @@
 
 .timeline-container {
   box-sizing: border-box;
-  z-index: 499;
+  z-index: z("timeline");
   margin-left: 757px;
 
   @media all and (min-width: 1140px) {
@@ -51,7 +51,7 @@
     border-top: 1px solid dark-light-choose($primary-low, $secondary-low);
     box-shadow: 0px -2px 4px -1px rgba(0,0,0,.25);
     padding-top: 20px;
-    z-index: 100000;
+    z-index: z("fullscreen");
     .back-button {
       display: none;
     }
@@ -225,7 +225,7 @@
       background-color: dark-light-choose($tertiary-low, $tertiary-high);
       height: 100%;
       float: left;
-      z-index: 501;
+      z-index: z("base") + 1;
     }
 
     .timeline-scroller-content {
@@ -261,7 +261,7 @@
         color: $tertiary;
         margin-right: 1em;
       }
-      z-index: 502;
+      z-index: z("base") + 2; // above timeline-handle
     }
 
     .back-button {

app/assets/stylesheets/desktop/compose.scss

@@ -73,7 +73,7 @@
   bottom: 10px;
   left: 51%;
   overflow-y: auto;
-  z-index: 110;
+  z-index: z("composer","popover");
   padding: 10px 10px 35px 10px;
   box-shadow: 3px 3px 3px rgba(0,0,0, 0.34);
   background: $highlight-medium;

app/assets/stylesheets/desktop/discourse.scss

@@ -140,7 +140,7 @@ input {
       vertical-align: middle;
 
       &:focus {
-        z-index: 2;
+        z-index: z("base") + 1;
       }
     }
 

app/assets/stylesheets/desktop/modal.scss

@@ -10,7 +10,7 @@
   position: fixed;
   top: 50%;
   left: 50%;
-  z-index: 1050;
+  z-index: z("modal","content");
   overflow: auto;
   width: 610px;
   height: auto;

app/assets/stylesheets/desktop/topic-list.scss

@@ -268,7 +268,7 @@
     top: 130px;
     padding: 5px;
     background-color: $secondary;
-    z-index: 99999;
+    z-index: z("dropdown");
   }
 
   button.dismiss-read {

app/assets/stylesheets/desktop/topic-post.scss

@@ -27,7 +27,7 @@ h1 .topic-statuses .topic-status i {
   }
 
   .reply-to-tab {
-    z-index: 400;
+    z-index: z("base") + 1;
     float: right;
     margin: -2px 25px 0 0;
     color: dark-light-choose($primary-medium, $secondary-medium);
@@ -177,7 +177,7 @@ nav.post-controls {
     text-align: left;
     bottom: -2px;
     right: 15px;
-    z-index: 1000;
+    z-index: z("dropdown");
 
     h3 {
       margin-top: 0;
@@ -256,7 +256,7 @@ nav.post-controls {
   }
   .topic-meta-data h5 {
     position: absolute;
-    z-index: 1;
+    z-index: z("base");
     font-size: $font-down-1;
     a {
       font-weight: bold;
@@ -613,7 +613,7 @@ $topic-avatar-width: 45px;
   width: $topic-body-width;
   float: left;
   position: relative;
-  z-index: 2;
+  z-index: z("base");
   border-top: 1px solid $primary-low;
   padding: 12px $topic-body-width-padding 15px $topic-body-width-padding;
 }
@@ -623,7 +623,7 @@ $topic-avatar-width: 45px;
   padding-top: 15px;
   width: $topic-avatar-width;
   float: left;
-  z-index: 3;
+  z-index: z("base");
 }
 
 .gap {
@@ -659,7 +659,7 @@ $topic-avatar-width: 45px;
   position: absolute;
   bottom: 115%;
   left: 0;
-  z-index: 999;
+  z-index: z("dropdown");
   display: none;
   float: left;
   width: 550px;
@@ -724,7 +724,7 @@ $topic-avatar-width: 45px;
 .selected-posts {
   width: 200px;
   position: fixed;
-  z-index: 1000;
+  z-index: z("dropdown");
   background-color: $tertiary-low;
   border: 1px solid $tertiary;
   padding: 5px;
@@ -815,7 +815,7 @@ $topic-avatar-width: 45px;
     .select-posts {
       position: absolute;
       right: 0;
-      z-index: 490;
+      z-index: z("base") + 1;
       top: 3em;
       height: 100px;
 
@@ -847,7 +847,7 @@ a.attachment:before {
   color: rgba($primary-low, .8);
   font: 6.429em/1 FontAwesome;
   content: "\f014";
-  z-index: -5;
+  z-index: z("base");
 }
 
 .topic-meta-data {

app/assets/stylesheets/desktop/topic.scss

@@ -17,7 +17,7 @@
 .edits {margin-right: 5px;}
 
 #topic-title {
-  z-index: 1000;
+  z-index: z("base");
   padding-top: 14px;
   margin-bottom: 10px;
 
@@ -81,7 +81,7 @@
   right: 50%;
   width: 0;
   bottom: 0;
-  z-index: 500;
+  z-index: z("timeline");
   &.docked {
     position: absolute;
     bottom: -70px;
@@ -155,13 +155,13 @@
     top: 9px;
     width: 100%;
     text-align: center;
-    z-index: 1;
+    z-index: z("base");
   }
   .d-icon {
     position: absolute;
     right: 8px;
     bottom: 9px;
-    z-index: 1;
+    z-index: z("base");
   }
   h4 {
     display: inline;
@@ -195,7 +195,7 @@
   position: fixed;
   width: 100%;
   font-size: $font-0;
-  z-index: 495
+  z-index: z("dropdown");
 }
 
 @media all

app/assets/stylesheets/desktop/user-card.scss

@@ -9,7 +9,7 @@ $user_card_background: $secondary;
   width: 500px;
   left: -9999px;
   top: -9999px;
-  z-index: 990;
+  z-index: z("usercard");
   box-shadow: 1px 2px 6px rgba(0,0,0, .25);
   margin-top: -2px;
   color: $user_card_primary;

app/assets/stylesheets/mobile/compose.scss

@@ -7,7 +7,7 @@
 }
 
 #reply-control {
-  z-index: 1002; //d-header is 1001
+  z-index: z("mobile-composer");
     .reply-area {
       padding: 0 10px;
       @media screen and (max-width: 374px) {
@@ -81,7 +81,7 @@
     &.show-preview {
       .d-editor-preview-wrapper {
         position: fixed;
-        z-index: 1000000;
+        z-index: z("base") + 1;
         top: 0;
         bottom: 0;
         left: 0;
@@ -99,7 +99,7 @@
         position: fixed;
         right: 5px;
         bottom: 5px;
-        z-index: 1000001;
+        z-index: z("base") + 2;
       }
     }
 

app/assets/stylesheets/mobile/discourse.scss

@@ -112,7 +112,7 @@ blockquote {
       left: 0;
       display: block;
       position: absolute;
-      z-index: 10000000;
+      z-index: z("dropdown");
       background-color: $secondary;
       width: 100%;
       list-style: none;

app/assets/stylesheets/mobile/modal.scss

@@ -12,7 +12,7 @@
 .bootbox.modal {
   position: fixed;
   top: 10%;
-  z-index: 1050;
+  z-index: z("modal","content");
   overflow: auto;
   width: 100%;
   height: auto;

app/assets/stylesheets/mobile/topic-list.scss

@@ -28,7 +28,7 @@
   .nav-pills .drop {
     border: 1px solid $primary-low;
     position: absolute;
-    z-index: 1000;
+    z-index: z("dropdown");
     background-color: $secondary;
     padding: 0 10px 10px 10px;
     width: 150px;
@@ -342,7 +342,7 @@ tr.category-topic-link {
   position: relative;
   top: 100%;
   left: 0;
-  z-index: 1000;
+  z-index: z("dropdown");
   display: none;
   float: left;
   width: 280px;

app/assets/stylesheets/mobile/topic-post.scss

@@ -79,7 +79,7 @@ span.badge-posts {
   text-align: left;
   bottom: 0;
   left: 135px;
-  z-index: 1000;
+  z-index: z("dropdown");
 
   h3 {
     margin-top: 0;
@@ -125,7 +125,7 @@ span.badge-posts {
 }
 
 a.reply-to-tab {
-  z-index: 400;
+  z-index: z("base") + 1;
   right: 80px;
   color: dark-light-choose($primary-medium, $secondary-medium);
   margin: -3px 10px 0 0;
@@ -311,7 +311,7 @@ span.post-count {
 }
 
 #topic-title {
-  z-index: 1000;
+  z-index: z("base") + 1;
   margin: 0 0 0 0 !important;
   padding: 15px 0;
 }
@@ -329,7 +329,7 @@ span.post-count {
 
 .quote-button.visible {
   display: block;
-  z-index: 936;
+  z-index: z("tooltip");
 }
 
 iframe {
@@ -397,7 +397,7 @@ iframe {
 button.select-post {
   display: inline-block;
   position: absolute;
-  z-index: 401; // 400 is the reply-to tab
+  z-index: z("base") + 1;
   left: 200px;
   background-color: srgb-scale($tertiary, $secondary, 60%);
   color: $secondary;
@@ -443,7 +443,7 @@ span.highlighted {
 .topic-avatar {
   float: left;
   margin-right: 10px;
-  z-index:999; /* must render on top of topic-body + topic-meta-data, otherwise not tappable */
+  z-index: z("base") + 1; /* must render on top of topic-body + topic-meta-data, otherwise not tappable */
 }
 
 .topic-meta-data {

app/assets/stylesheets/mobile/topic.scss

@@ -61,7 +61,7 @@
   width: 0;
   right: 0;
   bottom: 0;
-  z-index: 950;
+  z-index: z("timeline");
   margin-right: 148px;
 }
 
@@ -126,7 +126,7 @@
     top: 9px;
     width: 100%;
     text-align: center;
-    z-index: 1;
+    z-index: z("base");
   }
   h4 {
     display: inline;
@@ -137,7 +137,7 @@
     position: absolute;
     right: 8px;
     bottom: 9px;
-    z-index: 1;
+    z-index: z("base");
   }
   .bg {
     position: absolute;