Manage z-indexes in variables

diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 51a7a3dd1df1dddbb02fbc72407b2e3ae18aab65..7a6710829efcdba6ae293c329c3b6903efeebc8d 100644 (file)
--- 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 3aa0b625266e4531260bf06b513ae938051f29e7..02c8c59aa7a34c3786c0141a487c65bf746479cb 100644 (file)
--- 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 dd718a091879b5af317035b3e72064dc4b48c1c0..43654504c4f5696c8f19debf0bb22567d5dded44 100644 (file)
--- 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 {

diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 035270e89f08f08a340bbbafde03e876e43f9803..a17d9c048ece061f83898c463850ae94fd9c8266 100644 (file)
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -19,7 +19,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 }
 
 .dropdown {
-  z-index: 10001 !important;
+  z-index: z(dropdown) !important;
 }
 
 .dropdown-menu {
@@ -176,7 +176,11 @@ ngb-tabset.bootstrap {
 }
 
 ngb-modal-backdrop {
-  z-index: 10000 !important;
+  z-index: z(modal) - 1 !important;
+}
+
+ngb-modal-window {
+  z-index: z(modal) !important;
 }
 
 .btn-outline-tertiary {

diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index e087a25482e654e5181afb4b52969345ff23aa1d..d0e1a8c9caf2f32bda493977cf4e430fa9a26184 100644 (file)
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -93,8 +93,24 @@ $variables: (
   --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)
 );
 
-/*** theme helper ***/
-
 @function var($variable) {
   @return map-get($variables, $variable);
 }
+
+/*** z-index groups ***/
+
+$zindex: (
+  header       :  1000,
+    /* header context */
+    headerLeft :    10,
+  menu         : 11000,
+  dropdown     : 12000,
+  loadbar      : 13000,
+  modal        : 14000,
+  notification : 15000,
+  hotkeys      : 16000
+);
+
+@function z($label) {
+  @return map-get($zindex, $label);
+}

diff --git a/client/src/sass/loading-bar.scss b/client/src/sass/loading-bar.scss
index 7d687d479c81bb942fc83aad2eef5c5cd035b401..d584b7c67bf3301ef20840c2d1b4abd5d9378d31 100644 (file)
--- a/client/src/sass/loading-bar.scss
+++ b/client/src/sass/loading-bar.scss
@@ -1,3 +1,4 @@
+@import '_mixins';
 // Thanks: https://github.com/aitboudad/ngx-loading-bar/blob/master/loading-bar.css
 
 /* Make clicks pass-through */
@@ -20,7 +21,7 @@
 
   background: var(--mainColor);
   position: fixed;
-  z-index: 10002;
+  z-index: z(loadbar);
   top: 0;
   left: 0;
   width: 100%;
@@ -50,7 +51,7 @@
 #loading-bar-spinner {
   display: block;
   position: fixed;
-  z-index: 10002;
+  z-index: z(loadbar);
   top: 10px;
   left: 10px;
 }

diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 753fdf5c97298a7670f9b9a2ed51878c51c8f7ff..4d2d6cb67669391d14d5d3f63157973b318d042b 100644 (file)
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -383,8 +383,7 @@ p-inputswitch {
 
 p-toast {
   .ui-toast {
-    // Modal is 10005
-    z-index: 10010 !important;
+    z-index: z(notification) !important;
   }
 
   .ui-toast-message {