fix and group the z-indexes

ot_templating/Resources/Public/assets/style/common/_base.scss

@@ -8,7 +8,4 @@ a {
   text-decoration: none;
 }
 
-// Ensures the jquery-ui datepicker is above anything else (even leaflet maps)
-.ui-datepicker {
-  z-index:9998 !important;
-}
+

ot_templating/Resources/Public/assets/style/common/_layout.scss

@@ -27,3 +27,19 @@ body {
   width: 15%;
   min-width: 185px;
 }
+
+
+// Z indexes
+
+// Ensures the jquery-ui datepicker is above anything else (even leaflet maps)
+.ui-datepicker {
+  z-index:9990 !important;
+}
+
+#menu {
+  z-index: 9991;
+}
+
+#login-popup .popup-form {
+  z-index: 9992;
+}

ot_templating/Resources/Public/assets/style/common/module/_menu.scss

@@ -31,7 +31,7 @@ $submenu-item-height: 30px;
   margin: 0 0 1em;
 
   position: relative;
-  z-index: 9999;
+
 }
 
 #menu:after {

ot_templating/Resources/Public/assets/style/common/module/_user-toolbar.scss

@@ -88,7 +88,6 @@ $user-toolbar-popup-background-color: $user-toolbar-popup-background-color;
   position: absolute;
   right: 0;
   top: 1em;
-  z-index: 1;
 }
 
 /* Toggle this class when clicking on the popup container (hide and show the popup) */

ot_templating/Resources/Public/assets/style/style.css

@@ -7,10 +7,6 @@ a {
   text-decoration: none;
 }
 
