Merge pull request #930 from aldenhallak/zindex

Standardize and fix z-indexes to 10,20,30,40,50

Author: cjqian

frontend/src/components/experiment_builder/experiment_builder.scss

@@ -26,7 +26,7 @@
   padding: 0 common.$sidenav-padding;
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: 10;
 }
 
 .sidenav-items {
@@ -113,7 +113,7 @@
   padding: 0 common.$main-content-padding;
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: 10;
 
   .left,
   .right {

frontend/src/components/experiment_builder/experiment_builder_nav.scss

@@ -41,7 +41,7 @@
   padding: 0 common.$sidenav-padding;
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: 10;
 }
 
 .primary {

frontend/src/components/experiment_dashboard/cohort_summary.scss

@@ -20,7 +20,6 @@
   justify-content: space-between;
   padding: common.$spacing-medium common.$spacing-large;
   position: relative;
-  z-index: 2;
 
   &:focus,
   &:hover {

frontend/src/components/experimenter/experimenter_panel.scss

@@ -304,7 +304,7 @@ pr-button pr-icon {
   padding: common.$spacing-medium;
   position: fixed;
   right: common.$spacing-large;
-  z-index: 1000;
+  z-index: 40;
 
   .content {
     @include common.flex-row-align-center;

frontend/src/components/header/header.scss

@@ -7,7 +7,7 @@
   position: sticky;
   top: 0;
   width: 100%;
-  z-index: 1;
+  z-index: 10;
 }
 
 .banner {

frontend/src/pair-components/menu.scss

@@ -19,7 +19,7 @@
   height: 0;
   overflow: hidden;
   width: 0;
-  z-index: 1;
+  z-index: 30;
 
   &.show-menu {
     overflow: visible;

frontend/src/pair-components/tooltip.css

@@ -1,6 +1,6 @@
 /* Tooltip */
 :host {
-  --z-index: var(--pr-tooltip-z-index, 1);
+  --z-index: var(--pr-tooltip-z-index, 30);
   --anchor-display-mode: var(--pr-tooltip-display, inline-block);
 }
 

frontend/src/sass/_common.scss

@@ -199,7 +199,7 @@
   justify-content: center;
   padding: calc($main-content-padding * 2);
   position: absolute;
-  z-index: 2; // above app header
+  z-index: 20; // above app header
 }
 
 @mixin dialog {