Merge branch 'MDL-79570-master' of https://github.com/ferranrecio/moodle

admin/tool/usertours/amd/src/tour.js

@@ -1645,18 +1645,15 @@ const Tour = class {
                 if (targetNode.parents('[data-region="fixed-drawer"]').length || !stepConfig.zIndex) {
                     let targetClone = targetNode.clone();
                     background.append(targetClone.first());
-                }
-
-                if (stepConfig.zIndex) {
+                    $('body').append(fader);
+                    $('body').append(background);
+                } else {
                     if (stepConfig.attachPoint === 'append') {
                         stepConfig.attachTo.append(background);
                     } else {
                         fader.insertAfter(stepConfig.attachTo);
                         background.insertAfter(stepConfig.attachTo);
                     }
-                } else {
-                    $('body').append(fader);
-                    $('body').append(background);
                 }
 
                 // Add the backdrop data to the actual target.

theme/boost/scss/moodle/drawer.scss

@@ -161,7 +161,16 @@ $right-drawer-width: 320px;
 
 @mixin drawer() {
     background-color: $drawer-bg-color;
-    z-index: $zindex-fixed;
+    // Drawers has a z-index higher than the page content,
+    // lower than the top navbar and the sticky footer,
+    // and lower to the message drawer.
+    z-index: $zindex-sticky - 5;
+
+    @include media-breakpoint-down(md) {
+        // In small screens the drawer goes over the top navbar with a modal with a backdrop effect.
+        z-index: $zindex-fixed + 5;
+    }
+
     position: fixed;
     height: 100vh;
     top: 0;
@@ -223,8 +232,6 @@ $right-drawer-width: 320px;
 
 @include media-breakpoint-up(lg) {
     .drawer {
-        // Make sure that in large screens the drawer goes under the drop down menus.
-        z-index: inherit;
 
         // Workaround to display the skip link elements from the blocks drawer infront of the navbar.
         // As the skip link is in a fixed position and z-index for this element is ignored

theme/boost/style/moodle.css

@@ -30089,11 +30089,16 @@ body.drawer-ease {
 
 .drawer {
   background-color: #f8f9fa;
-  z-index: 1030;
+  z-index: 1015;
   position: fixed;
   height: 100vh;
   top: 0;
 }
+@media (max-width: 991.98px) {
+  .drawer {
+    z-index: 1035;
+  }
+}
 .drawer.not-initialized {
   display: none;
 }
@@ -30145,9 +30150,6 @@ body.drawer-ease {
 }
 
 @media (min-width: 992px) {
-  .drawer {
-    z-index: inherit;
-  }
   .drawer#theme_boost-drawers-blocks:focus-within {
     z-index: 1031;
   }
@@ -30175,14 +30177,23 @@ body.drawer-ease {
   .drawer-md {
     display: block;
     background-color: #f8f9fa;
-    z-index: 1030;
+    z-index: 1015;
     position: fixed;
     height: 100vh;
     top: 0;
   }
+}
+@media (max-width: 991.98px) and (max-width: 991.98px) {
+  .drawer-md {
+    z-index: 1035;
+  }
+}
+@media (max-width: 991.98px) {
   .drawer-md.not-initialized {
     display: none;
   }
+}
+@media (max-width: 991.98px) {
   .drawer-md.drawer-right {
     transition: right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease;
     width: 315px;
@@ -30246,14 +30257,23 @@ body.drawer-ease {
   .drawer-sm {
     display: block;
     background-color: #f8f9fa;
-    z-index: 1030;
+    z-index: 1015;
     position: fixed;
     height: 100vh;
     top: 0;
   }
+}
+@media (max-width: 767.98px) and (max-width: 991.98px) {
+  .drawer-sm {
+    z-index: 1035;
+  }
+}
+@media (max-width: 767.98px) {
   .drawer-sm.not-initialized {
     display: none;
   }
+}
+@media (max-width: 767.98px) {
   .drawer-sm.drawer-right {
     transition: right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease;
     width: 315px;

theme/classic/style/moodle.css

@@ -30089,11 +30089,16 @@ body.drawer-ease {
 
 .drawer {
   background-color: #f8f9fa;
-  z-index: 1030;
+  z-index: 1015;
   position: fixed;
   height: 100vh;
   top: 0;
 }
+@media (max-width: 991.98px) {
+  .drawer {
+    z-index: 1035;
+  }
+}
 .drawer.not-initialized {
   display: none;
 }
@@ -30145,9 +30150,6 @@ body.drawer-ease {
 }
 
 @media (min-width: 992px) {
-  .drawer {
-    z-index: inherit;
-  }
   .drawer#theme_boost-drawers-blocks:focus-within {
     z-index: 1031;
   }
@@ -30175,14 +30177,23 @@ body.drawer-ease {
   .drawer-md {
     display: block;
     background-color: #f8f9fa;
-    z-index: 1030;
+    z-index: 1015;
     position: fixed;
     height: 100vh;
     top: 0;
   }
+}
+@media (max-width: 991.98px) and (max-width: 991.98px) {
+  .drawer-md {
+    z-index: 1035;
+  }
+}
+@media (max-width: 991.98px) {
   .drawer-md.not-initialized {
     display: none;
   }
+}
+@media (max-width: 991.98px) {
   .drawer-md.drawer-right {
     transition: right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease;
     width: 315px;
@@ -30246,14 +30257,23 @@ body.drawer-ease {
   .drawer-sm {
     display: block;
     background-color: #f8f9fa;
-    z-index: 1030;
+    z-index: 1015;
     position: fixed;
     height: 100vh;
     top: 0;
   }
+}
+@media (max-width: 767.98px) and (max-width: 991.98px) {
+  .drawer-sm {
+    z-index: 1035;
+  }
+}
+@media (max-width: 767.98px) {
   .drawer-sm.not-initialized {
     display: none;
   }
+}
+@media (max-width: 767.98px) {
   .drawer-sm.drawer-right {
     transition: right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease, transform 0.5s ease;
     width: 315px;