Merge branch 'MDL-72910-master' of git://github.com/rezaies/moodle

theme/boost/scss/moodle/drawer.scss

@@ -10,6 +10,7 @@ $drawer-offscreen-gutter: 20px !default;
 $drawer-bg-color: $gray-100 !default;
 $drawer-scroll-bg-track: $gray-100 !default;
 $drawer-shadow-color: rgba(0, 0, 0, .25) !default;
+$drawer-transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease !default;
 
 :target {
     scroll-margin-top: $fixed-header-y + 10px;
@@ -40,15 +41,16 @@ $drawer-bg: darken($body-bg, 5%) !default;
     -webkit-overflow-scrolling: touch;
     z-index: $zindex-dropdown - 1;
     background-color: $drawer-bg;
-    -webkit-transition: right 0.5s ease, left 0.5s ease;
-    -moz-transition: right 0.5s ease, left 0.5s ease;
-    transition: right 0.5s ease, left 0.5s ease;
+    @include transition(right 0.5s ease, left 0.5s ease);
 }
 
 @include media-breakpoint-up(sm) {
     [data-region="drawer"] {
         padding: $drawer-padding-x $drawer-padding-y;
     }
+    .jsenabled .btn-footer-popover {
+        @include transition($drawer-transition);
+    }
 }
 #nav-drawer {
     right: auto;
@@ -88,9 +90,7 @@ $drawer-bg: darken($body-bg, 5%) !default;
     margin-top: 0;
 }
 body.drawer-ease {
-    -webkit-transition: margin-left 0.5s ease, margin-right 0.5s ease;
-    -moz-transition: margin-left 0.5s ease, margin-right 0.5s ease;
-    transition: margin-left 0.5s ease, margin-right 0.5s ease;
+    @include transition(margin-left 0.5s ease, margin-right 0.5s ease);
 }
 
 body:not(.uses-drawers).drawer-open-left {
@@ -165,7 +165,7 @@ $right-drawer-width: 320px;
 }
 
 @mixin drawer() {
-    transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease;
+    @include transition($drawer-transition);
     background-color: $drawer-bg-color;
     z-index: $zindex-modal;
     position: fixed;

theme/boost/scss/moodle/layout.scss

@@ -5,7 +5,7 @@
         top: 0;
         left: 0;
         z-index: $zindex-modal-backdrop;
-        transition: 0.5s;
+        @include transition(0.5s);
         width: 100vw;
         margin: 0;
         opacity: 1;
@@ -151,7 +151,7 @@
     #page.drawers {
         position: relative;
         overflow-y: auto;
-        transition: 0.2s;
+        @include transition(0.2s);
         height: calc(100vh - #{$navbar-height});
         margin-top: $navbar-height;
         left: 0;
@@ -165,6 +165,9 @@
             margin-left: 0;
             margin-right: $drawer-right-width;
             padding-right: 1rem;
+            .jsenabled & .btn-footer-popover {
+                right: calc(#{$drawer-right-width} + 2rem);
+            }
         }
         &.show-drawer-left.show-drawer-right {
             margin-left: $drawer-left-width;

theme/boost/style/moodle.css

@@ -14669,13 +14669,19 @@ span.editinstructions {
   -webkit-overflow-scrolling: touch;
   z-index: 999;
   background-color: #f2f2f2;
-  -webkit-transition: right 0.5s ease, left 0.5s ease;
-  -moz-transition: right 0.5s ease, left 0.5s ease;
   transition: right 0.5s ease, left 0.5s ease; }
+  @media (prefers-reduced-motion: reduce) {
+    [data-region="drawer"] {
+      transition: none; } }
 
 @media (min-width: 576px) {
   [data-region="drawer"] {
-    padding: 20px 20px; } }
+    padding: 20px 20px; }
+  .jsenabled .btn-footer-popover {
+    transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease; } }
+  @media (min-width: 576px) and (prefers-reduced-motion: reduce) {
+    .jsenabled .btn-footer-popover {
+      transition: none; } }
 
 #nav-drawer {
   right: auto;
@@ -14704,9 +14710,10 @@ span.editinstructions {
   margin-top: 0; }
 
 body.drawer-ease {
-  -webkit-transition: margin-left 0.5s ease, margin-right 0.5s ease;
-  -moz-transition: margin-left 0.5s ease, margin-right 0.5s ease;
   transition: margin-left 0.5s ease, margin-right 0.5s ease; }
+  @media (prefers-reduced-motion: reduce) {
+    body.drawer-ease {
+      transition: none; } }
 
 @media (min-width: 768px) {
   body:not(.uses-drawers).drawer-open-left {
@@ -14768,6 +14775,9 @@ body.drawer-ease {
   position: fixed;
   height: 100vh;
   top: 0; }
+  @media (prefers-reduced-motion: reduce) {
+    .drawer {
+      transition: none; } }
   .drawer.drawer-right {
     width: 315px;
     max-width: 315px;
@@ -14816,7 +14826,12 @@ body.drawer-ease {
     z-index: 1050;
     position: fixed;
     height: 100vh;
-    top: 0; }
+    top: 0; } }
+  @media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
+    .drawer-md {
+      transition: none; } }
+
+@media (max-width: 991.98px) {
     .drawer-md.drawer-right {
       width: 315px;
       max-width: 315px;
@@ -14848,7 +14863,12 @@ body.drawer-ease {
     z-index: 1050;
     position: fixed;
     height: 100vh;
-    top: 0; }
+    top: 0; } }
+  @media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
+    .drawer-sm {
+      transition: none; } }
+
+@media (max-width: 767.98px) {
     .drawer-sm.drawer-right {
       width: 315px;
       max-width: 315px;
@@ -20033,6 +20053,9 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
   margin: 0;
   opacity: 1;
   background-color: #fff; }
+  @media (prefers-reduced-motion: reduce) {
+    .layout.fullscreen {
+      transition: none; } }
   .layout.fullscreen > div {
     height: 100%;
     width: 100%; }
@@ -20134,7 +20157,12 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
     height: calc(100vh - 60px);
     margin-top: 60px;
     left: 0;
-    right: 0; }
+    right: 0; } }
+  @media (min-width: 992px) and (prefers-reduced-motion: reduce) {
+    #page.drawers {
+      transition: none; } }
+
+@media (min-width: 992px) {
     #page.drawers.show-drawer-left {
       margin-left: 285px;
       margin-right: 0;
@@ -20143,6 +20171,8 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
       margin-left: 0;
       margin-right: 315px;
       padding-right: 1rem; }
