MDL-68299 theme_boost: theme updates for accessible zoom

The Moodle UI should be functional in a viewport of 320px by 256px to
meet WCAG 1.4.10

this patch contains improvements to:
-prevent horizontal scrolling
-better wrapping of page header
-message drawer funtional on tiny screens
-remove indenting on courses
-prevent elements overlapping on quiz editing
-better navigation tabs
-fix colour picker
-quiz editing

diff --git a/course/templates/activity_navigation.mustache b/course/templates/activity_navigation.mustache
index 3b2af23..8f2948c 100644 (file)
--- a/course/templates/activity_navigation.mustache
+++ b/course/templates/activity_navigation.mustache
@@ -64,7 +64,7 @@
         }
     }
 }}
-<div class="mt-5 mb-1 activity-navigation">
+<div class="mt-5 mb-1 activity-navigation container-fluid">
 {{< core/columns-1to1to1}}
     {{$column1}}
         <div class="float-left">

diff --git a/lib/templates/full_header.mustache b/lib/templates/full_header.mustache
index c1feb3e..d0453e2 100644 (file)
--- a/lib/templates/full_header.mustache
+++ b/lib/templates/full_header.mustache
@@ -32,7 +32,7 @@
     <div class="col-12 pt-3 pb-3">
         <div class="card {{^contextheader}}border-0 bg-transparent{{/contextheader}}">
             <div class="card-body {{^contextheader}}p-2{{/contextheader}}">
-                <div class="d-flex align-items-center">
+                <div class="d-sm-flex align-items-center">
                     {{#contextheader}}
                     <div class="mr-auto">
                         {{{contextheader}}}

diff --git a/lib/templates/navbar.mustache b/lib/templates/navbar.mustache
index 7c15f6d..ba4376d 100644 (file)
--- a/lib/templates/navbar.mustache
+++ b/lib/templates/navbar.mustache
@@ -64,8 +64,8 @@
     }
 }}
 <nav aria-label="{{#str}}breadcrumb, access{{/str}}">
