From 79975c9a7f2fcae0dcb2fa1f2a3dedf6d8470fa7 Mon Sep 17 00:00:00 2001
From: Bas Brands <bas@moodle.com>
Date: Wed, 17 Nov 2021 15:43:16 +0100
Subject: [PATCH] MDL-73092 theme_boost: increase right drawer width

---
 theme/boost/scss/moodle/drawer.scss | 21 +++++++++---------
 theme/boost/scss/moodle/layout.scss |  8 +++----
 theme/boost/style/moodle.css        | 33 ++++++++++++++++-------------
 theme/classic/style/moodle.css      | 33 ++++++++++++++++-------------
 4 files changed, 51 insertions(+), 44 deletions(-)

diff --git a/theme/boost/scss/moodle/drawer.scss b/theme/boost/scss/moodle/drawer.scss
index bf33f525c16..748bb841d2d 100644
--- a/theme/boost/scss/moodle/drawer.scss
+++ b/theme/boost/scss/moodle/drawer.scss
@@ -2,6 +2,8 @@
 $fixed-header-y: $navbar-height;
 
 $drawer-width: 285px !default;
+$drawer-left-width: 285px !default;
+$drawer-right-width: 315px !default;
 $drawer-padding-x: 20px !default;
 $drawer-padding-y: 20px !default;
 $drawer-offscreen-gutter: 20px !default;
@@ -90,20 +92,20 @@ body.drawer-ease {
 
 body:not(.uses-drawers).drawer-open-left {
     @include media-breakpoint-up(md) {
-        margin-left: $drawer-width;
+        margin-left: $drawer-left-width;
     }
 }
 
 body.drawer-open-left #page.drawers {
     @include media-breakpoint-up(md) {
-        margin-left: $drawer-width;
+        margin-left: $drawer-left-width;
         padding-left: 1rem;
     }
 }
 
 body.drawer-open-right {
     @include media-breakpoint-up(md) {
-        margin-right: $drawer-width;
+        margin-right: $drawer-right-width;
     }
 }
 
