}
}
}}
-<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">
<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}}}
}
}}
<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>
{{^has_action}}
<li class="breadcrumb-item{{#is_hidden}} dimmed_text{{/is_hidden}}">{{{text}}}</li>
{{/has_action}}
- {{/get_items}}
- </ol>
+ {{/get_items}}{{!
+ }}</ol>
</nav>
"get_content": "Edit profile"
}
}}
+<div class="container-fluid p-sm-0">
<div class="row">
{{#groups}}
<div class="col-md-4">
</div>
{{/groups}}
</div>
+</div>
HEADER_CONTAINER: '[data-region="header-container"]',
BODY_CONTAINER: '[data-region="body-container"]',
FOOTER_CONTAINER: '[data-region="footer-container"]',
+ CLOSE_BUTTON: '[data-action="closedrawer"]'
};
/**
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);
{{< 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 }}
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
>
</div>
{{/showemojipicker}}
-<div class="d-flex mt-1">
+<div class="d-flex mt-sm-1">
<textarea
dir="auto"
data-region="send-message-txt"
}}
<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"
>
{{#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"
{}
}}
-<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">
</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}}
>
<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}}"
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;
}
#page-mod-quiz-edit ul.slots {
margin: 0;
+ padding: 0;
}
#page-mod-quiz-edit ul.slots li.section {
background: #e6e6e6;
margin: 3px 0;
padding: 0.2em;
+ position: relative;
}
#page-mod-quiz-edit ul.slots li.section li.activity.page {
#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 {
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 {
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 {
$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.
.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
#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;
}
}
+@include media-breakpoint-down(sm) {
+ #goto-top-link {
+ bottom: 0;
+ }
+}
+
body.scrolled #goto-top-link {
opacity: 1;
visibility: visible;
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;
}
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) */
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 {
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
}
}
-.course-content ul.section {
- margin: $spacer;
+@include media-breakpoint-up(sm) {
+ .course-content ul.section {
+ margin: $spacer;
+ }
}
-
.section {
.side {
&.left {
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;
+ }
}
}
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,
}
}
+@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;
}
.course-content li {
&.section {
+ @include media-breakpoint-down(sm) {
+ ul {
+ padding-left: 0;
+ }
+ }
ul {
list-style: disc;
margin: auto;
}
-.phpinfo h2 {
- width: 600px;
-}
-
.phpinfo .e,
.phpinfo .v,
.phpinfo .h {
[data-region="drawer"] {
position: fixed;
- padding: $drawer-padding-x $drawer-padding-y;
width: $drawer-width;
top: $fixed-header-y;
height: calc(100% - #{$navbar-height});
-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;
opacity: 1;
}
+ .closewidget {
+ display: none;
+ }
+
&.hidden {
display: block;
right: $right-drawer-width * -1;
@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);
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 {
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;
left: 0;
top: 0;
bottom: 0;
+ overflow: auto;
}
}
}
}
+ @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.
#page-mod-quiz-edit ul.slots .activityinstance {
> a {
- display: inline;
+ display: flex;
+ align-items: center;
text-indent: 0;
padding-left: 0;
}
// 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
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; }
line-height: inherit;
color: inherit;
white-space: normal; }
+ @media (max-width: 1200px) {
+ legend {
+ font-size: calc(0.96rem + 0.72vw) ; } }
progress {
vertical-align: baseline; }
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;
.blockquote {
margin-bottom: 1rem;
font-size: 1.171875rem; }
+ @media (max-width: 1200px) {
+ .blockquote {
+ font-size: calc(0.9271875rem + 0.32625vw) ; } }
.blockquote-footer {
display: block;
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; } }
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);
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; }
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; } }
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;
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;
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; }
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 {
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;
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;
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; }
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; }
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;
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; }
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; }
#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;
right: 0;
transform: translateY(-100%); }
+@media (max-width: 767.98px) {
+ #goto-top-link {
+ bottom: 0; } }
+
body.scrolled #goto-top-link {
opacity: 1;
visibility: visible;
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; }
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 {
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; }
.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;
.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; }
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 {
.block.invisibleblock .card-title {
color: #6c757d; }
+@media (max-width: 767.98px) {
+ .block.card {
+ border-left: 0;
+ border-right: 0; } }
+
.navbar {
max-height: 50px; }
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; }
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;
.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,
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 {
/* Use a variable for the drawer background colors. */
[data-region="drawer"] {
position: fixed;
- padding: 20px 20px;
width: 285px;
top: 50px;
height: calc(100% - 50px);
-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;
padding: 0;
visibility: visible;
opacity: 1; }
+ [data-region=right-hand-drawer] .closewidget {
+ display: none; }
[data-region=right-hand-drawer].hidden {
display: block;
right: -320px;
[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); }
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; }
right: 0;
left: 0;
top: 0;
- bottom: 0; }
+ bottom: 0;
+ overflow: auto; }
.message-app .footer-container {
flex-shrink: 0; }
.message-app .footer-container textarea {
.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;
margin: 1em 0; }
#page-mod-quiz-edit ul.slots .activityinstance > a {
- display: inline;
+ display: flex;
+ align-items: center;
text-indent: 0;
padding-left: 0; }
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%; }
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; } }
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 {
.phpinfo h2 {
margin: auto; }
-.phpinfo h2 {
- width: 600px; }
-
.phpinfo .e,
.phpinfo .v,
.phpinfo .h {
// 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
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; }
line-height: inherit;
color: inherit;
white-space: normal; }
+ @media (max-width: 1200px) {
+ legend {
+ font-size: calc(0.96rem + 0.72vw) ; } }
progress {
vertical-align: baseline; }
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;
.blockquote {
margin-bottom: 1rem;
font-size: 1.171875rem; }
+ @media (max-width: 1200px) {
+ .blockquote {
+ font-size: calc(0.9271875rem + 0.32625vw) ; } }
.blockquote-footer {
display: block;
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; } }
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);
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; }
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; } }
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;
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;
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; }
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 {
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;
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;
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; }
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; }
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;
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; }
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; }
#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;
right: 0;
transform: translateY(-100%); }
+@media (max-width: 767.98px) {
+ #goto-top-link {
+ bottom: 0; } }
+
body.scrolled #goto-top-link {
opacity: 1;
visibility: visible;
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; }
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 {
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; }
.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;
.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; }
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 {
.block.invisibleblock .card-title {
color: #6c757d; }
+@media (max-width: 767.98px) {
+ .block.card {
+ border-left: 0;
+ border-right: 0; } }
+
.navbar {
max-height: 50px; }
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; }
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;
.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,
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 {
/* Use a variable for the drawer background colors. */
[data-region="drawer"] {
position: fixed;
- padding: 20px 20px;
width: 285px;
top: 50px;
height: calc(100% - 50px);
-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;
padding: 0;
visibility: visible;
opacity: 1; }
+ [data-region=right-hand-drawer] .closewidget {
+ display: none; }
[data-region=right-hand-drawer].hidden {
display: block;
right: -320px;
[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); }
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; }
right: 0;
left: 0;
top: 0;
- bottom: 0; }
+ bottom: 0;
+ overflow: auto; }
.message-app .footer-container {
flex-shrink: 0; }
.message-app .footer-container textarea {
.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;
margin: 1em 0; }
#page-mod-quiz-edit ul.slots .activityinstance > a {
- display: inline;
+ display: flex;
+ align-items: center;
text-indent: 0;
padding-left: 0; }
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%; }
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; } }
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 {
.phpinfo h2 {
margin: auto; }
-.phpinfo h2 {
- width: 600px; }
-
.phpinfo .e,
.phpinfo .v,
.phpinfo .h {