-    <ol class="breadcrumb">
-        {{#get_items}}
+    <ol class="breadcrumb">{{!
+        }}{{#get_items}}
             {{#has_action}}
                 <li class="breadcrumb-item{{#is_hidden}} dimmed_text{{/is_hidden}}">
                     <a href="{{{action}}}" {{#is_last}}aria-current="page"{{/is_last}} {{#get_title}}title="{{get_title}}"{{/get_title}}>{{{get_content}}}</a>
@@ -74,6 +74,6 @@
             {{^has_action}}
                 <li class="breadcrumb-item{{#is_hidden}} dimmed_text{{/is_hidden}}">{{{text}}}</li>
             {{/has_action}}
-        {{/get_items}}
-    </ol>
+        {{/get_items}}{{!
+    }}</ol>
 </nav>

diff --git a/lib/templates/preferences_groups.mustache b/lib/templates/preferences_groups.mustache
index 676bd60..6b6566e 100644 (file)
--- a/lib/templates/preferences_groups.mustache
+++ b/lib/templates/preferences_groups.mustache
@@ -28,6 +28,7 @@
         "get_content": "Edit profile"
     }
 }}
+<div class="container-fluid p-sm-0">
     <div class="row">
         {{#groups}}
             <div class="col-md-4">
@@ -44,3 +45,4 @@
             </div>
         {{/groups}}
     </div>
+</div>

diff --git a/message/amd/build/message_drawer.min.js b/message/amd/build/message_drawer.min.js
index f76d054..bcb430f 100644 (file)
Binary files a/message/amd/build/message_drawer.min.js and b/message/amd/build/message_drawer.min.js differ

diff --git a/message/amd/build/message_drawer.min.js.map b/message/amd/build/message_drawer.min.js.map
index ee1a5a9..fad7113 100644 (file)
Binary files a/message/amd/build/message_drawer.min.js.map and b/message/amd/build/message_drawer.min.js.map differ

diff --git a/message/amd/src/message_drawer.js b/message/amd/src/message_drawer.js
index ae7ebac..c36f8b0 100644 (file)
--- a/message/amd/src/message_drawer.js
+++ b/message/amd/src/message_drawer.js
@@ -73,6 +73,7 @@ function(
         HEADER_CONTAINER: '[data-region="header-container"]',
         BODY_CONTAINER: '[data-region="body-container"]',
         FOOTER_CONTAINER: '[data-region="footer-container"]',
+        CLOSE_BUTTON: '[data-action="closedrawer"]'
     };
 
     /**
@@ -295,6 +296,11 @@ function(
             Router.go(namespace, Routes.VIEW_CONVERSATION, args.conversationid);
         });
 
+        var closebutton = root.find(SELECTORS.CLOSE_BUTTON);
+        closebutton.on(CustomEvents.events.activate, function() {
+            PubSub.publish(Events.TOGGLE_VISIBILITY);
+        });
+
         PubSub.subscribe(Events.CREATE_CONVERSATION_WITH_USER, function(args) {
             setJumpFrom(args.buttonid);
             show(namespace, root);

diff --git a/message/templates/message_drawer.mustache b/message/templates/message_drawer.mustache
index 5b8e46a..215cf15 100644 (file)
--- a/message/templates/message_drawer.mustache
+++ b/message/templates/message_drawer.mustache
@@ -36,6 +36,11 @@
 {{< core/drawer}}
     {{$drawercontent}}
         <div id="message-drawer-{{uniqid}}" class="message-app" data-region="message-drawer" role="region">
+            <div class="closewidget bg-light border-bottom text-right">
+                <a class="text-dark" data-action="closedrawer" href="#">
+                     {{#pix}} i/window_close, core, {{#str}} closebuttontitle {{/str}} {{/pix}}
+                </a>
+            </div>
             <div class="header-container position-relative" data-region="header-container">
                 {{> core_message/message_drawer_view_contacts_header }}
                 {{> core_message/message_drawer_view_conversation_header }}

diff --git a/message/templates/message_drawer_view_conversation_footer.mustache b/message/templates/message_drawer_view_conversation_footer.mustache
index 722a75b..c70611b 100644 (file)
--- a/message/templates/message_drawer_view_conversation_footer.mustache
+++ b/message/templates/message_drawer_view_conversation_footer.mustache
@@ -41,22 +41,22 @@
     data-region="view-conversation"
     data-enter-to-send="{{settings.entertosend}}"
 >
-    <div class="hidden p-2" data-region="content-messages-footer-container">
+    <div class="hidden p-sm-2" data-region="content-messages-footer-container">
         {{> core_message/message_drawer_view_conversation_footer_content }}
     </div>
-    <div class="hidden p-2" data-region="content-messages-footer-edit-mode-container">
+    <div class="hidden p-sm-2" data-region="content-messages-footer-edit-mode-container">
         {{> core_message/message_drawer_view_conversation_footer_edit_mode }}
     </div>
-    <div class="hidden bg-secondary p-3" data-region="content-messages-footer-require-contact-container">
+    <div class="hidden bg-secondary p-sm-3" data-region="content-messages-footer-require-contact-container">
         {{> core_message/message_drawer_view_conversation_footer_require_contact }}
     </div>
-    <div class="hidden bg-secondary p-3" data-region="content-messages-footer-require-unblock-container">
+    <div class="hidden bg-secondary p-sm-3" data-region="content-messages-footer-require-unblock-container">
         {{> core_message/message_drawer_view_conversation_footer_require_unblock }}
     </div>
-    <div class="hidden bg-secondary p-3" data-region="content-messages-footer-unable-to-message">
+    <div class="hidden bg-secondary p-sm-3" data-region="content-messages-footer-unable-to-message">
         {{> core_message/message_drawer_view_conversation_footer_unable_to_message }}
     </div>
-    <div class="p-2" data-region="placeholder-container">
+    <div class="p-sm-2" data-region="placeholder-container">
         {{> core_message/message_drawer_view_conversation_footer_placeholder }}
     </div>
     <div

diff --git a/message/templates/message_drawer_view_conversation_footer_content.mustache b/message/templates/message_drawer_view_conversation_footer_content.mustache
index 4c83458..1098c03 100644 (file)
--- a/message/templates/message_drawer_view_conversation_footer_content.mustache
+++ b/message/templates/message_drawer_view_conversation_footer_content.mustache
@@ -44,7 +44,7 @@
     >
     </div>
 {{/showemojipicker}}
-<div class="d-flex mt-1">
+<div class="d-flex mt-sm-1">
     <textarea
         dir="auto"
         data-region="send-message-txt"

diff --git a/message/templates/message_drawer_view_conversation_header.mustache b/message/templates/message_drawer_view_conversation_header.mustache
index 66f84bf..8a2d001 100644 (file)
--- a/message/templates/message_drawer_view_conversation_header.mustache
+++ b/message/templates/message_drawer_view_conversation_header.mustache
@@ -35,7 +35,7 @@
 }}
 
 <div
-    class="hidden bg-white position-relative border-bottom px-2 py-2"
+    class="hidden bg-white position-relative border-bottom p-1 p-sm-2"
     aria-hidden="true"
     data-region="view-conversation"
 >

diff --git a/message/templates/message_drawer_view_group_info_body_content.mustache b/message/templates/message_drawer_view_group_info_body_content.mustache
index e7ce405..6ba0f0f 100644 (file)
--- a/message/templates/message_drawer_view_group_info_body_content.mustache
+++ b/message/templates/message_drawer_view_group_info_body_content.mustache
@@ -55,7 +55,7 @@
     {{#subname}}<h3 class="mt-2 mb-0 text-center text-truncate h5">{{.}}</h3>{{/subname}}
 </div>
 <h3 class="border-bottom h6 mt-3 px-3 py-2 mb-0 font-weight-bold">{{#str}} otherparticipants, core_message {{/str}}</h3>
-<div class="pt-1 bg-white" data-region="members-list-container" style="overflow-y: auto">
+<div class="pt-1 bg-white overflow-y" data-region="members-list-container">
     {{< core_message/message_drawer_lazy_load_list }}
         {{$rootattributes}}
             data-region="members-list"

diff --git a/message/templates/message_drawer_view_overview_header.mustache b/message/templates/message_drawer_view_overview_header.mustache
index 306759f..8d4b9a4 100644 (file)
--- a/message/templates/message_drawer_view_overview_header.mustache
+++ b/message/templates/message_drawer_view_overview_header.mustache
@@ -33,7 +33,7 @@
     {}
 
 }}
-<div class="border-bottom px-2 py-3" aria-hidden="false" {{^isdrawer}}data-in-panel="true"{{/isdrawer}} data-region="view-overview">
+<div class="border-bottom  p-1 px-sm-2 py-sm-3" aria-hidden="false" {{^isdrawer}}data-in-panel="true"{{/isdrawer}} data-region="view-overview">
     <div class="d-flex align-items-center">
         <div class="input-group">
             <div class="input-group-prepend">
@@ -61,7 +61,7 @@
             </a>
         </div>
     </div>
-    <div class="text-right mt-3">
+    <div class="text-right mt-sm-3">
         <a href="#" data-route="view-contacts" role="button">
             {{#pix}} i/user, core {{/pix}}
             {{#str}} contacts, core_message {{/str}}

diff --git a/message/templates/message_drawer_view_overview_section.mustache b/message/templates/message_drawer_view_overview_section.mustache
index bd1a087..9330fe6 100644 (file)
--- a/message/templates/message_drawer_view_overview_section.mustache
+++ b/message/templates/message_drawer_view_overview_section.mustache
@@ -41,7 +41,7 @@
 >
     <div id="{{$region}}{{/region}}-toggle" class="card-header p-0" data-region="toggle">
         <button
-            class="btn btn-link w-100 text-left p-2 d-flex align-items-center overview-section-toggle {{^expanded}}collapsed{{/expanded}}"
+            class="btn btn-link w-100 text-left p-1 p-sm-2 d-flex align-items-center overview-section-toggle {{^expanded}}collapsed{{/expanded}}"
             data-toggle="collapse"
             data-target="#{{$region}}{{/region}}-target-{{uniqid}}"
             aria-expanded="{{#expanded}}true{{/expanded}}{{^expanded}}false{{/expanded}}"

diff --git a/mod/quiz/styles.css b/mod/quiz/styles.css
index ca93082..20a3811 100644 (file)
--- a/mod/quiz/styles.css
+++ b/mod/quiz/styles.css
@@ -640,14 +640,25 @@ table.quizreviewsummary td.cell {
     min-height: 2.85em;
 }
 
-#page-mod-quiz-edit .maxgrade,
-#page-mod-quiz-edit .totalpoints {
-    position: absolute;
-    right: 0;
-    margin: -2.85em 0 0;
-    padding: .2em;
+@media (min-width: 576px) {
+    #page-mod-quiz-edit .maxgrade,
+    #page-mod-quiz-edit .totalpoints {
+        position: absolute;
+        right: 0;
+        margin: -2.85em 0 0;
+        padding: .2em;
+    }
 }
 
+@media (max-width: 576px) {
+    #page-mod-quiz-edit .maxgrade {
+        margin-bottom: 0.6em;
+    }
+    #page-mod-quiz-edit .maxgrade .form-control {
+        display: inline-block;
+        vertical-align: middle;
+    }
+}
 #page-mod-quiz-edit .maxgrade label {
     display: inline;
 }
@@ -748,6 +759,7 @@ table.quizreviewsummary td.cell {
 
 #page-mod-quiz-edit ul.slots {
     margin: 0;
+    padding: 0;
 }
 
 #page-mod-quiz-edit ul.slots li.section {
@@ -769,6 +781,7 @@ table.quizreviewsummary td.cell {
     background: #e6e6e6;
     margin: 3px 0;
     padding: 0.2em;
+    position: relative;
 }
 
 #page-mod-quiz-edit ul.slots li.section li.activity.page {
@@ -806,12 +819,8 @@ table.quizreviewsummary td.cell {
 
 #page-mod-quiz-edit ul.slots li.section li.activity .page_split_join_wrapper {
     position: absolute;
-}
-
-#page-mod-quiz-edit ul.slots li.section li.activity .page_split_join {
-    position: relative;
     left: -20px;
-    top: -7px;
+    bottom: -11px;
 }
 
 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmark.decimalplaces_0 {
@@ -1203,6 +1212,19 @@ table#categoryquestions {
     list-style: none;
 }
 
+@media (max-width: 576px) {
+    #page-mod-quiz-edit ul.slots li.section li.activity {
+        padding-top: 30px;
+    }
+    #page-mod-quiz-edit ul.slots li.section li.activity .activityinstance {
+        top: -30px;
+        left: 0;
+    }
+    #page-mod-quiz-edit ul.slots .activityinstance span.instancename {
+        width: 100%;
+    }
+}
+
 /** Print formatting for attempt and review pages **/
 
 @media print {

diff --git a/theme/boost/scss/moodle/admin.scss b/theme/boost/scss/moodle/admin.scss
index 51058f2..bbecc7e 100644 (file)
--- a/theme/boost/scss/moodle/admin.scss
+++ b/theme/boost/scss/moodle/admin.scss
@@ -378,33 +378,51 @@
     display: inline;
 }
 
-.jsenabled .admin_colourpicker {
-    display: block;
-    height: 102px;
-    width: 410px;
-    margin-bottom: 10px;
-    box-sizing: content-box;
-}
+@include media-breakpoint-up(md) {
+    .jsenabled .admin_colourpicker {
+        display: block;
+        height: 102px;
+        width: 410px;
+        margin-bottom: 10px;
+        box-sizing: content-box;
+    }
+    .admin_colourpicker .colourdialogue {
+        float: left;
+        border: 1px solid $state-info-border;
+    }
+    .admin_colourpicker .previewcolour {
+        border: 1px solid $state-info-border;
+        margin-left: 301px;
+    }
 
-.admin_colourpicker .loadingicon {
-    vertical-align: middle;
-    margin-left: auto;
+    .admin_colourpicker .currentcolour {
+        border: 1px solid $state-info-border;
+        margin-left: 301px;
+        border-top-width: 0;
+    }
 }
 
-.admin_colourpicker .colourdialogue {
-    float: left;
-    border: 1px solid $state-info-border;
-}
+@include media-breakpoint-down(sm) {
+    .jsenabled .admin_colourpicker {
+        height: 150px;
+        margin-bottom: 10px;
+        display: block;
+        position: relative;
+    }
+    .admin_colourpicker .previewcolour {
+        display: none;
+    }
+    .admin_colourpicker .currentcolour {
+        position: absolute;
+        border: 1px solid $border-color;
+        top: 100px;
+        left: 0;
+    }
 
-.admin_colourpicker .previewcolour {
-    border: 1px solid $state-info-border;
-    margin-left: 301px;
 }
-
-.admin_colourpicker .currentcolour {
-    border: 1px solid $state-info-border;
-    margin-left: 301px;
-    border-top-width: 0;
+.admin_colourpicker .loadingicon {
+    vertical-align: middle;
+    margin-left: auto;
 }
 
 #page-admin-index #notice .checkforupdates {

diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss
index c7129e5..77607a3 100644 (file)
--- a/theme/boost/scss/moodle/blocks.scss
+++ b/theme/boost/scss/moodle/blocks.scss
@@ -35,25 +35,35 @@ $blocks-column-width: 360px !default;
 $blocks-plus-gutter: $blocks-column-width + ( $grid-gutter-width / 2 );
 
 /* We put an absolutely positioned div in a relatively positioned div so it takes up no space */
-#region-main-settings-menu {
-    position: relative;
-    float: left;
-    width: 100%;
-}
-#region-main-settings-menu > div {
-    position: absolute;
-    right: 0;
-    z-index: 100;
-    margin: 1rem;
+@include media-breakpoint-up(sm) {
+    #region-main-settings-menu {
+        position: relative;
+        float: left;
+        width: 100%;
+    }
+
+    #region-main-settings-menu > div {
+        position: absolute;
+        right: 0;
+        z-index: 100;
+        margin: 1rem;
+    }
+
+    .region_main_settings_menu_proxy {
+        width: 4rem;
+        height: 2rem;
+        background-color: $body-bg;
+        margin-left: $card-spacer-x / 2;
+        margin-bottom: $card-spacer-x / 2;
+        border-bottom-left-radius: 0.5rem;
+        float: right;
+    }
 }
-.region_main_settings_menu_proxy {
-    width: 4rem;
-    height: 2rem;
-    background-color: $body-bg;
-    margin-left: $card-spacer-x / 2;
-    margin-bottom: $card-spacer-x / 2;
-    border-bottom-left-radius: 0.5rem;
-    float: right;
+
+@include media-breakpoint-down(sm) {
+    #region-main-settings-menu .menubar {
+        justify-content: flex-end;
+    }
 }
 
 // Required for IE11 to prevent blocks being pushed under the content.
@@ -345,4 +355,11 @@ body.drawer-open-left #region-main.has-blocks {
 
 .block.invisibleblock .card-title {
     color: $text-muted;
+}
+
+@include media-breakpoint-down(sm) {
+    .block.card {
+        border-left: 0;
+        border-right: 0;
+    }
 }
\ No newline at end of file

diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index 3f34cca..1065a70 100644 (file)
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -8,22 +8,37 @@ $bg-inverse-link-color: #fff !default;
 #region-main {
     overflow-x: auto;
     overflow-y: visible;
-    border: $card-border-width solid $card-border-color;
-    @if $enable-rounded {
-        @include border-radius($card-border-radius);
-    }
-    padding: $card-spacer-x;
     background-color: $body-bg;
 }
 
-.context-header-settings-menu,
-.region-main-settings-menu {
-    float: right;
-    width: auto;
-    max-width: 4em;
-    height: 2em;
-    display: block;
-    margin-top: 4px;
+@include media-breakpoint-up(sm) {
+    #region-main {
+        border: $card-border-width solid $card-border-color;
+        @if $enable-rounded {
+            @include border-radius($card-border-radius);
+        }
+        padding: $card-spacer-x;
+    }
+}
+
+@include media-breakpoint-up(sm) {
+    .context-header-settings-menu,
+    .region-main-settings-menu {
+        float: right;
+        width: auto;
+        max-width: 4em;
+        height: 2em;
+        display: block;
+        margin-top: 4px;
+    }
+}
+
+@include media-breakpoint-down(sm) {
+    .context-header-settings-menu,
+    .region-main-settings-menu {
+        display: flex;
+        justify-content: flex-end;
+    }
 }
 
 $gototop-bottom-position: 50px !default;
@@ -49,6 +64,12 @@ $gototop-bottom-position: 50px !default;
     }
 }
 
+@include media-breakpoint-down(sm) {
+    #goto-top-link {
+        bottom: 0;
+    }
+}
+
 body.scrolled #goto-top-link {
     opacity: 1;
     visibility: visible;
@@ -187,6 +208,16 @@ a.autolink.glossary:hover {
     margin-top: -1px;
 }
 
+@include media-breakpoint-down(sm) {
+    .pagelayout-mydashboard,
+    .pagelayout-login {
+        #region-main-box {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+}
+
 .collapsibleregioncaption img {
     vertical-align: middle;
 }
@@ -1046,19 +1077,22 @@ tr.flagged-tag a {
     float: left;
     padding-top: 20px;
 }
-$mod-indent-size: 30px;
-/* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
 
-@for $i from 1 through 16 {
-    $width: ($i * $mod-indent-size);
+@include media-breakpoint-up(sm) {
+    $mod-indent-size: 30px;
+    /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
+
+    @for $i from 1 through 16 {
+        $width: ($i * $mod-indent-size);
 
-    .mod-indent-#{$i} {
-        width: $width;
+        .mod-indent-#{$i} {
+            width: $width;
+        }
     }
-}
 
-.mod-indent-huge {
-    width: (16 * $mod-indent-size);
+    .mod-indent-huge {
+        width: (16 * $mod-indent-size);
+    }
 }
 
 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
@@ -2013,11 +2047,12 @@ dd:after {
             right: auto;
             white-space: nowrap;
         }
-
-        input {
-            width: 330px;
-            vertical-align: text-bottom;
-            margin-bottom: 0;
+        @include media-breakpoint-up(sm) {
+            input {
+                width: 330px;
+                vertical-align: text-bottom;
+                margin-bottom: 0;
+            }
         }
 
         select {
@@ -2467,3 +2502,75 @@ $picker-emojis-per-row: 7 !default;
         color: darken(theme-color-level($color, $alert-color-level), 10%);
     }
 }
+
+@include media-breakpoint-down(sm) {
+    #page-navbar {
+        width: 100%;
+    }
+
+    .breadcrumb:not(:empty) {
+        width: 100%;
+        border: ($border-width * 2) solid $gray-200;
+        padding: $spacer / 4;
+        margin-bottom: $spacer / 2;
+        .breadcrumb-item {
+            padding-top: $spacer / 3;
+            padding-bottom: $spacer / 3;
+            display: inline-block;
+        }
+    }
+
+    .mform {
+        width: 100%;
+        padding-right: 15px;
+        padding-left: 15px;
+    }
+    .pagination {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    .custom-select {
+        max-width: 100%;
+    }
+    .card .card-body {
+        padding: $card-spacer-x / 2;
+    }
+    #page-header {
+        .card {
+            border: 0;
+            .card-body {
+                padding: 0;
+            }
+        }
+    }
+    .nav-tabs,
+    .nav-pills {
+        margin: 0;
+        border: 0;
+        padding: $spacer / 8;
+        background-color: $gray-200;
+        .nav-item {
+            flex: 1 1 auto;
+            text-align: center;
+        }
+        .nav-link {
+            background: $white;
+            border: 0;
+            margin: $spacer / 8;
+            &.active {
+                @include button-outline-variant($gray-600);
+                border-color: $gray-600;
+            }
+        }
+    }
+}
+
+@media (max-width: map-get($grid-breakpoints, "sm")) and (max-height: 320px) {
+    div#page {
+        margin-top: 0;
+    }
+    .navbar.fixed-top {
+        position: relative;
+        z-index: inherit;
+    }
+}
\ No newline at end of file

diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
index 658745d..8a9297f 100644 (file)
--- a/theme/boost/scss/moodle/course.scss
+++ b/theme/boost/scss/moodle/course.scss
@@ -44,10 +44,11 @@ body:not(.editing)  .sitetopic ul.section {
     }
 }
 
-.course-content ul.section {
-    margin: $spacer;
+@include media-breakpoint-up(sm) {
+    .course-content ul.section {
+        margin: $spacer;
+    }
 }
-
 .section {
     .side {
         &.left {
@@ -116,10 +117,11 @@ body:not(.editing)  .sitetopic ul.section {
             display: block;
             height: inherit;
         }
-
-        .mod-indent-outer {
-            padding-left: 24px;
-            display: block;
+        @include media-breakpoint-up(sm) {
+            .mod-indent-outer {
+                padding-left: 24px;
+                display: block;
+            }
         }
     }
 
@@ -331,10 +333,16 @@ body:not(.editing)  .sitetopic ul.section {
     li.section {
         margin-top: $spacer;
         padding-bottom: $spacer;
+        .content {
+            margin: 0;
+            padding: 0;
+        }
 
-        .summary,
-        .content > .availabilityinfo {
-            margin-left: 25px;
+        @include media-breakpoint-up(sm) {
+            .summary,
+            .content > .availabilityinfo {
+                margin-left: 25px;
+            }
         }
 
         .left,
@@ -346,6 +354,20 @@ body:not(.editing)  .sitetopic ul.section {
     }
 }
 
+@include media-breakpoint-down(sm) {
+    body:not(.editing) {
+        .course-content ul.topics,
+        .course-content ul.weeks {
+            li.section {
+                .left,
+                .right {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+
 .course-content {
     margin-top: 0;
 }
@@ -356,6 +378,11 @@ body:not(.editing)  .sitetopic ul.section {
 
 .course-content li {
     &.section {
+        @include media-breakpoint-down(sm) {
+            ul {
+                padding-left: 0;
+            }
+        }
         ul {
             list-style: disc;
 

diff --git a/theme/boost/scss/moodle/debug.scss b/theme/boost/scss/moodle/debug.scss
index 81faedf..a534c9c 100644 (file)
--- a/theme/boost/scss/moodle/debug.scss
+++ b/theme/boost/scss/moodle/debug.scss
@@ -48,10 +48,6 @@ body.behat-site {
     margin: auto;
 }
 
-.phpinfo h2 {
-    width: 600px;
-}
-
 .phpinfo .e,
 .phpinfo .v,
 .phpinfo .h {

diff --git a/theme/boost/scss/moodle/drawer.scss b/theme/boost/scss/moodle/drawer.scss
index c75703d..d20a049 100644 (file)
--- a/theme/boost/scss/moodle/drawer.scss
+++ b/theme/boost/scss/moodle/drawer.scss
@@ -33,7 +33,6 @@ $drawer-bg: darken($body-bg, 5%) !default;
 
 [data-region="drawer"] {
     position: fixed;
-    padding: $drawer-padding-x $drawer-padding-y;
     width: $drawer-width;
     top: $fixed-header-y;
     height: calc(100% - #{$navbar-height});
@@ -45,6 +44,12 @@ $drawer-bg: darken($body-bg, 5%) !default;
     -moz-transition: right 0.5s ease, left 0.5s ease;
     transition: right 0.5s ease, left 0.5s ease;
 }
+
+@include media-breakpoint-up(sm) {
+    [data-region="drawer"] {
+        padding: $drawer-padding-x $drawer-padding-y;
+    }
+}
 #nav-drawer {
     right: auto;
     left: 0;
@@ -119,6 +124,10 @@ $right-drawer-width: 320px;
         opacity: 1;
     }
 
+    .closewidget {
+        display: none;
+    }
+
     &.hidden {
         display: block;
         right: $right-drawer-width * -1;
@@ -130,6 +139,25 @@ $right-drawer-width: 320px;
         @include transition(right .2s ease-in-out, visibility 0s ease-in-out .2s, opacity 0s ease-in-out .2s);
     }
 }
+
+@include media-breakpoint-down(sm) {
+    [data-region=right-hand-drawer] {
+        &.drawer {
+            top: 0;
+            height: 100%;
+            z-index: $zindex-fixed;
+        }
+        .closewidget {
+            display: block;
+            padding: 0 0.2rem;
+        }
+    }
+    body.drawer-open-left,
+    body.drawer-open-right {
+        overflow: hidden;
+    }
+}
+
 .dir-rtl {
     [data-region=right-hand-drawer] {
         box-shadow: 2px 2px 4px rgba(0, 0, 0, .08);

diff --git a/theme/boost/scss/moodle/forms.scss b/theme/boost/scss/moodle/forms.scss
index c21b5ee..8eae03e 100644 (file)
--- a/theme/boost/scss/moodle/forms.scss
+++ b/theme/boost/scss/moodle/forms.scss
@@ -49,8 +49,11 @@
     margin-bottom: $spacer / 2;
     border-bottom: $border-width solid $table-border-color;
 }
-.mform > .form-group {
-    margin-left: $spacer * 1.5;
+
+@include media-breakpoint-up(sm) {
+    .mform > .form-group {
+        margin-left: $spacer * 1.5;
+    }
 }
 
 .editor_atto_content.form-control {

diff --git a/theme/boost/scss/moodle/message.scss b/theme/boost/scss/moodle/message.scss
index c920380..8388761 100644 (file)
--- a/theme/boost/scss/moodle/message.scss
+++ b/theme/boost/scss/moodle/message.scss
@@ -456,6 +456,22 @@ $message-day-color: color-yiq($message-app-bg) !default;
         flex-shrink: 0;
     }
 
+    .overflow-y {
+        overflow-y: auto;
+    }
+
+    @media (max-height: 320px) {
+        .header-container [data-region="view-overview"]:not(.hidden) {
+            display: flex;
+            align-items: center;
+        }
+        .footer-container [data-region="view-overview"] {
+            display: none;
+        }
+        .overflow-y {
+            overflow-y: unset;
+        }
+    }
     .body-container {
         flex: 1;
         overflow: hidden;
@@ -466,6 +482,7 @@ $message-day-color: color-yiq($message-app-bg) !default;
             left: 0;
             top: 0;
             bottom: 0;
+            overflow: auto;
         }
     }
 
@@ -674,6 +691,14 @@ $message-day-color: color-yiq($message-app-bg) !default;
         }
     }
 
+    @media (max-height: 495px) {
+        .emoji-picker-container {
+            position: fixed;
+            top: 0;
+            transform: none;
+        }
+    }
+
     .emoji-auto-complete-container {
         overflow: auto;
         // Add a 50px buffer to account for scroll bars.

diff --git a/theme/boost/scss/moodle/question.scss b/theme/boost/scss/moodle/question.scss
index 425a59b..38ac391 100644 (file)
--- a/theme/boost/scss/moodle/question.scss
+++ b/theme/boost/scss/moodle/question.scss
@@ -423,7 +423,8 @@ body.jsenabled .questionflag input[type=checkbox] {
 
 #page-mod-quiz-edit ul.slots .activityinstance {
     > a {
-        display: inline;
+        display: flex;
+        align-items: center;
         text-indent: 0;
         padding-left: 0;
     }

diff --git a/theme/boost/scss/preset/default.scss b/theme/boost/scss/preset/default.scss
index 6c6aaa0..f4bceca 100644 (file)
--- a/theme/boost/scss/preset/default.scss
+++ b/theme/boost/scss/preset/default.scss
@@ -34,12 +34,14 @@ $warning-outline: #a6670e;
 
 // Options
 $enable-rounded: false !default;
+$enable-responsive-font-sizes: true !default;
 
 // Body
 $body-color:    $gray-800 !default;
 
 // Fonts
 $font-size-base: 0.9375rem !default;
+$rfs-base-font-size: 0.9rem !default;
 $headings-font-weight:   300 !default;
 
 // Navbar

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index aa6c0db..bd6ceae 100644 (file)
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -2385,6 +2385,9 @@ body {
   color: #343a40;
   text-align: left;
   background-color: #fff; }
+  @media (max-width: 1200px) {
+    body {
+      font-size: calc(0.90375rem + 0.045vw) ; } }
 
 [tabindex="-1"]:focus {
   outline: 0 !important; }
@@ -2592,6 +2595,9 @@ legend {
   line-height: inherit;
   color: inherit;
   white-space: normal; }
+  @media (max-width: 1200px) {
+    legend {
+      font-size: calc(0.96rem + 0.72vw) ; } }
 
 progress {
   vertical-align: baseline; }
@@ -2632,45 +2638,78 @@ h1, h2, h3, h4, h5, h6,
 
 h1, .h1 {
   font-size: 2.34375rem; }
+  @media (max-width: 1200px) {
+    h1, .h1 {
+      font-size: calc(1.044375rem + 1.7325vw) ; } }
 
 h2, .h2 {
   font-size: 1.875rem; }
+  @media (max-width: 1200px) {
+    h2, .h2 {
+      font-size: calc(0.9975rem + 1.17vw) ; } }
 
 h3, .h3 {
   font-size: 1.640625rem; }
+  @media (max-width: 1200px) {
+    h3, .h3 {
+      font-size: calc(0.9740625rem + 0.88875vw) ; } }
 
 h4, .h4 {
   font-size: 1.40625rem; }
+  @media (max-width: 1200px) {
+    h4, .h4 {
+      font-size: calc(0.950625rem + 0.6075vw) ; } }
 
 h5, .h5 {
   font-size: 1.171875rem; }
+  @media (max-width: 1200px) {
+    h5, .h5 {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 h6, .h6 {
   font-size: 0.9375rem; }
+  @media (max-width: 1200px) {
+    h6, .h6 {
+      font-size: calc(0.90375rem + 0.045vw) ; } }
 
 .lead {
   font-size: 1.171875rem;
   font-weight: 300; }
+  @media (max-width: 1200px) {
+    .lead {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 .display-1 {
   font-size: 6rem;
   font-weight: 300;
   line-height: 1.2; }
+  @media (max-width: 1200px) {
+    .display-1 {
+      font-size: calc(1.41rem + 6.12vw) ; } }
 
 .display-2 {
   font-size: 5.5rem;
   font-weight: 300;
   line-height: 1.2; }
+  @media (max-width: 1200px) {
+    .display-2 {
+      font-size: calc(1.36rem + 5.52vw) ; } }
 
 .display-3 {
   font-size: 4.5rem;
   font-weight: 300;
   line-height: 1.2; }
+  @media (max-width: 1200px) {
+    .display-3 {
+      font-size: calc(1.26rem + 4.32vw) ; } }
 
 .display-4 {
   font-size: 3.5rem;
   font-weight: 300;
   line-height: 1.2; }
+  @media (max-width: 1200px) {
+    .display-4 {
+      font-size: calc(1.16rem + 3.12vw) ; } }
 
 hr {
   margin-top: 1rem;
@@ -2708,6 +2747,9 @@ mark,
 .blockquote {
   margin-bottom: 1rem;
   font-size: 1.171875rem; }
+  @media (max-width: 1200px) {
+    .blockquote {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 .blockquote-footer {
   display: block;
@@ -3626,6 +3668,9 @@ pre {
   border: 1px solid #ced4da;
   border-radius: 0;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
+  @media (max-width: 1200px) {
+    .form-control {
+      font-size: calc(0.90375rem + 0.045vw) ; } }
   @media (prefers-reduced-motion: reduce) {
     .form-control {
       transition: none; } }
@@ -3666,6 +3711,9 @@ select.form-control:focus::-ms-value {
   padding-bottom: calc(0.5rem + 1px);
   font-size: 1.171875rem;
   line-height: 1.5; }
+  @media (max-width: 1200px) {
+    .col-form-label-lg {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 .col-form-label-sm {
   padding-top: calc(0.25rem + 1px);
@@ -3699,6 +3747,9 @@ select.form-control:focus::-ms-value {
   padding: 0.5rem 1rem;
   font-size: 1.171875rem;
   line-height: 1.5; }
+  @media (max-width: 1200px) {
+    .form-control-lg {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 select.form-control[size], select.form-control[multiple] {
   height: auto; }
@@ -4000,6 +4051,9 @@ textarea.form-control {
   line-height: 1.5;
   border-radius: 0;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
+  @media (max-width: 1200px) {
+    .btn {
+      font-size: calc(0.90375rem + 0.045vw) ; } }
   @media (prefers-reduced-motion: reduce) {
     .btn {
       transition: none; } }
@@ -4387,6 +4441,9 @@ fieldset:disabled a.btn {
   font-size: 1.171875rem;
   line-height: 1.5;
   border-radius: 0; }
+  @media (max-width: 1200px) {
+    .btn-lg, .btn-group-lg > .btn {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 .btn-sm, .btn-group-sm > .btn {
   padding: 0.25rem 0.5rem;
@@ -4462,6 +4519,9 @@ input[type="button"].btn-block {
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.15); }
+  @media (max-width: 1200px) {
+    .dropdown-menu {
+      font-size: calc(0.90375rem + 0.045vw) ; } }
 
 .dropdown-menu-left {
   right: auto;
@@ -4771,6 +4831,9 @@ input[type="button"].btn-block {
   white-space: nowrap;
   background-color: #e9ecef;
   border: 1px solid #ced4da; }
+  @media (max-width: 1200px) {
+    .input-group-text {
+      font-size: calc(0.90375rem + 0.045vw) ; } }
   .input-group-text input[type="radio"],
   .input-group-text input[type="checkbox"] {
     margin-top: 0; }
@@ -4788,6 +4851,14 @@ input[type="button"].btn-block {
   padding: 0.5rem 1rem;
   font-size: 1.171875rem;
   line-height: 1.5; }
+  @media (max-width: 1200px) {
+    .input-group-lg > .form-control,
+    .input-group-lg > .custom-select,
+    .input-group-lg > .input-group-prepend > .input-group-text,
+    .input-group-lg > .input-group-append > .input-group-text,
+    .input-group-lg > .input-group-prepend > .btn,
+    .input-group-lg > .input-group-append > .btn {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 .input-group-sm > .form-control:not(textarea),
 .input-group-sm > .custom-select {
@@ -4927,6 +4998,9 @@ input[type="button"].btn-block {
   border: 1px solid #ced4da;
   border-radius: 0;
   appearance: none; }
+  @media (max-width: 1200px) {
+    .custom-select {
+      font-size: calc(0.90375rem + 0.045vw) ; } }
   .custom-select:focus {
     border-color: #6eb5f3;
     outline: 0;
@@ -4957,6 +5031,9 @@ input[type="button"].btn-block {
   padding-bottom: 0.5rem;
   padding-left: 1rem;
   font-size: 1.171875rem; }
+  @media (max-width: 1200px) {
+    .custom-select-lg {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 .custom-file {
   position: relative;
@@ -5193,6 +5270,9 @@ input[type="button"].btn-block {
   font-size: 1.171875rem;
   line-height: inherit;
   white-space: nowrap; }
+  @media (max-width: 1200px) {
+    .navbar-brand {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
   .navbar-brand:hover, .navbar-brand:focus {
     text-decoration: none; }
 
@@ -5225,6 +5305,9 @@ input[type="button"].btn-block {
   line-height: 1;
   background-color: transparent;
   border: 1px solid transparent; }
+  @media (max-width: 1200px) {
+    .navbar-toggler {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
   .navbar-toggler:hover, .navbar-toggler:focus {
     text-decoration: none; }
 
@@ -5626,6 +5709,9 @@ input[type="button"].btn-block {
   padding: 0.75rem 1.5rem;
   font-size: 1.171875rem;
   line-height: 1.5; }
+  @media (max-width: 1200px) {
+    .pagination-lg .page-link {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 .pagination-sm .page-link {
   padding: 0.25rem 0.5rem;
@@ -6077,6 +6163,9 @@ input[type="button"].btn-block {
   color: #000;
   text-shadow: 0 1px 0 #fff;
   opacity: .5; }
+  @media (max-width: 1200px) {
+    .close {
+      font-size: calc(0.950625rem + 0.6075vw) ; } }
   .close:hover {
     color: #000;
     text-decoration: none; }
@@ -6462,6 +6551,9 @@ a.close.disabled {
   font-size: 0.9375rem;
   background-color: #f7f7f7;
   border-bottom: 1px solid #ebebeb; }
+  @media (max-width: 1200px) {
+    .popover-header {
+      font-size: calc(0.90375rem + 0.045vw) ; } }
   .popover-header:empty {
     display: none; }
 
@@ -9399,18 +9491,28 @@ input[disabled] {
 #region-main {
   overflow-x: auto;
   overflow-y: visible;
-  border: 1px solid rgba(0, 0, 0, 0.125);
-  padding: 1.25rem;
   background-color: #fff; }
 
-.context-header-settings-menu,
-.region-main-settings-menu {
-  float: right;
-  width: auto;
-  max-width: 4em;
-  height: 2em;
-  display: block;
-  margin-top: 4px; }
+@media (min-width: 576px) {
+  #region-main {
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    padding: 1.25rem; } }
+
+@media (min-width: 576px) {
+  .context-header-settings-menu,
+  .region-main-settings-menu {
+    float: right;
+    width: auto;
+    max-width: 4em;
+    height: 2em;
+    display: block;
+    margin-top: 4px; } }
+
+@media (max-width: 767.98px) {
+  .context-header-settings-menu,
+  .region-main-settings-menu {
+    display: flex;
+    justify-content: flex-end; } }
 
 #goto-top-link {
   visibility: hidden;
@@ -9433,6 +9535,10 @@ input[disabled] {
     right: 0;
     transform: translateY(-100%); }
 
+@media (max-width: 767.98px) {
+  #goto-top-link {
+    bottom: 0; } }
+
 body.scrolled #goto-top-link {
   opacity: 1;
   visibility: visible;
@@ -9551,6 +9657,12 @@ a.autolink.glossary:hover {
   background-color: transparent;
   margin-top: -1px; }
 
+@media (max-width: 767.98px) {
+  .pagelayout-mydashboard #region-main-box,
+  .pagelayout-login #region-main-box {
+    padding-left: 0;
+    padding-right: 0; } }
+
 .collapsibleregioncaption img {
   vertical-align: middle; }
 
@@ -10239,57 +10351,42 @@ tr.flagged-tag a {
   float: left;
   padding-top: 20px; }
 
-/* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
-.mod-indent-1 {
-  width: 30px; }
-
-.mod-indent-2 {
-  width: 60px; }
-
-.mod-indent-3 {
-  width: 90px; }
-
-.mod-indent-4 {
-  width: 120px; }
-
-.mod-indent-5 {
-  width: 150px; }
-
-.mod-indent-6 {
-  width: 180px; }
-
-.mod-indent-7 {
-  width: 210px; }
-
-.mod-indent-8 {
-  width: 240px; }
-
-.mod-indent-9 {
-  width: 270px; }
-
-.mod-indent-10 {
-  width: 300px; }
-
-.mod-indent-11 {
-  width: 330px; }
-
-.mod-indent-12 {
-  width: 360px; }
-
-.mod-indent-13 {
-  width: 390px; }
-
-.mod-indent-14 {
-  width: 420px; }
-
-.mod-indent-15 {
-  width: 450px; }
-
-.mod-indent-16 {
-  width: 480px; }
-
-.mod-indent-huge {
-  width: 480px; }
+@media (min-width: 576px) {
+  /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
+  .mod-indent-1 {
+    width: 30px; }
+  .mod-indent-2 {
+    width: 60px; }
+  .mod-indent-3 {
+    width: 90px; }
+  .mod-indent-4 {
+    width: 120px; }
+  .mod-indent-5 {
+    width: 150px; }
+  .mod-indent-6 {
+    width: 180px; }
+  .mod-indent-7 {
+    width: 210px; }
+  .mod-indent-8 {
+    width: 240px; }
+  .mod-indent-9 {
+    width: 270px; }
+  .mod-indent-10 {
+    width: 300px; }
+  .mod-indent-11 {
+    width: 330px; }
+  .mod-indent-12 {
+    width: 360px; }
+  .mod-indent-13 {
+    width: 390px; }
+  .mod-indent-14 {
+    width: 420px; }
+  .mod-indent-15 {
+    width: 450px; }
+  .mod-indent-16 {
+    width: 480px; }
+  .mod-indent-huge {
+    width: 480px; } }
 
 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
 .resourcecontent .mediaplugin_mp3 object {
@@ -11033,10 +11130,11 @@ dd:after {
     left: 0;
     right: auto;
     white-space: nowrap; }
-  .inplaceeditable.inplaceeditingon input {
-    width: 330px;
-    vertical-align: text-bottom;
-    margin-bottom: 0; }
+  @media (min-width: 576px) {
+    .inplaceeditable.inplaceeditingon input {
+      width: 330px;
+      vertical-align: text-bottom;
+      margin-bottom: 0; } }
   .inplaceeditable.inplaceeditingon select {
     margin-bottom: 0; }
 
@@ -11399,6 +11497,91 @@ body.h5p-embed .h5pmessages {
 .alert-dark a {
   color: #040505; }
 
+@media (max-width: 767.98px) {
+  #page-navbar {
+    width: 100%; }
+  .breadcrumb:not(:empty) {
+    width: 100%;
+    border: 2px solid #e9ecef;
+    padding: 0.25rem;
+    margin-bottom: 0.5rem; }
+    .breadcrumb:not(:empty) .breadcrumb-item {
+      padding-top: 0.3333333333rem;
+      padding-bottom: 0.3333333333rem;
+      display: inline-block; }
+  .mform {
+    width: 100%;
+    padding-right: 15px;
+    padding-left: 15px; }
+  .pagination {
+    flex-wrap: wrap;
+    justify-content: center; }
+  .custom-select {
+    max-width: 100%; }
+  .card .card-body {
+    padding: 0.625rem; }
+  #page-header .card {
+    border: 0; }
+    #page-header .card .card-body {
+      padding: 0; }
+  .nav-tabs,
+  .nav-pills {
+    margin: 0;
+    border: 0;
+    padding: 0.125rem;
+    background-color: #e9ecef; }
+    .nav-tabs .nav-item,
+    .nav-pills .nav-item {
+      flex: 1 1 auto;
+      text-align: center; }
+    .nav-tabs .nav-link,
+    .nav-pills .nav-link {
+      background: #fff;
+      border: 0;
+      margin: 0.125rem; }
+      .nav-tabs .nav-link.active,
+      .nav-pills .nav-link.active {
+        color: #6c757d;
+        border-color: #6c757d;
+        border-color: #6c757d; }
+        .nav-tabs .nav-link.active:hover,
+        .nav-pills .nav-link.active:hover {
+          color: #fff;
+          background-color: #6c757d;
+          border-color: #6c757d; }
+        .nav-tabs .nav-link.active:focus, .nav-tabs .nav-link.active.focus,
+        .nav-pills .nav-link.active:focus,
+        .nav-pills .nav-link.active.focus {
+          box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); }
+        .nav-tabs .nav-link.active.disabled, .nav-tabs .nav-link.active:disabled,
+        .nav-pills .nav-link.active.disabled,
+        .nav-pills .nav-link.active:disabled {
+          color: #6c757d;
+          background-color: transparent; }
+        .nav-tabs .nav-link.active:not(:disabled):not(.disabled):active, .nav-tabs .nav-link.active:not(:disabled):not(.disabled).active,
+        .show > .nav-tabs .nav-link.active.dropdown-toggle,
+        .nav-pills .nav-link.active:not(:disabled):not(.disabled):active,
+        .nav-pills .nav-link.active:not(:disabled):not(.disabled).active,
+        .show >
+        .nav-pills .nav-link.active.dropdown-toggle {
+          color: #fff;
+          background-color: #6c757d;
+          border-color: #6c757d; }
+          .nav-tabs .nav-link.active:not(:disabled):not(.disabled):active:focus, .nav-tabs .nav-link.active:not(:disabled):not(.disabled).active:focus,
+          .show > .nav-tabs .nav-link.active.dropdown-toggle:focus,
+          .nav-pills .nav-link.active:not(:disabled):not(.disabled):active:focus,
+          .nav-pills .nav-link.active:not(:disabled):not(.disabled).active:focus,
+          .show >
+          .nav-pills .nav-link.active.dropdown-toggle:focus {
+            box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); } }
+
+@media (max-width: 576px) and (max-height: 320px) {
+  div#page {
+    margin-top: 0; }
+  .navbar.fixed-top {
+    position: relative;
+    z-index: inherit; } }
+
 .icon {
   font-size: 16px;
   width: 16px;
@@ -11795,30 +11978,42 @@ body.h5p-embed .h5pmessages {
 .jsenabled .admin_colourpicker_preview {
   display: inline; }
 
-.jsenabled .admin_colourpicker {
-  display: block;
-  height: 102px;
-  width: 410px;
-  margin-bottom: 10px;
-  box-sizing: content-box; }
+@media (min-width: 768px) {
+  .jsenabled .admin_colourpicker {
+    display: block;
+    height: 102px;
+    width: 410px;
+    margin-bottom: 10px;
+    box-sizing: content-box; }
+  .admin_colourpicker .colourdialogue {
+    float: left;
+    border: 1px solid #d1edf6; }
+  .admin_colourpicker .previewcolour {
+    border: 1px solid #d1edf6;
+    margin-left: 301px; }
+  .admin_colourpicker .currentcolour {
+    border: 1px solid #d1edf6;
+    margin-left: 301px;
+    border-top-width: 0; } }
+
+@media (max-width: 767.98px) {
+  .jsenabled .admin_colourpicker {
+    height: 150px;
+    margin-bottom: 10px;
+    display: block;
+    position: relative; }
+  .admin_colourpicker .previewcolour {
+    display: none; }
+  .admin_colourpicker .currentcolour {
+    position: absolute;
+    border: 1px solid #dee2e6;
+    top: 100px;
+    left: 0; } }
 
 .admin_colourpicker .loadingicon {
   vertical-align: middle;
   margin-left: auto; }
 
-.admin_colourpicker .colourdialogue {
-  float: left;
-  border: 1px solid #d1edf6; }
-
-.admin_colourpicker .previewcolour {
-  border: 1px solid #d1edf6;
-  margin-left: 301px; }
-
-.admin_colourpicker .currentcolour {
-  border: 1px solid #d1edf6;
-  margin-left: 301px;
-  border-top-width: 0; }
-
 #page-admin-index #notice .checkforupdates {
   text-align: center; }
 
@@ -11994,25 +12189,28 @@ body.h5p-embed .h5pmessages {
   float: right; }
 
 /* We put an absolutely positioned div in a relatively positioned div so it takes up no space */
-#region-main-settings-menu {
-  position: relative;
-  float: left;
-  width: 100%; }
-
-#region-main-settings-menu > div {
-  position: absolute;
-  right: 0;
-  z-index: 100;
-  margin: 1rem; }
+@media (min-width: 576px) {
+  #region-main-settings-menu {
+    position: relative;
+    float: left;
+    width: 100%; }
+  #region-main-settings-menu > div {
+    position: absolute;
+    right: 0;
+    z-index: 100;
+    margin: 1rem; }
+  .region_main_settings_menu_proxy {
+    width: 4rem;
+    height: 2rem;
+    background-color: #fff;
+    margin-left: 0.625rem;
+    margin-bottom: 0.625rem;
+    border-bottom-left-radius: 0.5rem;
+    float: right; } }
 
-.region_main_settings_menu_proxy {
-  width: 4rem;
-  height: 2rem;
-  background-color: #fff;
-  margin-left: 0.625rem;
-  margin-bottom: 0.625rem;
-  border-bottom-left-radius: 0.5rem;
-  float: right; }
+@media (max-width: 767.98px) {
+  #region-main-settings-menu .menubar {
+    justify-content: flex-end; } }
 
 #region-main-settings-menu.has-blocks,
 #region-main.has-blocks {
