From 36f2981f7d586cea206e4c143c18cf866a4e3acd Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Thu, 13 Feb 2020 15:09:31 +0100
Subject: Manage z-indexes in variables

---
 client/src/sass/bootstrap.scss          |  8 ++++++--
 client/src/sass/include/_variables.scss | 20 ++++++++++++++++++--
 client/src/sass/loading-bar.scss        |  5 +++--
 client/src/sass/primeng-custom.scss     |  3 +--
 4 files changed, 28 insertions(+), 8 deletions(-)

(limited to 'client/src/sass')

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 {
-- 
cgit v1.2.3