Using custom properties for z-index values (#6733)

* Using custom properties for z-index values

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Reorder values

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Remove unused styles

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Different set of z-index css vars

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Revert z-index to main layout

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/features/application-update/child-features/application-update-using-top-bar/renderer/update-application-top-bar-item/update-button/styles.module.scss

@@ -33,7 +33,6 @@
     height: 100%;
     left: 0;
     opacity: 0.15;
-    z-index: -1;
     transition: opacity 0.1s;
   }
 }

src/renderer/components/+namespaces/namespace-select-filter.scss

@@ -33,7 +33,6 @@
       &::before, &::after {
         content: ' ';
         position: absolute;
-        z-index: 20;
         display: block;
         width: 8px;
         height: var(--font-size);

src/renderer/components/+welcome/welcome.scss

@@ -7,7 +7,7 @@
   text-align: center;
   width: 100%;
   height: 100%;
-  z-index: 1;
+  z-index: var(--z-index-base);
 
   h2 {
     color: var(--textColorAccent);

src/renderer/components/add-remove-buttons/add-remove-buttons.scss

@@ -9,7 +9,6 @@
   margin-right: $padding * 4;
   bottom: 0;
   right: 0;
-  z-index: 99;
 
   .Button {
     &.remove-button {

src/renderer/components/app.scss

@@ -27,6 +27,12 @@
   --font-weight-normal: 400;
   --font-weight-bold: 500;
   --main-layout-header: 40px;
+
+  --z-index-base: 0;
+  --z-index-above: 1;
+  --z-index-modals: 2;
+  --z-index-menus: 3;
+  --z-index-topmost: 9999;
 }
 
 *, *:before, *:after {
@@ -249,19 +255,6 @@ iframe {
   }
 }
 
-// app's common loading indicator, displaying on the route transitions
-#loading {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin: -15px;
-  z-index: 1000;
-
-  &.hidden {
-    display: none;
-  }
-}
-
 // hack-fix: remove crappy yellow background from auto-filled inputs in chrome
 @keyframes autofill-remove-bgc {
   to {

src/renderer/components/cluster-manager/cluster-manager.scss

@@ -27,7 +27,7 @@
   }
 
   .error {
-    z-index: 1;
+    z-index: var(--z-index-base);
   }
 
   #lens-views {

src/renderer/components/cluster-manager/cluster-status.module.scss

@@ -5,7 +5,6 @@
   min-width: 350px;
   margin: auto;
   text-align: center;
-  z-index: 1;
   background: var(--mainBackground);
   width: 100%;
   height: 100%;

src/renderer/components/dialog/dialog.scss

@@ -12,7 +12,7 @@
   width: 100%;
   height: 100%;
   padding: $unit * 5;
-  z-index: $zIndex-dialog;
+  z-index: var(--z-index-modals);
   overscroll-behavior: none; // prevent swiping with touch-pad on MacOSX
   overflow: auto;
 

src/renderer/components/dock/dock-tabs.module.scss

@@ -44,7 +44,7 @@
       content: "\00A0";
       position: sticky;
       min-width: 8px;
-      z-index: 1;
+      z-index: var(--z-index-base);
     }
 
     &::before {

src/renderer/components/dock/dock.scss

@@ -26,7 +26,7 @@
       right: 0;
       left: 0;
       bottom: 0;
-      z-index: 100;
+      z-index: var(--z-index-base);
     }
   }
 

src/renderer/components/drawer/drawer.scss

@@ -11,7 +11,7 @@
   position: absolute;
   background: var(--contentColor);
   box-shadow: 0 0 $unit * 2 var(--boxShadow);
-  z-index: $zIndex-drawer;
+  z-index: var(--z-index-above);
   height: 100%;
 
   &.left {

src/renderer/components/editable-list/editable-list.scss

@@ -37,7 +37,6 @@
         &::before, &::after {
           content: ' ';
           position: absolute;
-          z-index: 20;
           display: block;
           width: 8px;
           height: var(--font-size);

src/renderer/components/hotbar/hotbar-menu.scss

@@ -12,6 +12,7 @@
   padding-top: 1px;
   width: var(--hotbar-width);
   overflow: hidden;
+  isolation: isolate;
 
   &.draggingOver::after {
     content: " ";

src/renderer/components/hotbar/hotbar-selector.module.scss

@@ -40,7 +40,7 @@
     }
 
     &:focus-visible {
-      z-index: 1;
+      z-index: var(--z-index-base);
     }
   }
 }

src/renderer/components/kube-object-details/kube-object-details.scss

@@ -4,8 +4,6 @@
  */
 
 .KubeObjectDetails {
-  z-index: $zIndex-drawer + 1 !important;
-
   .drawer-title {
     .Menu {
       border: none;

src/renderer/components/layout/main-layout.module.scss

@@ -11,7 +11,7 @@
   grid-template-rows: [contents] 1fr [footer] auto;
   grid-template-columns: [sidebar] var(--sidebar-width) [contents] 1fr;
   width: 100%;
-  z-index: 1;
+  z-index: var(--z-index-base);
   height: 100%;
 }
 

src/renderer/components/layout/setting-layout.scss

@@ -10,7 +10,7 @@
   display: grid;
   color: var(--settingsColor);
   position: fixed;
-  z-index: 13!important;
+  z-index: var(--z-index-modals);
   left: 0;
   top: 0;
   right: 0;

src/renderer/components/layout/top-bar/top-bar.module.scss

@@ -5,7 +5,7 @@
 
 .topBar {
   background-color: var(--layoutBackground);
-  z-index: 2;
+  z-index: var(--z-index-above);
   grid-area: topbar;
   height: var(--main-layout-header);
 

src/renderer/components/markdown-viewer/markdown-viewer.scss

@@ -658,7 +658,7 @@
 
   :checked + .radio-label {
     position: relative;
-    z-index: 1;
+    z-index: var(--z-index-base);
     border-color: #4078c0;
   }
 

src/renderer/components/menu/menu.scss

@@ -12,7 +12,7 @@
   background: var(--bgc);
   list-style: none;
   border: 1px solid var(--borderColor);
-  z-index: 101;
+  z-index: var(--z-index-menus);
   box-shadow: rgb(0 0 0 / 17%) 0px 6px 9px 0px;
   border-radius: 4px;
 

src/renderer/components/notifications/notifications.scss

@@ -11,7 +11,7 @@
   top: 0;
   padding: $padding * 2;
   max-height: 100vh;
-  z-index: 100000;
+  z-index: var(--z-index-topmost);
   height: min-content!important;
 
   &:empty {

src/renderer/components/resizing-anchor/resizing-anchor.scss

@@ -13,7 +13,7 @@ body.resizing {
   $dimension: 12px;
 
   position: absolute;
-  z-index: 10;
+  z-index: var(--z-index-base);
 
   &::after {
     content: " ";

src/renderer/components/select/select.scss

@@ -145,7 +145,7 @@ html {
   //-- Themes
 
   .Select__menu {
-    z-index: $zIndex-select-portal; // render at the top when used inside dialog
+    z-index: var(--z-index-menus); // render at the top when used inside dialog
   }
 
   .Select, .Select__menu {

src/renderer/components/table/table-head.scss

@@ -15,9 +15,7 @@
   }
 
   &.sticky {
-    position: -webkit-sticky; // safari
     position: sticky;
-    z-index: 1;
     top: 0;
   }
 

src/renderer/components/tooltip/tooltip.scss

@@ -24,7 +24,7 @@
   text-align: center;
   pointer-events: none;
   transition: opacity 150ms 150ms ease-in-out;
-  z-index: 100000;
+  z-index: var(--z-index-topmost);
   box-shadow: 0 8px 16px rgba(0,0,0,0.24);
   left: 0;
   top: 0;

src/renderer/components/vars.scss

@@ -21,12 +21,6 @@ $font-weight-thin: var(--font-weight-thin);
 $font-weight-normal: var(--font-weight-normal);
 $font-weight-bold: var(--font-weight-bold);
 
-// Z-index correlations
-$zIndex-sidebar-hover: 500;
-$zIndex-select-portal: 300;
-$zIndex-dialog: 200;
-$zIndex-drawer: 100;
-
 // Animation timing functions
 $animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 $animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1);