+      .jsenabled #page.drawers.show-drawer-right .btn-footer-popover {
+        right: calc(315px + 2rem); }
     #page.drawers.show-drawer-left.show-drawer-right {
       margin-left: 285px;
       margin-right: 315px; } }

theme/classic/style/moodle.css

@@ -14669,13 +14669,19 @@ span.editinstructions {
   -webkit-overflow-scrolling: touch;
   z-index: 999;
   background-color: #f2f2f2;
-  -webkit-transition: right 0.5s ease, left 0.5s ease;
-  -moz-transition: right 0.5s ease, left 0.5s ease;
   transition: right 0.5s ease, left 0.5s ease; }
+  @media (prefers-reduced-motion: reduce) {
+    [data-region="drawer"] {
+      transition: none; } }
 
 @media (min-width: 576px) {
   [data-region="drawer"] {
-    padding: 20px 20px; } }
+    padding: 20px 20px; }
+  .jsenabled .btn-footer-popover {
+    transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease; } }
+  @media (min-width: 576px) and (prefers-reduced-motion: reduce) {
+    .jsenabled .btn-footer-popover {
+      transition: none; } }
 
 #nav-drawer {
   right: auto;
@@ -14704,9 +14710,10 @@ span.editinstructions {
   margin-top: 0; }
 
 body.drawer-ease {
-  -webkit-transition: margin-left 0.5s ease, margin-right 0.5s ease;
-  -moz-transition: margin-left 0.5s ease, margin-right 0.5s ease;
   transition: margin-left 0.5s ease, margin-right 0.5s ease; }
+  @media (prefers-reduced-motion: reduce) {
+    body.drawer-ease {
+      transition: none; } }
 
 @media (min-width: 768px) {
   body:not(.uses-drawers).drawer-open-left {
@@ -14768,6 +14775,9 @@ body.drawer-ease {
   position: fixed;
   height: 100vh;
   top: 0; }
+  @media (prefers-reduced-motion: reduce) {
+    .drawer {
+      transition: none; } }
   .drawer.drawer-right {
     width: 315px;
     max-width: 315px;
@@ -14816,7 +14826,12 @@ body.drawer-ease {
     z-index: 1050;
     position: fixed;
     height: 100vh;
-    top: 0; }
+    top: 0; } }
+  @media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
+    .drawer-md {
+      transition: none; } }
+
+@media (max-width: 991.98px) {
     .drawer-md.drawer-right {
       width: 315px;
       max-width: 315px;
@@ -14848,7 +14863,12 @@ body.drawer-ease {
     z-index: 1050;
     position: fixed;
     height: 100vh;
-    top: 0; }
+    top: 0; } }
+  @media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
+    .drawer-sm {
+      transition: none; } }
+
+@media (max-width: 767.98px) {
     .drawer-sm.drawer-right {
       width: 315px;
       max-width: 315px;
@@ -19979,6 +19999,9 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
   margin: 0;
   opacity: 1;
   background-color: #fff; }
+  @media (prefers-reduced-motion: reduce) {
+    .layout.fullscreen {
+      transition: none; } }
   .layout.fullscreen > div {
     height: 100%;
     width: 100%; }
@@ -20080,7 +20103,12 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
     height: calc(100vh - 50px);
     margin-top: 50px;
     left: 0;
-    right: 0; }
+    right: 0; } }
+  @media (min-width: 992px) and (prefers-reduced-motion: reduce) {
+    #page.drawers {
+      transition: none; } }
+
+@media (min-width: 992px) {
     #page.drawers.show-drawer-left {
       margin-left: 285px;
       margin-right: 0;
@@ -20089,6 +20117,8 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
       margin-left: 0;
       margin-right: 315px;
       padding-right: 1rem; }
+      .jsenabled #page.drawers.show-drawer-right .btn-footer-popover {
+        right: calc(315px + 2rem); }
     #page.drawers.show-drawer-left.show-drawer-right {
       margin-left: 285px;
       margin-right: 315px; } }