-.ui-datepicker {
-  z-index: 9998 !important;
-}
-
 .alert {
   color: #e60000;
   font-weight: bold;
@@ -53,6 +49,18 @@ body {
   min-width: 185px;
 }
 
+.ui-datepicker {
+  z-index: 9990 !important;
+}
+
+#menu {
+  z-index: 9991;
+}
+
+#login-popup .popup-form {
+  z-index: 9992;
+}
+
 .dropdown {
   position: relative;
   display: inline-block;
@@ -144,7 +152,6 @@ ul.dropdown-left {
   align-items: center;
   margin: 0 0 1em;
   position: relative;
-  z-index: 9999;
 }
 
 #menu:after {
@@ -477,7 +484,6 @@ footer .logo-ot {
   position: absolute;
   right: 0;
   top: 1em;
-  z-index: 1;
 }
 
 /* Toggle this class when clicking on the popup container (hide and show the popup) */

ot_templating/Resources/Public/assets/style/theme-blue.css

@@ -7,10 +7,6 @@ a {
   text-decoration: none;
 }
 
-.ui-datepicker {
-  z-index: 9998 !important;
-}
-
 .alert {
   color: #e60000;
   font-weight: bold;
@@ -53,6 +49,18 @@ body {
   min-width: 185px;
 }
 
+.ui-datepicker {
+  z-index: 9990 !important;
+}
+
+#menu {
+  z-index: 9991;
+}
+
+#login-popup .popup-form {
+  z-index: 9992;
+}
+
 .dropdown {
   position: relative;
   display: inline-block;
@@ -144,7 +152,6 @@ ul.dropdown-left {
   align-items: center;
   margin: 0 0 1em;
   position: relative;
-  z-index: 9999;
 }
 
 #menu:after {
@@ -477,7 +484,6 @@ footer .logo-ot {
   position: absolute;
   right: 0;
   top: 1em;
-  z-index: 1;
 }
 
 /* Toggle this class when clicking on the popup container (hide and show the popup) */

ot_templating/Resources/Public/assets/style/theme-green.css

@@ -7,10 +7,6 @@ a {
   text-decoration: none;
 }
 
-.ui-datepicker {
-  z-index: 9998 !important;
-}
-
 .alert {
   color: #e60000;
   font-weight: bold;
@@ -53,6 +49,18 @@ body {
   min-width: 185px;
 }
 
+.ui-datepicker {
+  z-index: 9990 !important;
+}
+
+#menu {
+  z-index: 9991;
+}
+
+#login-popup .popup-form {
+  z-index: 9992;
+}
+
 .dropdown {
   position: relative;
   display: inline-block;
@@ -144,7 +152,6 @@ ul.dropdown-left {
   align-items: center;
   margin: 0 0 1em;
   position: relative;
-  z-index: 9999;
 }
 
 #menu:after {
@@ -477,7 +484,6 @@ footer .logo-ot {
   position: absolute;
   right: 0;
   top: 1em;
-  z-index: 1;
 }
 
 /* Toggle this class when clicking on the popup container (hide and show the popup) */

ot_templating/Resources/Public/assets/style/theme-grey.css

@@ -7,10 +7,6 @@ a {
   text-decoration: none;
 }
 
-.ui-datepicker {
-  z-index: 9998 !important;
-}
-
 .alert {
   color: #e60000;
   font-weight: bold;
@@ -53,6 +49,18 @@ body {
   min-width: 185px;
 }
 
+.ui-datepicker {
+  z-index: 9990 !important;
+}
+
+#menu {
+  z-index: 9991;
+}
+
+#login-popup .popup-form {
+  z-index: 9992;
+}
+
 .dropdown {
   position: relative;
   display: inline-block;
@@ -144,7 +152,6 @@ ul.dropdown-left {
   align-items: center;
   margin: 0 0 1em;
   position: relative;
-  z-index: 9999;
 }
 
 #menu:after {
@@ -477,7 +484,6 @@ footer .logo-ot {
   position: absolute;
   right: 0;
   top: 1em;
-  z-index: 1;
 }
 
 /* Toggle this class when clicking on the popup container (hide and show the popup) */

ot_templating/Resources/Public/assets/style/theme-light-blue.css

@@ -7,10 +7,6 @@ a {
   text-decoration: none;
 }
 
-.ui-datepicker {
-  z-index: 9998 !important;
-}
-
 .alert {
   color: #e60000;
   font-weight: bold;
@@ -53,6 +49,18 @@ body {
   min-width: 185px;
 }
 
+.ui-datepicker {
+  z-index: 9990 !important;
+}
+
+#menu {
+  z-index: 9991;
+}
+
+#login-popup .popup-form {
+  z-index: 9992;
+}
+
 .dropdown {
   position: relative;
   display: inline-block;
@@ -144,7 +152,6 @@ ul.dropdown-left {
   align-items: center;
   margin: 0 0 1em;
   position: relative;
-  z-index: 9999;
 }
 
 #menu:after {
@@ -477,7 +484,6 @@ footer .logo-ot {
   position: absolute;
   right: 0;
   top: 1em;
-  z-index: 1;
 }
 
 /* Toggle this class when clicking on the popup container (hide and show the popup) */

ot_templating/Resources/Public/assets/style/theme-light-red.css

@@ -7,10 +7,6 @@ a {
   text-decoration: none;
 }
 
-.ui-datepicker {
-  z-index: 9998 !important;
-}
-
 .alert {
   color: #e60000;
   font-weight: bold;
@@ -53,6 +49,18 @@ body {
   min-width: 185px;
 }
 
+.ui-datepicker {
+  z-index: 9990 !important;
+}
+
+#menu {
+  z-index: 9991;
+}
+
+#login-popup .popup-form {
+  z-index: 9992;
+}
+
 .dropdown {
   position: relative;
   display: inline-block;
@@ -144,7 +152,6 @@ ul.dropdown-left {
   align-items: center;
   margin: 0 0 1em;
   position: relative;
-  z-index: 9999;
 }
 
 #menu:after {
@@ -477,7 +484,6 @@ footer .logo-ot {
   position: absolute;
   right: 0;
   top: 1em;
-  z-index: 1;
 }
 
 /* Toggle this class when clicking on the popup container (hide and show the popup) */

ot_templating/Resources/Public/assets/style/theme-orange.css

@@ -7,10 +7,6 @@ a {
   text-decoration: none;
 }
 
-.ui-datepicker {
-  z-index: 9998 !important;
-}
-
 .alert {
   color: #e60000;
   font-weight: bold;
@@ -53,6 +49,18 @@ body {
   min-width: 185px;
 }
 
+.ui-datepicker {
+  z-index: 9990 !important;
+}
+
+#menu {
+  z-index: 9991;
+}
+
+#login-popup .popup-form {
+  z-index: 9992;
+}
+
 .dropdown {
   position: relative;
   display: inline-block;
@@ -144,7 +152,6 @@ ul.dropdown-left {
   align-items: center;
   margin: 0 0 1em;
   position: relative;
-  z-index: 9999;
 }
 
 #menu:after {
@@ -477,7 +484,6 @@ footer .logo-ot {
   position: absolute;
   right: 0;
   top: 1em;
-  z-index: 1;
 }
 
 /* Toggle this class when clicking on the popup container (hide and show the popup) */

ot_templating/Resources/Public/assets/style/theme-purple.css

@@ -7,10 +7,6 @@ a {
   text-decoration: none;
 }
 
-.ui-datepicker {
-  z-index: 9998 !important;
-}
-
 .alert {
   color: #e60000;
   font-weight: bold;
@@ -53,6 +49,18 @@ body {
   min-width: 185px;
 }
 
+.ui-datepicker {
+  z-index: 9990 !important;
+}
+
+#menu {
+  z-index: 9991;
+}
+
+#login-popup .popup-form {
+  z-index: 9992;
+}
+
 .dropdown {
   position: relative;
   display: inline-block;
@@ -144,7 +152,6 @@ ul.dropdown-left {
   align-items: center;
   margin: 0 0 1em;
   position: relative;
-  z-index: 9999;
 }
 
 #menu:after {
@@ -477,7 +484,6 @@ footer .logo-ot {
   position: absolute;
   right: 0;
   top: 1em;
-  z-index: 1;
 }
 
 /* Toggle this class when clicking on the popup container (hide and show the popup) */

ot_templating/Resources/Public/assets/style/theme-red.css

@@ -7,10 +7,6 @@ a {
   text-decoration: none;
 }
 
-.ui-datepicker {
-  z-index: 9998 !important;
-}
-
 .alert {
   color: #e60000;
   font-weight: bold;
@@ -53,6 +49,18 @@ body {
   min-width: 185px;
 }
 
+.ui-datepicker {
+  z-index: 9990 !important;
+}
+
+#menu {
+  z-index: 9991;
+}
+
+#login-popup .popup-form {
+  z-index: 9992;
+}
+
 .dropdown {
   position: relative;
   display: inline-block;
@@ -144,7 +152,6 @@ ul.dropdown-left {
   align-items: center;
   margin: 0 0 1em;
   position: relative;
-  z-index: 9999;
 }
 
 #menu:after {
@@ -477,7 +484,6 @@ footer .logo-ot {
   position: absolute;
   right: 0;
   top: 1em;
-  z-index: 1;
 }
 
 /* Toggle this class when clicking on the popup container (hide and show the popup) */