Manage z-indexes in variables

3 files changed, 6 insertions, 4 deletions

diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 51a7a3dd1..7a6710829 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -16,12 +16,12 @@
   top: 0;
   width: 100%;
   background-color: var(--mainBackgroundColor);
-  z-index: 1000;
+  z-index: z(header);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
   display: flex;
 
   .top-left-block {
-    z-index: 1001;
+    z-index: z(headerLeft);
     height: $header-height;
     display: flex;
     align-items: center;
diff --git a/client/src/app/core/hotkeys/hotkeys.component.scss b/client/src/app/core/hotkeys/hotkeys.component.scss
index 3aa0b6252..02c8c59aa 100644
--- a/client/src/app/core/hotkeys/hotkeys.component.scss
+++ b/client/src/app/core/hotkeys/hotkeys.component.scss
@@ -1,3 +1,5 @@
+@import '_mixins';
+
 .cfp-hotkeys-container {
   display: flex !important;
   align-items: center;
@@ -23,7 +25,7 @@
 }
 
 .cfp-hotkeys-container.fade.in {
-  z-index: 10002;
+  z-index: z(hotkeys);
   visibility: visible;
   opacity: 1;
 }
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index dd718a091..43654504c 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -6,7 +6,7 @@
   height: calc(100vh - #{$header-height});
   padding: 0;
   width: $menu-width;
-  z-index: 11000;
+  z-index: z(menu);
 }
 
 menu {