Position the modal over the navbar (#14270)

OrchardCMS · Sep 5, 2023 · 41f9fc8 · 41f9fc8
1 parent 0f413d3
commit 41f9fc8
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 21 deletions.
diff --git a/src/OrchardCore.Themes/TheAdmin/Assets/scss/admin.scss b/src/OrchardCore.Themes/TheAdmin/Assets/scss/admin.scss
@@ -1,5 +1,7 @@
 @use 'sass:math';
 
+@import "modules/admin/_variables.scss";
+
 html[data-theme='default'] {
     @import "modules/theme/default/_variables.scss";
     @import "../../node_modules/bootstrap/scss/bootstrap";

diff --git a/src/OrchardCore.Themes/TheAdmin/Assets/scss/modules/admin/_navbar.scss b/src/OrchardCore.Themes/TheAdmin/Assets/scss/modules/admin/_navbar.scss
@@ -105,7 +105,7 @@ body:not(.left-sidebar-compact) {
 
 .action-bar {
     top: 3.3rem;
-    z-index: 1050;
+    z-index: calc(#{$zindex-sticky} + 50);
 }
 
 .user-top-navbar {

diff --git a/src/OrchardCore.Themes/TheAdmin/Assets/scss/modules/admin/_variables.scss b/src/OrchardCore.Themes/TheAdmin/Assets/scss/modules/admin/_variables.scss
@@ -0,0 +1,6 @@
+// Global variables to override Bootstrap variables.
+// Because !default means that a variable is not assigned if it already contains a value,
+// we alter the variable before importing boostrap as _variables.scss will use !default
+
+$zindex-sticky: 1000;
+$zindex-modal: 1150; /* modal's z-index should be heigher than the z-index for the top-navbar (i.e, $zindex-sticky + 100) and the side menu (i.e, $zindex-sticky + 50) */
diff --git a/src/OrchardCore.Themes/TheAdmin/Assets/scss/modules/theme/darkmode/_admin-variables.scss b/src/OrchardCore.Themes/TheAdmin/Assets/scss/modules/theme/darkmode/_admin-variables.scss
@@ -6,7 +6,6 @@ $left-navigation-width: 260px;
 $left-navigation-width-when-compact: 48px;
 $border-content: 1px solid rgb(57, 62, 64);
 $link-padding-left: 16px !default;
-$zindex-sticky: 1000;
 $admin-menu-bg-color: rgb(36, 39, 40);
 $admin-menu-font-color: rgb(181, 175, 166);
 $admin-menu-font-color-hover: rgb(181, 175, 166);

diff --git a/src/OrchardCore.Themes/TheAdmin/Assets/scss/modules/theme/default/_admin-variables.scss b/src/OrchardCore.Themes/TheAdmin/Assets/scss/modules/theme/default/_admin-variables.scss
@@ -6,7 +6,6 @@ $left-navigation-width: 260px;
 $left-navigation-width-when-compact: 48px;
 $border-content: 1px solid #dedede;
 $link-padding-left: 16px !default;
-$zindex-sticky: 1000;
 $admin-menu-bg-color: #eaeaea;
 $admin-menu-font-color: $gray-800;
 $admin-menu-font-color-hover: $gray-100;

diff --git a/src/OrchardCore.Themes/TheAdmin/wwwroot/css/TheAdmin.css b/src/OrchardCore.Themes/TheAdmin/wwwroot/css/TheAdmin.css
@@ -1,4 +1,5 @@
 @charset "UTF-8";
+/* modal's z-index should be heigher than the z-index for the top-navbar (i.e, $zindex-sticky + 100) and the side menu (i.e, $zindex-sticky + 50) */
 html[data-theme=default] {
   /*!
    * Bootstrap v5.1.3 (https://getbootstrap.com/)
@@ -6308,7 +6309,7 @@ html[dir][data-theme=default] .toast-body {
 html[data-theme=default] .modal {
   position: fixed;
   top: 0;
-  z-index: 1055;
+  z-index: 1150;
   display: none;
   width: 100%;
   height: 100%;
@@ -7567,41 +7568,41 @@ html[dir=rtl][data-theme=default] .fixed-bottom {
 html[data-theme=default] .sticky-top {
   position: sticky;
   top: 0;
-  z-index: 1020;
+  z-index: 1000;
 }
 @media (min-width: 576px) {
   html[data-theme=default] .sticky-sm-top {
     position: sticky;
     top: 0;
-    z-index: 1020;
+    z-index: 1000;
   }
 }
 @media (min-width: 768px) {
   html[data-theme=default] .sticky-md-top {
     position: sticky;
     top: 0;
-    z-index: 1020;
+    z-index: 1000;
   }
 }
 @media (min-width: 992px) {
   html[data-theme=default] .sticky-lg-top {
     position: sticky;
     top: 0;
-    z-index: 1020;
+    z-index: 1000;
   }
 }
 @media (min-width: 1200px) {
   html[data-theme=default] .sticky-xl-top {
     position: sticky;
     top: 0;
-    z-index: 1020;
+    z-index: 1000;
   }
 }
 @media (min-width: 1400px) {
   html[data-theme=default] .sticky-xxl-top {
     position: sticky;
     top: 0;
-    z-index: 1020;
+    z-index: 1000;
   }
 }
 html[data-theme=default] .hstack {
@@ -27785,7 +27786,7 @@ html[dir=rtl][data-theme=default] .left-sidebar-compact .ta-navbar-top h1, html[
 }
 html[data-theme=default] .action-bar {
   top: 3.3rem;
-  z-index: 1050;
+  z-index: calc(1000 + 50);
 }
 html[dir][data-theme=default] .user-top-navbar {
   padding-top: 0;
@@ -35723,7 +35724,7 @@ html[dir][data-theme=darkmode] .toast-body {
 html[data-theme=darkmode] .modal {
   position: fixed;
   top: 0;
-  z-index: 1055;
+  z-index: 1150;
   display: none;
   width: 100%;
   height: 100%;
@@ -36982,41 +36983,41 @@ html[dir=rtl][data-theme=darkmode] .fixed-bottom {
 html[data-theme=darkmode] .sticky-top {
   position: sticky;
   top: 0;
-  z-index: 1020;
+  z-index: 1000;
 }
 @media (min-width: 576px) {
   html[data-theme=darkmode] .sticky-sm-top {
     position: sticky;
     top: 0;
-    z-index: 1020;
+    z-index: 1000;
   }
 }
 @media (min-width: 768px) {
   html[data-theme=darkmode] .sticky-md-top {
     position: sticky;
     top: 0;
-    z-index: 1020;
+    z-index: 1000;
   }
 }
 @media (min-width: 992px) {
   html[data-theme=darkmode] .sticky-lg-top {
     position: sticky;
     top: 0;
-    z-index: 1020;
+    z-index: 1000;
   }
 }
 @media (min-width: 1200px) {
   html[data-theme=darkmode] .sticky-xl-top {
     position: sticky;
     top: 0;
-    z-index: 1020;
+    z-index: 1000;
   }
 }
 @media (min-width: 1400px) {
   html[data-theme=darkmode] .sticky-xxl-top {
     position: sticky;
     top: 0;
-    z-index: 1020;
+    z-index: 1000;
   }
 }
 html[data-theme=darkmode] .hstack {
@@ -57203,7 +57204,7 @@ html[dir=rtl][data-theme=darkmode] .left-sidebar-compact .ta-navbar-top h1, html
 }
 html[data-theme=darkmode] .action-bar {
   top: 3.3rem;
-  z-index: 1050;
+  z-index: calc(1000 + 50);
 }
 html[dir][data-theme=darkmode] .user-top-navbar {
   padding-top: 0;

diff --git a/src/OrchardCore.Themes/TheAdmin/wwwroot/css/TheAdmin.min.css b/src/OrchardCore.Themes/TheAdmin/wwwroot/css/TheAdmin.min.css