@@ -169,22 +171,21 @@ $right-drawer-width: 320px;
 }
 
 @mixin drawertypes() {
-    &.drawer-left,
-    &.drawer-right {
-        width: $drawer-width;
-        max-width: $drawer-width;
-    }
     &.drawer-right {
+        width: $drawer-right-width;
+        max-width: $drawer-right-width;
         border-left: $border-width solid $border-color;
-        right: calc(-#{$drawer-width} + -10px);
+        right: calc(-#{$drawer-right-width} + -10px);
         @include box-shadow($box-shadow-drawer-right);
         &.show {
             right: 0;
         }
     }
     &.drawer-left {
+        width: $drawer-left-width;
+        max-width: $drawer-left-width;
         border-right: $border-width solid $border-color;
-        left: calc(-#{$drawer-width} + -10px);
+        left: calc(-#{$drawer-left-width} + -10px);
         @include box-shadow($box-shadow-drawer-left);
         &.show {
             left: 0;
diff --git a/theme/boost/scss/moodle/layout.scss b/theme/boost/scss/moodle/layout.scss
index 77bf949fd4e..db1e1fdf76b 100644
--- a/theme/boost/scss/moodle/layout.scss
+++ b/theme/boost/scss/moodle/layout.scss
@@ -144,18 +144,18 @@
         left: 0;
         right: 0;
         &.show-drawer-left {
-            margin-left: $drawer-width;
+            margin-left: $drawer-left-width;
             margin-right: 0;
             padding-left: 1rem;
         }
         &.show-drawer-right {
             margin-left: 0;
-            margin-right: $drawer-width;
+            margin-right: $drawer-right-width;
             padding-right: 1rem;
         }
         &.show-drawer-left.show-drawer-right {
-            margin-left: $drawer-width;
-            margin-right: $drawer-width;
+            margin-left: $drawer-left-width;
+            margin-right: $drawer-right-width;
         }
     }
 }
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 0926fb7ae73..dbed9babd71 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -14667,7 +14667,7 @@ body.drawer-ease {
 
 @media (min-width: 768px) {
   body.drawer-open-right {
-    margin-right: 285px; } }
+    margin-right: 315px; } }
 
 [data-region=right-hand-drawer] {
   display: flex;
@@ -14716,15 +14716,16 @@ body.drawer-ease {
   position: fixed;
   height: 100vh;
   top: 0; }
-  .drawer.drawer-left, .drawer.drawer-right {
-    width: 285px;
-    max-width: 285px; }
   .drawer.drawer-right {
+    width: 315px;
+    max-width: 315px;
     border-left: 1px solid #dee2e6;
-    right: calc(-285px + -10px); }
+    right: calc(-315px + -10px); }
     .drawer.drawer-right.show {
       right: 0; }
   .drawer.drawer-left {
+    width: 285px;
+    max-width: 285px;
     border-right: 1px solid #dee2e6;
     left: calc(-285px + -10px); }
     .drawer.drawer-left.show {
@@ -14751,15 +14752,16 @@ body.drawer-ease {
     position: fixed;
     height: 100vh;
     top: 0; }
-    .drawer-md.drawer-left, .drawer-md.drawer-right {
-      width: 285px;
-      max-width: 285px; }
     .drawer-md.drawer-right {
+      width: 315px;
+      max-width: 315px;
       border-left: 1px solid #dee2e6;
-      right: calc(-285px + -10px); }
+      right: calc(-315px + -10px); }
       .drawer-md.drawer-right.show {
         right: 0; }
     .drawer-md.drawer-left {
+      width: 285px;
+      max-width: 285px;
       border-right: 1px solid #dee2e6;
       left: calc(-285px + -10px); }
       .drawer-md.drawer-left.show {
@@ -14778,15 +14780,16 @@ body.drawer-ease {
     position: fixed;
     height: 100vh;
     top: 0; }
-    .drawer-sm.drawer-left, .drawer-sm.drawer-right {
-      width: 285px;
-      max-width: 285px; }
     .drawer-sm.drawer-right {
+      width: 315px;
+      max-width: 315px;
       border-left: 1px solid #dee2e6;
-      right: calc(-285px + -10px); }
+      right: calc(-315px + -10px); }
       .drawer-sm.drawer-right.show {
         right: 0; }
     .drawer-sm.drawer-left {
+      width: 285px;
+      max-width: 285px;
       border-right: 1px solid #dee2e6;
       left: calc(-285px + -10px); }
       .drawer-sm.drawer-left.show {
@@ -20076,11 +20079,11 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
       padding-left: 1rem; }
     #page.drawers.show-drawer-right {
       margin-left: 0;
-      margin-right: 285px;
+      margin-right: 315px;
       padding-right: 1rem; }
     #page.drawers.show-drawer-left.show-drawer-right {
       margin-left: 285px;
-      margin-right: 285px; } }
+      margin-right: 315px; } }
 
 .drawercontrolbuttons {
   margin-top: 92px; }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index c46cd2bdbaf..d4f2d2a101d 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -14667,7 +14667,7 @@ body.drawer-ease {
 
 @media (min-width: 768px) {
   body.drawer-open-right {
-    margin-right: 285px; } }
+    margin-right: 315px; } }
 
 [data-region=right-hand-drawer] {
   display: flex;
@@ -14716,15 +14716,16 @@ body.drawer-ease {
   position: fixed;
   height: 100vh;
   top: 0; }
-  .drawer.drawer-left, .drawer.drawer-right {
-    width: 285px;
-    max-width: 285px; }
   .drawer.drawer-right {
+    width: 315px;
+    max-width: 315px;
     border-left: 1px solid #dee2e6;
-    right: calc(-285px + -10px); }
+    right: calc(-315px + -10px); }
     .drawer.drawer-right.show {
       right: 0; }
   .drawer.drawer-left {
+    width: 285px;
+    max-width: 285px;
     border-right: 1px solid #dee2e6;
     left: calc(-285px + -10px); }
     .drawer.drawer-left.show {
@@ -14751,15 +14752,16 @@ body.drawer-ease {
     position: fixed;
     height: 100vh;
     top: 0; }
-    .drawer-md.drawer-left, .drawer-md.drawer-right {
-      width: 285px;
-      max-width: 285px; }
     .drawer-md.drawer-right {
+      width: 315px;
+      max-width: 315px;
       border-left: 1px solid #dee2e6;
-      right: calc(-285px + -10px); }
+      right: calc(-315px + -10px); }
       .drawer-md.drawer-right.show {
         right: 0; }
     .drawer-md.drawer-left {
+      width: 285px;
+      max-width: 285px;
       border-right: 1px solid #dee2e6;
       left: calc(-285px + -10px); }
       .drawer-md.drawer-left.show {
@@ -14778,15 +14780,16 @@ body.drawer-ease {
     position: fixed;
     height: 100vh;
     top: 0; }
-    .drawer-sm.drawer-left, .drawer-sm.drawer-right {
-      width: 285px;
-      max-width: 285px; }
     .drawer-sm.drawer-right {
+      width: 315px;
+      max-width: 315px;
       border-left: 1px solid #dee2e6;
-      right: calc(-285px + -10px); }
+      right: calc(-315px + -10px); }
       .drawer-sm.drawer-right.show {
         right: 0; }
     .drawer-sm.drawer-left {
+      width: 285px;
+      max-width: 285px;
       border-right: 1px solid #dee2e6;
       left: calc(-285px + -10px); }
       .drawer-sm.drawer-left.show {
@@ -20022,11 +20025,11 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
       padding-left: 1rem; }
     #page.drawers.show-drawer-right {
       margin-left: 0;
-      margin-right: 285px;
+      margin-right: 315px;
       padding-right: 1rem; }
     #page.drawers.show-drawer-left.show-drawer-right {
       margin-left: 285px;
-      margin-right: 285px; } }
+      margin-right: 315px; } }
 
 .drawercontrolbuttons {
   margin-top: 92px; }