@@ -12229,6 +12427,11 @@ body.h5p-embed .h5pmessages {
 .block.invisibleblock .card-title {
   color: #6c757d; }
 
+@media (max-width: 767.98px) {
+  .block.card {
+    border-left: 0;
+    border-right: 0; } }
+
 .navbar {
   max-height: 50px; }
 
@@ -12538,8 +12741,9 @@ body:not(.editing) .sitetopic ul.section {
   body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
     padding-left: 0; }
 
-.course-content ul.section {
-  margin: 1rem; }
+@media (min-width: 576px) {
+  .course-content ul.section {
+    margin: 1rem; } }
 
 .section .side {
   margin-top: 0.5rem; }
@@ -12590,9 +12794,10 @@ body:not(.editing) .sitetopic ul.section {
   display: block;
   height: inherit; }
 
-.section .label .mod-indent-outer {
-  padding-left: 24px;
-  display: block; }
+@media (min-width: 576px) {
+  .section .label .mod-indent-outer {
+    padding-left: 24px;
+    display: block; } }
 
 .section .filler {
   width: 16px;
@@ -12753,11 +12958,16 @@ body:not(.editing) .sitetopic ul.section {
   .course-content ul.weeks li.section {
     margin-top: 1rem;
     padding-bottom: 1rem; }
-    .course-content ul.topics li.section .summary,
-    .course-content ul.topics li.section .content > .availabilityinfo,
-    .course-content ul.weeks li.section .summary,
-    .course-content ul.weeks li.section .content > .availabilityinfo {
-      margin-left: 25px; }
+    .course-content ul.topics li.section .content,
+    .course-content ul.weeks li.section .content {
+      margin: 0;
+      padding: 0; }
+    @media (min-width: 576px) {
+      .course-content ul.topics li.section .summary,
+      .course-content ul.topics li.section .content > .availabilityinfo,
+      .course-content ul.weeks li.section .summary,
+      .course-content ul.weeks li.section .content > .availabilityinfo {
+        margin-left: 25px; } }
     .course-content ul.topics li.section .left,
     .course-content ul.topics li.section .right,
     .course-content ul.weeks li.section .left,
@@ -12766,12 +12976,23 @@ body:not(.editing) .sitetopic ul.section {
       text-align: right;
       width: auto; }
 
+@media (max-width: 767.98px) {
+  body:not(.editing) .course-content ul.topics li.section .left,
+  body:not(.editing) .course-content ul.topics li.section .right,
+  body:not(.editing) .course-content ul.weeks li.section .left,
+  body:not(.editing) .course-content ul.weeks li.section .right {
+    display: none; } }
+
 .course-content {
   margin-top: 0; }
 
 .course-content .hidden {
   display: none; }
 
+@media (max-width: 767.98px) {
+  .course-content li.section ul {
+    padding-left: 0; } }
+
 .course-content li.section ul {
   list-style: disc; }
   .course-content li.section ul ul {
@@ -13388,7 +13609,6 @@ span.editinstructions {
 /* Use a variable for the drawer background colors. */
 [data-region="drawer"] {
   position: fixed;
-  padding: 20px 20px;
   width: 285px;
   top: 50px;
   height: calc(100% - 50px);
@@ -13400,6 +13620,10 @@ span.editinstructions {
   -moz-transition: right 0.5s ease, left 0.5s ease;
   transition: right 0.5s ease, left 0.5s ease; }
 
+@media (min-width: 576px) {
+  [data-region="drawer"] {
+    padding: 20px 20px; } }
+
 #nav-drawer {
   right: auto;
   left: 0;
@@ -13457,6 +13681,8 @@ body.drawer-ease {
     padding: 0;
     visibility: visible;
     opacity: 1; }
+  [data-region=right-hand-drawer] .closewidget {
+    display: none; }
   [data-region=right-hand-drawer].hidden {
     display: block;
     right: -320px;
@@ -13467,6 +13693,18 @@ body.drawer-ease {
       [data-region=right-hand-drawer].hidden {
         transition: none; } }
 
+@media (max-width: 767.98px) {
+  [data-region=right-hand-drawer].drawer {
+    top: 0;
+    height: 100%;
+    z-index: 1030; }
+  [data-region=right-hand-drawer] .closewidget {
+    display: block;
+    padding: 0 0.2rem; }
+  body.drawer-open-left,
+  body.drawer-open-right {
+    overflow: hidden; } }
+
 .dir-rtl [data-region=right-hand-drawer] {
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08); }
 
@@ -14538,6 +14776,16 @@ a.ygtvspacer:hover {
     min-height: 400px; }
   .message-app .header-container {
     flex-shrink: 0; }
+  .message-app .overflow-y {
+    overflow-y: auto; }
+  @media (max-height: 320px) {
+    .message-app .header-container [data-region="view-overview"]:not(.hidden) {
+      display: flex;
+      align-items: center; }
+    .message-app .footer-container [data-region="view-overview"] {
+      display: none; }
+    .message-app .overflow-y {
+      overflow-y: unset; } }
   .message-app .body-container {
     flex: 1;
     overflow: hidden; }
@@ -14546,7 +14794,8 @@ a.ygtvspacer:hover {
       right: 0;
       left: 0;
       top: 0;
-      bottom: 0; }
+      bottom: 0;
+      overflow: auto; }
   .message-app .footer-container {
     flex-shrink: 0; }
     .message-app .footer-container textarea {
@@ -14692,6 +14941,12 @@ a.ygtvspacer:hover {
     .message-app .emoji-picker-container {
       right: -0.5rem; } }
 
+@media (max-height: 495px) {
+  .message-app .emoji-picker-container {
+    position: fixed;
+    top: 0;
+    transform: none; } }
+
 .message-app .emoji-auto-complete-container {
   overflow: auto;
   max-height: 90px;
@@ -15047,7 +15302,8 @@ body.jsenabled .questionflag input[type=checkbox] {
   margin: 1em 0; }
 
 #page-mod-quiz-edit ul.slots .activityinstance > a {
-  display: inline;
+  display: flex;
+  align-items: center;
   text-indent: 0;
   padding-left: 0; }
 
@@ -15554,8 +15810,9 @@ body.path-question-type .mform fieldset.hidden {
   margin-bottom: 0.5rem;
   border-bottom: 1px solid #dee2e6; }
 
-.mform > .form-group {
-  margin-left: 1.5rem; }
+@media (min-width: 576px) {
+  .mform > .form-group {
+    margin-left: 1.5rem; } }
 
 .editor_atto_content.form-control {
   width: 100%; }
@@ -16250,6 +16507,8 @@ select {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     font-size: 1.171875rem;
+    @media (max-width: 1200px) {
+      font-size: calc(0.9271875rem + 0.32625vw) ; }
     line-height: 1.5;
     right: 0; } }
 
@@ -16264,6 +16523,8 @@ select {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     font-size: 1.171875rem;
+    @media (max-width: 1200px) {
+      font-size: calc(0.9271875rem + 0.32625vw) ; }
     line-height: 1.5;
     right: 0; }
   to {
@@ -17797,9 +18058,6 @@ body.behat-site .custom-control-label::before, body.behat-site .custom-control-l
 .phpinfo h2 {
   margin: auto; }
 
-.phpinfo h2 {
-  width: 600px; }
-
 .phpinfo .e,
 .phpinfo .v,
 .phpinfo .h {

diff --git a/theme/classic/scss/preset/default.scss b/theme/classic/scss/preset/default.scss
index 4059751..3cf2b03 100644 (file)
--- a/theme/classic/scss/preset/default.scss
+++ b/theme/classic/scss/preset/default.scss
@@ -34,12 +34,14 @@ $warning-outline: #a6670e;
 
 // Options
 $enable-rounded: true !default;
+$enable-responsive-font-sizes: true !default;
 
 // Body
 $body-color:    $gray-800 !default;
 
 // Fonts
 $font-size-base: 0.9375rem !default;
+$rfs-base-font-size: 0.9rem !default;
 $headings-font-weight:   300 !default;
 
 // Navbar

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index c3008b9..4a12543 100644 (file)
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -2385,6 +2385,9 @@ body {
   color: #343a40;
   text-align: left;
   background-color: #fff; }
+  @media (max-width: 1200px) {
+    body {
+      font-size: calc(0.90375rem + 0.045vw) ; } }
 
 [tabindex="-1"]:focus {
   outline: 0 !important; }
@@ -2592,6 +2595,9 @@ legend {
   line-height: inherit;
   color: inherit;
   white-space: normal; }
+  @media (max-width: 1200px) {
+    legend {
+      font-size: calc(0.96rem + 0.72vw) ; } }
 
 progress {
   vertical-align: baseline; }
@@ -2632,45 +2638,78 @@ h1, h2, h3, h4, h5, h6,
 
 h1, .h1 {
   font-size: 2.34375rem; }
+  @media (max-width: 1200px) {
+    h1, .h1 {
+      font-size: calc(1.044375rem + 1.7325vw) ; } }
 
 h2, .h2 {
   font-size: 1.875rem; }
+  @media (max-width: 1200px) {
+    h2, .h2 {
+      font-size: calc(0.9975rem + 1.17vw) ; } }
 
 h3, .h3 {
   font-size: 1.640625rem; }
+  @media (max-width: 1200px) {
+    h3, .h3 {
+      font-size: calc(0.9740625rem + 0.88875vw) ; } }
 
 h4, .h4 {
   font-size: 1.40625rem; }
+  @media (max-width: 1200px) {
+    h4, .h4 {
+      font-size: calc(0.950625rem + 0.6075vw) ; } }
 
 h5, .h5 {
   font-size: 1.171875rem; }
+  @media (max-width: 1200px) {
+    h5, .h5 {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 h6, .h6 {
   font-size: 0.9375rem; }
+  @media (max-width: 1200px) {
+    h6, .h6 {
+      font-size: calc(0.90375rem + 0.045vw) ; } }
 
 .lead {
   font-size: 1.171875rem;
   font-weight: 300; }
+  @media (max-width: 1200px) {
+    .lead {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 .display-1 {
   font-size: 6rem;
   font-weight: 300;
   line-height: 1.2; }
+  @media (max-width: 1200px) {
+    .display-1 {
+      font-size: calc(1.41rem + 6.12vw) ; } }
 
 .display-2 {
   font-size: 5.5rem;
   font-weight: 300;
   line-height: 1.2; }
+  @media (max-width: 1200px) {
+    .display-2 {
+      font-size: calc(1.36rem + 5.52vw) ; } }
 
 .display-3 {
   font-size: 4.5rem;
   font-weight: 300;
   line-height: 1.2; }
+  @media (max-width: 1200px) {
+    .display-3 {
+      font-size: calc(1.26rem + 4.32vw) ; } }
 
 .display-4 {
   font-size: 3.5rem;
   font-weight: 300;
   line-height: 1.2; }
+  @media (max-width: 1200px) {
+    .display-4 {
+      font-size: calc(1.16rem + 3.12vw) ; } }
 
 hr {
   margin-top: 1rem;
@@ -2708,6 +2747,9 @@ mark,
 .blockquote {
   margin-bottom: 1rem;
   font-size: 1.171875rem; }
+  @media (max-width: 1200px) {
+    .blockquote {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 .blockquote-footer {
   display: block;
@@ -3628,6 +3670,9 @@ pre {
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
+  @media (max-width: 1200px) {
+    .form-control {
+      font-size: calc(0.90375rem + 0.045vw) ; } }
   @media (prefers-reduced-motion: reduce) {
     .form-control {
       transition: none; } }
@@ -3668,6 +3713,9 @@ select.form-control:focus::-ms-value {
   padding-bottom: calc(0.5rem + 1px);
   font-size: 1.171875rem;
   line-height: 1.5; }
+  @media (max-width: 1200px) {
+    .col-form-label-lg {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 .col-form-label-sm {
   padding-top: calc(0.25rem + 1px);
@@ -3703,6 +3751,9 @@ select.form-control:focus::-ms-value {
   font-size: 1.171875rem;
   line-height: 1.5;
   border-radius: 0.3rem; }
+  @media (max-width: 1200px) {
+    .form-control-lg {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 select.form-control[size], select.form-control[multiple] {
   height: auto; }
@@ -4006,6 +4057,9 @@ textarea.form-control {
   line-height: 1.5;
   border-radius: 0.25rem;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
+  @media (max-width: 1200px) {
+    .btn {
+      font-size: calc(0.90375rem + 0.045vw) ; } }
   @media (prefers-reduced-motion: reduce) {
     .btn {
       transition: none; } }
@@ -4393,6 +4447,9 @@ fieldset:disabled a.btn {
   font-size: 1.171875rem;
   line-height: 1.5;
   border-radius: 0.3rem; }
+  @media (max-width: 1200px) {
+    .btn-lg, .btn-group-lg > .btn {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 .btn-sm, .btn-group-sm > .btn {
   padding: 0.25rem 0.5rem;
@@ -4469,6 +4526,9 @@ input[type="button"].btn-block {
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem; }
+  @media (max-width: 1200px) {
+    .dropdown-menu {
+      font-size: calc(0.90375rem + 0.045vw) ; } }
 
 .dropdown-menu-left {
   right: auto;
@@ -4812,6 +4872,9 @@ input[type="button"].btn-block {
   background-color: #e9ecef;
   border: 1px solid #ced4da;
   border-radius: 0.25rem; }
+  @media (max-width: 1200px) {
+    .input-group-text {
+      font-size: calc(0.90375rem + 0.045vw) ; } }
   .input-group-text input[type="radio"],
   .input-group-text input[type="checkbox"] {
     margin-top: 0; }
@@ -4830,6 +4893,14 @@ input[type="button"].btn-block {
   font-size: 1.171875rem;
   line-height: 1.5;
   border-radius: 0.3rem; }
+  @media (max-width: 1200px) {
+    .input-group-lg > .form-control,
+    .input-group-lg > .custom-select,
+    .input-group-lg > .input-group-prepend > .input-group-text,
+    .input-group-lg > .input-group-append > .input-group-text,
+    .input-group-lg > .input-group-prepend > .btn,
+    .input-group-lg > .input-group-append > .btn {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 .input-group-sm > .form-control:not(textarea),
 .input-group-sm > .custom-select {
@@ -4991,6 +5062,9 @@ input[type="button"].btn-block {
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
   appearance: none; }
+  @media (max-width: 1200px) {
+    .custom-select {
+      font-size: calc(0.90375rem + 0.045vw) ; } }
   .custom-select:focus {
     border-color: #6eb5f3;
     outline: 0;
@@ -5021,6 +5095,9 @@ input[type="button"].btn-block {
   padding-bottom: 0.5rem;
   padding-left: 1rem;
   font-size: 1.171875rem; }
+  @media (max-width: 1200px) {
+    .custom-select-lg {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 .custom-file {
   position: relative;
@@ -5273,6 +5350,9 @@ input[type="button"].btn-block {
   font-size: 1.171875rem;
   line-height: inherit;
   white-space: nowrap; }
+  @media (max-width: 1200px) {
+    .navbar-brand {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
   .navbar-brand:hover, .navbar-brand:focus {
     text-decoration: none; }
 
@@ -5306,6 +5386,9 @@ input[type="button"].btn-block {
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 0.25rem; }
+  @media (max-width: 1200px) {
+    .navbar-toggler {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
   .navbar-toggler:hover, .navbar-toggler:focus {
     text-decoration: none; }
 
@@ -5757,6 +5840,9 @@ input[type="button"].btn-block {
   padding: 0.75rem 1.5rem;
   font-size: 1.171875rem;
   line-height: 1.5; }
+  @media (max-width: 1200px) {
+    .pagination-lg .page-link {
+      font-size: calc(0.9271875rem + 0.32625vw) ; } }
 
 .pagination-lg .page-item:first-child .page-link {
   border-top-left-radius: 0.3rem;
@@ -6271,6 +6357,9 @@ input[type="button"].btn-block {
   color: #000;
   text-shadow: 0 1px 0 #fff;
   opacity: .5; }
+  @media (max-width: 1200px) {
+    .close {
+      font-size: calc(0.950625rem + 0.6075vw) ; } }
   .close:hover {
     color: #000;
     text-decoration: none; }
@@ -6666,6 +6755,9 @@ a.close.disabled {
   border-bottom: 1px solid #ebebeb;
   border-top-left-radius: calc(0.3rem - 1px);
   border-top-right-radius: calc(0.3rem - 1px); }
+  @media (max-width: 1200px) {
+    .popover-header {
+      font-size: calc(0.90375rem + 0.045vw) ; } }
   .popover-header:empty {
     display: none; }
 
@@ -9604,19 +9696,29 @@ input[disabled] {
 #region-main {
   overflow-x: auto;
   overflow-y: visible;
-  border: 1px solid rgba(0, 0, 0, 0.125);
-  border-radius: 0.25rem;
-  padding: 1.25rem;
   background-color: #fff; }
 
-.context-header-settings-menu,
-.region-main-settings-menu {
-  float: right;
-  width: auto;
-  max-width: 4em;
-  height: 2em;
-  display: block;
-  margin-top: 4px; }
+@media (min-width: 576px) {
+  #region-main {
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    border-radius: 0.25rem;
+    padding: 1.25rem; } }
+
+@media (min-width: 576px) {
+  .context-header-settings-menu,
+  .region-main-settings-menu {
+    float: right;
+    width: auto;
+    max-width: 4em;
+    height: 2em;
+    display: block;
+    margin-top: 4px; } }
+
+@media (max-width: 767.98px) {
+  .context-header-settings-menu,
+  .region-main-settings-menu {
+    display: flex;
+    justify-content: flex-end; } }
 
 #goto-top-link {
   visibility: hidden;
@@ -9639,6 +9741,10 @@ input[disabled] {
     right: 0;
     transform: translateY(-100%); }
 
+@media (max-width: 767.98px) {
+  #goto-top-link {
+    bottom: 0; } }
+
 body.scrolled #goto-top-link {
   opacity: 1;
   visibility: visible;
@@ -9757,6 +9863,12 @@ a.autolink.glossary:hover {
   background-color: transparent;
   margin-top: -1px; }
 
+@media (max-width: 767.98px) {
+  .pagelayout-mydashboard #region-main-box,
+  .pagelayout-login #region-main-box {
+    padding-left: 0;
+    padding-right: 0; } }
+
 .collapsibleregioncaption img {
   vertical-align: middle; }
 
@@ -10445,57 +10557,42 @@ tr.flagged-tag a {
   float: left;
   padding-top: 20px; }
 
-/* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
-.mod-indent-1 {
-  width: 30px; }
-
-.mod-indent-2 {
-  width: 60px; }
-
-.mod-indent-3 {
-  width: 90px; }
-
-.mod-indent-4 {
-  width: 120px; }
-
-.mod-indent-5 {
-  width: 150px; }
-
-.mod-indent-6 {
-  width: 180px; }
-
-.mod-indent-7 {
-  width: 210px; }
-
-.mod-indent-8 {
-  width: 240px; }
-
-.mod-indent-9 {
-  width: 270px; }
-
-.mod-indent-10 {
-  width: 300px; }
-
-.mod-indent-11 {
-  width: 330px; }
-
-.mod-indent-12 {
-  width: 360px; }
-
-.mod-indent-13 {
-  width: 390px; }
-
-.mod-indent-14 {
-  width: 420px; }
-
-.mod-indent-15 {
-  width: 450px; }
-
-.mod-indent-16 {
-  width: 480px; }
-
-.mod-indent-huge {
-  width: 480px; }
+@media (min-width: 576px) {
+  /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */
+  .mod-indent-1 {
+    width: 30px; }
+  .mod-indent-2 {
+    width: 60px; }
+  .mod-indent-3 {
+    width: 90px; }
+  .mod-indent-4 {
+    width: 120px; }
+  .mod-indent-5 {
+    width: 150px; }
+  .mod-indent-6 {
+    width: 180px; }
+  .mod-indent-7 {
+    width: 210px; }
+  .mod-indent-8 {
+    width: 240px; }
+  .mod-indent-9 {
+    width: 270px; }
+  .mod-indent-10 {
+    width: 300px; }
+  .mod-indent-11 {
+    width: 330px; }
+  .mod-indent-12 {
+    width: 360px; }
+  .mod-indent-13 {
+    width: 390px; }
+  .mod-indent-14 {
+    width: 420px; }
+  .mod-indent-15 {
+    width: 450px; }
+  .mod-indent-16 {
+    width: 480px; }
+  .mod-indent-huge {
+    width: 480px; } }
 
 /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */
 .resourcecontent .mediaplugin_mp3 object {
@@ -11245,10 +11342,11 @@ dd:after {
     left: 0;
     right: auto;
     white-space: nowrap; }
-  .inplaceeditable.inplaceeditingon input {
-    width: 330px;
-    vertical-align: text-bottom;
-    margin-bottom: 0; }
+  @media (min-width: 576px) {
+    .inplaceeditable.inplaceeditingon input {
+      width: 330px;
+      vertical-align: text-bottom;
+      margin-bottom: 0; } }
   .inplaceeditable.inplaceeditingon select {
     margin-bottom: 0; }
 
@@ -11611,6 +11709,91 @@ body.h5p-embed .h5pmessages {
 .alert-dark a {
   color: #040505; }
 
+@media (max-width: 767.98px) {
+  #page-navbar {
+    width: 100%; }
+  .breadcrumb:not(:empty) {
+    width: 100%;
+    border: 2px solid #e9ecef;
+    padding: 0.25rem;
+    margin-bottom: 0.5rem; }
+    .breadcrumb:not(:empty) .breadcrumb-item {
+      padding-top: 0.3333333333rem;
+      padding-bottom: 0.3333333333rem;
+      display: inline-block; }
+  .mform {
+    width: 100%;
+    padding-right: 15px;
+    padding-left: 15px; }
+  .pagination {
+    flex-wrap: wrap;
+    justify-content: center; }
+  .custom-select {
+    max-width: 100%; }
+  .card .card-body {
+    padding: 0.625rem; }
+  #page-header .card {
+    border: 0; }
+    #page-header .card .card-body {
+      padding: 0; }
+  .nav-tabs,
+  .nav-pills {
+    margin: 0;
+    border: 0;
+    padding: 0.125rem;
+    background-color: #e9ecef; }
+    .nav-tabs .nav-item,
+    .nav-pills .nav-item {
+      flex: 1 1 auto;
+      text-align: center; }
+    .nav-tabs .nav-link,
+    .nav-pills .nav-link {
+      background: #fff;
+      border: 0;
+      margin: 0.125rem; }
+      .nav-tabs .nav-link.active,
+      .nav-pills .nav-link.active {
+        color: #6c757d;
+        border-color: #6c757d;
+        border-color: #6c757d; }
+        .nav-tabs .nav-link.active:hover,
+        .nav-pills .nav-link.active:hover {
+          color: #fff;
+          background-color: #6c757d;
+          border-color: #6c757d; }
+        .nav-tabs .nav-link.active:focus, .nav-tabs .nav-link.active.focus,
+        .nav-pills .nav-link.active:focus,
+        .nav-pills .nav-link.active.focus {
+          box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); }
+        .nav-tabs .nav-link.active.disabled, .nav-tabs .nav-link.active:disabled,
+        .nav-pills .nav-link.active.disabled,
+        .nav-pills .nav-link.active:disabled {
+          color: #6c757d;
+          background-color: transparent; }
+        .nav-tabs .nav-link.active:not(:disabled):not(.disabled):active, .nav-tabs .nav-link.active:not(:disabled):not(.disabled).active,
+        .show > .nav-tabs .nav-link.active.dropdown-toggle,
+        .nav-pills .nav-link.active:not(:disabled):not(.disabled):active,
+        .nav-pills .nav-link.active:not(:disabled):not(.disabled).active,
+        .show >
+        .nav-pills .nav-link.active.dropdown-toggle {
+          color: #fff;
+          background-color: #6c757d;
+          border-color: #6c757d; }
+          .nav-tabs .nav-link.active:not(:disabled):not(.disabled):active:focus, .nav-tabs .nav-link.active:not(:disabled):not(.disabled).active:focus,
+          .show > .nav-tabs .nav-link.active.dropdown-toggle:focus,
+          .nav-pills .nav-link.active:not(:disabled):not(.disabled):active:focus,
+          .nav-pills .nav-link.active:not(:disabled):not(.disabled).active:focus,
+          .show >
+          .nav-pills .nav-link.active.dropdown-toggle:focus {
+            box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); } }
+
+@media (max-width: 576px) and (max-height: 320px) {
+  div#page {
+    margin-top: 0; }
+  .navbar.fixed-top {
+    position: relative;
+    z-index: inherit; } }
+
 .icon {
   font-size: 16px;
   width: 16px;
@@ -12007,30 +12190,42 @@ body.h5p-embed .h5pmessages {
 .jsenabled .admin_colourpicker_preview {
   display: inline; }
 
-.jsenabled .admin_colourpicker {
-  display: block;
-  height: 102px;
-  width: 410px;
-  margin-bottom: 10px;
-  box-sizing: content-box; }
+@media (min-width: 768px) {
+  .jsenabled .admin_colourpicker {
+    display: block;
+    height: 102px;
+    width: 410px;
+    margin-bottom: 10px;
+    box-sizing: content-box; }
+  .admin_colourpicker .colourdialogue {
+    float: left;
+    border: 1px solid #d1edf6; }
+  .admin_colourpicker .previewcolour {
+    border: 1px solid #d1edf6;
+    margin-left: 301px; }
+  .admin_colourpicker .currentcolour {
+    border: 1px solid #d1edf6;
+    margin-left: 301px;
+    border-top-width: 0; } }
+
+@media (max-width: 767.98px) {
+  .jsenabled .admin_colourpicker {
+    height: 150px;
+    margin-bottom: 10px;
+    display: block;
+    position: relative; }
+  .admin_colourpicker .previewcolour {
+    display: none; }
+  .admin_colourpicker .currentcolour {
+    position: absolute;
+    border: 1px solid #dee2e6;
+    top: 100px;
+    left: 0; } }
 
 .admin_colourpicker .loadingicon {
   vertical-align: middle;
   margin-left: auto; }
 
-.admin_colourpicker .colourdialogue {
-  float: left;
-  border: 1px solid #d1edf6; }
-
-.admin_colourpicker .previewcolour {
-  border: 1px solid #d1edf6;
-  margin-left: 301px; }
-
-.admin_colourpicker .currentcolour {
-  border: 1px solid #d1edf6;
-  margin-left: 301px;
-  border-top-width: 0; }
-
 #page-admin-index #notice .checkforupdates {
   text-align: center; }
 
@@ -12207,25 +12402,28 @@ body.h5p-embed .h5pmessages {
   float: right; }
 
 /* We put an absolutely positioned div in a relatively positioned div so it takes up no space */
-#region-main-settings-menu {
-  position: relative;
-  float: left;
-  width: 100%; }
-
-#region-main-settings-menu > div {
-  position: absolute;
-  right: 0;
-  z-index: 100;
-  margin: 1rem; }
+@media (min-width: 576px) {
+  #region-main-settings-menu {
+    position: relative;
+    float: left;
+    width: 100%; }
+  #region-main-settings-menu > div {
+    position: absolute;
+    right: 0;
+    z-index: 100;
+    margin: 1rem; }
+  .region_main_settings_menu_proxy {
+    width: 4rem;
+    height: 2rem;
+    background-color: #fff;
+    margin-left: 0.625rem;
+    margin-bottom: 0.625rem;
+    border-bottom-left-radius: 0.5rem;
+    float: right; } }
 
-.region_main_settings_menu_proxy {
-  width: 4rem;
-  height: 2rem;
-  background-color: #fff;
-  margin-left: 0.625rem;
-  margin-bottom: 0.625rem;
-  border-bottom-left-radius: 0.5rem;
-  float: right; }
+@media (max-width: 767.98px) {
+  #region-main-settings-menu .menubar {
+    justify-content: flex-end; } }
 
 #region-main-settings-menu.has-blocks,
 #region-main.has-blocks {
@@ -12442,6 +12640,11 @@ body.h5p-embed .h5pmessages {
 .block.invisibleblock .card-title {
   color: #6c757d; }
 
+@media (max-width: 767.98px) {
+  .block.card {
+    border-left: 0;
+    border-right: 0; } }
+
 .navbar {
   max-height: 50px; }
 
@@ -12751,8 +12954,9 @@ body:not(.editing) .sitetopic ul.section {
   body:not(.editing) .sitetopic ul.section .label .mod-indent-outer {
     padding-left: 0; }
 
-.course-content ul.section {
-  margin: 1rem; }
+@media (min-width: 576px) {
+  .course-content ul.section {
+    margin: 1rem; } }
 
 .section .side {
   margin-top: 0.5rem; }
@@ -12803,9 +13007,10 @@ body:not(.editing) .sitetopic ul.section {
   display: block;
   height: inherit; }
 
-.section .label .mod-indent-outer {
-  padding-left: 24px;
-  display: block; }
+@media (min-width: 576px) {
+  .section .label .mod-indent-outer {
+    padding-left: 24px;
+    display: block; } }
 
 .section .filler {
   width: 16px;
@@ -12966,11 +13171,16 @@ body:not(.editing) .sitetopic ul.section {
   .course-content ul.weeks li.section {
     margin-top: 1rem;
     padding-bottom: 1rem; }
-    .course-content ul.topics li.section .summary,
-    .course-content ul.topics li.section .content > .availabilityinfo,
-    .course-content ul.weeks li.section .summary,
-    .course-content ul.weeks li.section .content > .availabilityinfo {
-      margin-left: 25px; }
+    .course-content ul.topics li.section .content,
+    .course-content ul.weeks li.section .content {
+      margin: 0;
+      padding: 0; }
+    @media (min-width: 576px) {
+      .course-content ul.topics li.section .summary,
+      .course-content ul.topics li.section .content > .availabilityinfo,
+      .course-content ul.weeks li.section .summary,
+      .course-content ul.weeks li.section .content > .availabilityinfo {
+        margin-left: 25px; } }
     .course-content ul.topics li.section .left,
     .course-content ul.topics li.section .right,
     .course-content ul.weeks li.section .left,
@@ -12979,12 +13189,23 @@ body:not(.editing) .sitetopic ul.section {
       text-align: right;
       width: auto; }
 
+@media (max-width: 767.98px) {
+  body:not(.editing) .course-content ul.topics li.section .left,
+  body:not(.editing) .course-content ul.topics li.section .right,
+  body:not(.editing) .course-content ul.weeks li.section .left,
+  body:not(.editing) .course-content ul.weeks li.section .right {
+    display: none; } }
+
 .course-content {
   margin-top: 0; }
 
 .course-content .hidden {
   display: none; }
 
+@media (max-width: 767.98px) {
+  .course-content li.section ul {
+    padding-left: 0; } }
+
 .course-content li.section ul {
   list-style: disc; }
   .course-content li.section ul ul {
@@ -13603,7 +13824,6 @@ span.editinstructions {
 /* Use a variable for the drawer background colors. */
 [data-region="drawer"] {
   position: fixed;
-  padding: 20px 20px;
   width: 285px;
   top: 50px;
   height: calc(100% - 50px);
@@ -13615,6 +13835,10 @@ span.editinstructions {
   -moz-transition: right 0.5s ease, left 0.5s ease;
   transition: right 0.5s ease, left 0.5s ease; }
 
+@media (min-width: 576px) {
+  [data-region="drawer"] {
+    padding: 20px 20px; } }
+
 #nav-drawer {
   right: auto;
   left: 0;
@@ -13672,6 +13896,8 @@ body.drawer-ease {
     padding: 0;
     visibility: visible;
     opacity: 1; }
+  [data-region=right-hand-drawer] .closewidget {
+    display: none; }
   [data-region=right-hand-drawer].hidden {
     display: block;
     right: -320px;
@@ -13682,6 +13908,18 @@ body.drawer-ease {
       [data-region=right-hand-drawer].hidden {
         transition: none; } }
 
+@media (max-width: 767.98px) {
+  [data-region=right-hand-drawer].drawer {
+    top: 0;
+    height: 100%;
+    z-index: 1030; }
+  [data-region=right-hand-drawer] .closewidget {
+    display: block;
+    padding: 0 0.2rem; }
+  body.drawer-open-left,
+  body.drawer-open-right {
+    overflow: hidden; } }
+
 .dir-rtl [data-region=right-hand-drawer] {
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08); }
 
@@ -14754,6 +14992,16 @@ a.ygtvspacer:hover {
     min-height: 400px; }
   .message-app .header-container {
     flex-shrink: 0; }
+  .message-app .overflow-y {
+    overflow-y: auto; }
+  @media (max-height: 320px) {
+    .message-app .header-container [data-region="view-overview"]:not(.hidden) {
+      display: flex;
+      align-items: center; }
+    .message-app .footer-container [data-region="view-overview"] {
+      display: none; }
+    .message-app .overflow-y {
+      overflow-y: unset; } }
   .message-app .body-container {
     flex: 1;
     overflow: hidden; }
@@ -14762,7 +15010,8 @@ a.ygtvspacer:hover {
       right: 0;
       left: 0;
       top: 0;
-      bottom: 0; }
+      bottom: 0;
+      overflow: auto; }
   .message-app .footer-container {
     flex-shrink: 0; }
     .message-app .footer-container textarea {
@@ -14908,6 +15157,12 @@ a.ygtvspacer:hover {
     .message-app .emoji-picker-container {
       right: -0.5rem; } }
 
+@media (max-height: 495px) {
+  .message-app .emoji-picker-container {
+    position: fixed;
+    top: 0;
+    transform: none; } }
+
 .message-app .emoji-auto-complete-container {
   overflow: auto;
   max-height: 90px;
@@ -15268,7 +15523,8 @@ body.jsenabled .questionflag input[type=checkbox] {
   margin: 1em 0; }
 
 #page-mod-quiz-edit ul.slots .activityinstance > a {
-  display: inline;
+  display: flex;
+  align-items: center;
   text-indent: 0;
   padding-left: 0; }
 
@@ -15779,8 +16035,9 @@ body.path-question-type .mform fieldset.hidden {
   margin-bottom: 0.5rem;
   border-bottom: 1px solid #dee2e6; }
 
-.mform > .form-group {
-  margin-left: 1.5rem; }
+@media (min-width: 576px) {
+  .mform > .form-group {
+    margin-left: 1.5rem; } }
 
 .editor_atto_content.form-control {
   width: 100%; }
@@ -16477,6 +16734,8 @@ select {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     font-size: 1.171875rem;
+    @media (max-width: 1200px) {
+      font-size: calc(0.9271875rem + 0.32625vw) ; }
     line-height: 1.5;
     right: 0; } }
 
@@ -16491,6 +16750,8 @@ select {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     font-size: 1.171875rem;
+    @media (max-width: 1200px) {
+      font-size: calc(0.9271875rem + 0.32625vw) ; }
     line-height: 1.5;
     right: 0; }
   to {
@@ -17978,9 +18239,6 @@ body.behat-site .custom-control-label::before, body.behat-site .custom-control-l
 .phpinfo h2 {
   margin: auto; }
 
-.phpinfo h2 {
-  width: 600px; }
-
 .phpinfo .e,
 .phpinfo .v,
 .phpinfo .h {