Manage z-indexes in variables

4 files changed, 28 insertions, 8 deletions

diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 035270e89..a17d9c048 100644
--- 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 e087a2548..d0e1a8c9c 100644
--- 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 7d687d479..d584b7c67 100644
--- 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 753fdf5c9..4d2d6cb67 100644
--- 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 {