Different set of z-index css vars

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
lensapp · Dec 13, 2022 · b96cfc9 · b96cfc9
1 parent 27f58e1
commit b96cfc9
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 10 deletions.
diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss
@@ -28,11 +28,10 @@
   --font-weight-bold: 500;
   --main-layout-header: 40px;
 
-  --z-index-behind: -1;
-  --z-index-base: 1;
-  --z-index-base-above: 2;
-  --z-index-middle: 3;
-  --z-index-menus: 4;
+  --z-index-base: 0;
+  --z-index-above: 1;
+  --z-index-modals: 2;
+  --z-index-menus: 3;
   --z-index-topmost: 9999;
 }
 

diff --git a/src/renderer/components/dialog/dialog.scss b/src/renderer/components/dialog/dialog.scss
@@ -12,7 +12,7 @@
   width: 100%;
   height: 100%;
   padding: $unit * 5;
-  z-index: var(--z-index-middle);
+  z-index: var(--z-index-modals);
   overscroll-behavior: none; // prevent swiping with touch-pad on MacOSX
   overflow: auto;
 

diff --git a/src/renderer/components/drawer/drawer.scss b/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: var(--z-index-base-above);
+  z-index: var(--z-index-above);
   height: 100%;
 
   &.left {

diff --git a/src/renderer/components/layout/main-layout.module.scss b/src/renderer/components/layout/main-layout.module.scss
@@ -11,7 +11,6 @@
   grid-template-rows: [contents] 1fr [footer] auto;
   grid-template-columns: [sidebar] var(--sidebar-width) [contents] 1fr;
   width: 100%;
-  z-index: var(--z-index-base);
   height: 100%;
 }
 

diff --git a/src/renderer/components/layout/setting-layout.scss b/src/renderer/components/layout/setting-layout.scss
@@ -10,7 +10,7 @@
   display: grid;
   color: var(--settingsColor);
   position: fixed;
-  z-index: var(--z-index-middle);
+  z-index: var(--z-index-modals);
   left: 0;
   top: 0;
   right: 0;

diff --git a/src/renderer/components/layout/top-bar/top-bar.module.scss b/src/renderer/components/layout/top-bar/top-bar.module.scss
@@ -5,7 +5,7 @@
 
 .topBar {
   background-color: var(--layoutBackground);
-  z-index: var(--z-index-base-above);
+  z-index: var(--z-index-above);
   grid-area: topbar;
   height: var(--main-layout-header);