File: /home/iestorre/moodleAW/moodle310/theme/bootstrapbase/less/moodle/responsive.less
/* responsive.less */
// Should probably be moved to relevant .less files
// after 4095 selector issue is solved
// TODO: MDL-55142 remove browser hacks in this file:
/* stylelint-disable declaration-block-no-duplicate-properties */
@media (min-width: (@navbarCollapseDesktopWidth)) {
a[id]:empty::before,
a[name]:empty::before {
display: inline-block;
position: relative;
content: '';
padding-top: @navbarHeight;
margin-top: -@navbarHeight;
vertical-align: top;
}
}
@media (min-width: 980px) and (max-width: 1199px) {
// Wider form labels.
.form-item .form-label,
.mform .fitem div.fitemtitle,
.userprofile dl.list dt,
.form-horizontal .control-label {
width: @horizontalComponentOffset980 - 20px;
}
.form-item .form-setting,
.form-item .form-description,
.mform .fitem .felement,
#page-mod-forum-search .c1,
.mform .fdescription.required,
.userprofile dl.list dd,
.form-horizontal .controls {
margin-left: @horizontalComponentOffset980;
}
#page-mod-forum-search.dir-lrt .c1 {
margin-right: @horizontalComponentOffset980;
}
.path-admin .buttons,
.form-buttons {
padding-left: @horizontalComponentOffset980;
}
}
@media (max-width: 767px) {
.file-picker .fp-repo-area {
width: 100%;
height: auto;
max-height: 220px;
float: none;
border: 0;
}
.file-picker .fp-repo-items {
width: 100%;
float: none;
margin-left: 0;
}
.file-picker .fp-login-form .fp-login-input label {
text-align: left;
}
.file-picker .fp-content form td {
display: block;
width: 100%;
text-align: left;
}
.fp-content .mdl-right {
text-align: left;
}
.fp-repo-items .fp-navbar {
border-top: 1px solid rgb(187, 187, 187);
}
.fp-formset div {
height: auto;
}
}
@media (min-width: 1200px) {
// Editor on question page
.path-question {
#id_answerhdr div.fitem_feditor {
padding-right: 6px;
}
}
// Login page.
.loginbox.twocolumns .loginpanel {
margin-left: 0;
}
.loginbox.twocolumns .loginpanel,
.loginbox.twocolumns .signuppanel {
width: 48.717948717948715%;
*width: 48.664757228587014%;
}
// Wider form labels.
.form-item .form-label,
.mform .fitem div.fitemtitle,
.userprofile dl.list dt,
.form-horizontal .control-label {
width: @horizontalComponentOffset1200 - 20px;
}
.form-item .form-setting,
.form-item .form-description,
.mform .fitem .felement,
#page-mod-forum-search .c1,
.mform .fdescription.required,
.userprofile dl.list dd,
.form-horizontal .controls {
margin-left: @horizontalComponentOffset1200;
}
.path-admin .buttons,
.form-buttons {
padding-left: @horizontalComponentOffset1200;
}
// Core empty block regions.
.fluid-span (@columns) {
.fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
}
.empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
.jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
#region-main.span8 {
/** increase the span size by 1 **/
.fluid-span(9);
}
#block-region-side-pre.span4 {
/** decrease the span size by 1 **/
.fluid-span(3);
}
}
}
@media (min-width: 980px) {
.loginbox.twocolumns .loginpanel {
margin-left: 0;
}
.loginbox.twocolumns .loginpanel,
.loginbox.twocolumns .signuppanel {
width: 48.617948717948715%;
*width: 48.664757228587014%;
}
}
@media (min-width: 768px) and (max-width: 979px) {
// Login page.
.loginbox.twocolumns .loginpanel {
margin-left: 0;
}
.loginbox.twocolumns .loginpanel,
.loginbox.twocolumns .signuppanel {
width: 48.61878453038674%;
*width: 48.56559304102504%;
}
// Core empty block regions.
.fluid-span (@columns) {
.fluid-span-full(@columns, @fluidGridColumnWidth768, @fluidGridGutterWidth768);
}
.empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
.jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
#region-main.span8 {
/** increase the span size by 1 **/
.fluid-span(9);
}
#block-region-side-pre.span4 {
/** decrease the span size by 1 **/
.fluid-span(3);
}
}
}
@media (max-width: 767px) {
.loginbox.twocolumns .loginpanel,
.loginbox.twocolumns .signuppanel {
display: block;
float: none;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
#page-mod-quiz-edit div.quizcontents,
.questionbankwindow.block {
width: 100%;
float: none;
}
#page-mod-quiz-edit #block-region-side-pre,
#page-mod-quiz-edit #block-region-side-post {
clear: both;
}
}
@media (max-width: 480px) {
.navbar {
.mdl-popover {
.mdl-popover-container {
position: fixed;
width: 100%;
height: ~"calc(100% - 52px)";
top: 52px;
&::before,
&::after {
display: none;
}
}
}
}
// make tabs act like nav-stacked
// (mostly) copied from bootstrap/navs.less
.nav-tabs > li {
float: none;
}
.nav-tabs > li > a {
margin-right: 0; // no need for the gap between nav items
}
.nav-tabs {
border-bottom: 0;
}
.nav-tabs > li > a {
border: 1px solid #ddd;
.border-radius(0);
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
border: 1px solid #ddd;
}
.nav-tabs > li:first-child > a {
.border-top-radius(4px);
}
.nav-tabs > li:last-child > a {
.border-bottom-radius(4px);
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
border-color: #ddd;
z-index: 2;
}
.fp-content-center {
display: block;
}
.course-content ul.topics li.section,
.course-content ul.topics li.section .content,
.course-content ul.weeks li.section .content,
.course-content ul.weeks li.section,
.course-content ul.section {
margin-right: 0;
margin-left: 0;
padding: 0;
}
.activityinstance {
display: block;
}
.editing .course-content .section .activity {
margin-bottom: 0.2em;
padding-bottom: 0.2em;
border-bottom: thin solid #eee;
}
.course-content .section .activity .commands {
text-align: right;
}
/** Handles display of the activity chooser on small screens **/
.jsenabled .choosercontainer #chooseform .alloptions {
max-width: 100%;
}
.jsenabled .choosercontainer #chooseform .instruction,
.jsenabled .choosercontainer #chooseform .typesummary {
position: static;
}
.que .info {
float: none;
width: auto;
}
.que .content {
margin: 0;
}
.path-mod-choice .horizontal .choices .option {
display: block;
}
.path-mod-forum .forumsearch #search {
width: 120px;
}
.path-mod-forum .forumheaderlist .picture {
display: none;
}
}
// Stuart's 2,1,3 layout
@media (min-width: 768px) {
.row-fluid .desktop-first-column {
margin-left: 0;
}
#page-navbar .breadcrumb-button {
display: inline;
}
}
@media (max-width: 767px) {
.row-fluid .desktop-first-column {
clear: both;
}
}
// Forms
@media (max-width: 767px) {
// Remove the horizontal form styles
.form-item .form-label,
.mform .fitem div.fitemtitle {
// copied from .control-label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
.form-item .form-label label {
display: inline-block;
margin-right: .5em;
}
.form-item .form-setting .form-checkbox {
margin-top: 0;
}
.form-label span.form-shortname {
display: inline-block;
}
.form-item .form-setting,
.mform .fitem .felement,
.path-backup .mform .fitem .felement,
.mform .fdescription.required,
.form-item .form-description {
margin-left: 0;
}
table#form td.submit,
.form-buttons,
#fitem_id_submitbutton,
.fp-content-center form + div,
#fgroup_id_buttonar,
.form-horizontal .form-actions,
.fitem_fsubmit .felement.fsubmit {
padding-left: 10px;
padding-right: 10px;
}
#helppopupbox {
/* stylelint-disable declaration-no-important */
width: auto !important;
left: 0 !important;
/* stylelint-enable declaration-no-important */
}
}
// Shrink calender when short on space in block
@media (min-width: 768px) and (max-width: 979px) {
.block_calendar_month .content,
.block .minicalendar td {
padding-left: 0;
padding-right: 0;
}
}
@media (max-width: 979px) {
.nav-collapse {
height: 0;
.nav > li > a {
color: @grayDark;
}
.nav > li > a:hover,
.nav > li > a:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-submenu a:hover,
.dropdown-submenu a:focus,
.dropdown-submenu a:active,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
background-image: none;
color: @grayDark;
}
}
.nav-collapse.in {
height: auto;
.usermenu .moodle-actionmenu[data-enhanced] {
.toggle-display {
display: none;
}
.menu {
display: block;
li {
margin: 0 0.5em;
}
}
}
}
.path-mod-data .box > table > tbody > tr > td {
display: block;
}
.path-mod-forum .forumheaderlist {
thead .header {
font-weight: normal;
font-size: round(@fontSizeSmall);
}
.discussion {
.author,
.replies,
.lastpost {
font-size: round(@fontSizeSmall);
}
.replies .unread a {
padding: 0;
}
}
}
.navbar {
.nav-collapse.in {
border-top: 1px solid @navbarBorder;
&.pull-left,
&.pull-right {
float: none;
}
> .nav {
margin: 0;
// Add padding to first-level links.
> li > a {
padding-left: 20px;
border-radius: 0;
}
.dropdown-menu {
margin: 0 0 0 15px;
li > a {
border-radius: 0;
}
}
}
.nav,
.nav .dropdown-menu {
.dropdown-submenu {
.dropdown-toggle {
&:after {
display: inline-block;
float: none;
.caret();
border-top-color: @navbarBorder;
margin-left: 4px;
margin-top: 8px;
}
}
&.open {
> a {
background-color: @navbarBackground;
}
}
// Suppress showing of submenu menu content on hover.
&:hover {
.dropdown-menu {
display: none;
}
&.open {
> a {
background-color: @navbarBackground;
}
> .dropdown-menu,
.open > .dropdown-menu {
display: block;
}
}
}
}
.divider {
width: auto;
display: block;
height: 0;
margin: 4px 1px;
border-left: 0 none;
border-right: 0 none;
border-top: 1px solid @navbarBorder;
border-bottom: 1px solid @navbarBackgroundHighlight;
}
}
}
}
.navbar-inverse {
.nav-collapse.in {
border-top-color: @navbarInverseBorder;
.nav,
.nav .dropdown-menu {
.dropdown-submenu {
.dropdown-toggle {
&:after {
border-top-color: @navbarInverseBorder;
}
}
&.open {
> a {
background-color: @navbarInverseBackground;
}
}
&:hover {
&.open {
> a {
background-color: @navbarInverseBackground;
}
}
}
}
.divider {
width: auto;
display: block;
height: 0;
margin: 4px 1px;
border-top: 1px solid @navbarInverseBackground;
border-bottom: 1px solid lighten(@navbarInverseBackground, 25%);
}
}
.nav {
> li > a {
&:hover,
&:focus {
color: @navbarInverseLinkColorHover;
}
}
}
.dropdown-menu a {
&:hover,
&:focus {
color: @navbarInverseLinkColorHover;
}
> li > a {
&:hover,
&:focus {
color: @navbarInverseLinkColorHover;
}
}
}
.dropdown-submenu a {
&:hover,
&:focus,
&:active {
color: @navbarInverseLinkColorHover;
}
}
}
}
}
@media (max-width: 767px) {
.usermenu {
.moodle-actionmenu {
.toggle-display {
.userbutton {
.usertext {
display: none;
}
}
}
}
}
.jsenabled {
&:not(.dir-rtl) {
.usermenu {
.moodle-actionmenu {
.toggle-display {
&.textmenu {
margin-left: 0;
padding-left: 0;
}
}
}
}
}
&.dir-rtl {
.usermenu {
.moodle-actionmenu {
.toggle-display {
&.textmenu {
margin-right: 0;
padding-right: 0;
}
}
}
}
}
}
// Resize, reflow file-picker on small devices
#filesskin .yui3-panel,
#filesskin .file-picker.fp-generallayout {
width: 100%;
left: 0;
}
.userprofile dl.list {
// copied from dl-horizontal in bootstrap/repsonsive.less
dt {
float: none;
clear: none;
width: auto;
text-align: left;
}
dd {
margin-left: 0;
}
}
// Reset the alignment for required label to display inline on mobile devices
#page-mod-wiki-create .mform .fitem div.fitemtitle {
float: left;
}
// GRID & CONTAINERS
// -----------------
// Remove width from containers
.container {
width: auto;
}
// Fluid rows
.row-fluid {
width: 100%;
}
.row-fluid .span8.pull-right,
.row-fluid .span9.pull-right {
float: none;
}
// Undo negative margin on rows and thumbnails
.row {
margin-left: 0;
}
// Make all grid-sized elements block level again
[class*="span"],
.row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
// We need to specify a more specific selector to reset the width for
// cases when we have content in the side-pre blockregion but not in the
// side-post blockregion as there are more specific selectors in
// core.less which take precedence which break responsiveness.
.empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
.jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
#block-region-side-pre.span4,
#region-main.span8 {
.fluid-span(12);
}
}
.row-fluid .span12 {
width: 100%;
.box-sizing(border-box);
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0;
}
div[role=main] {
margin-bottom: 1em;
}
.coursebox {
.info {
.name {
a {
background-position: 0 13px;
}
}
}
}
.category-browse {
.coursebox {
.info {
.name {
a {
background-position: 0 13px;
}
}
}
}
}
}
// All widths between 1200px and 1600px
@media (min-width: 1200px) and (max-width: 1600px) {
.fluid-span (@columns) {
.fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
}
// CSS for the course management pages.
#course-category-listings.columns-3 {
background-color: @tableBackground;
border: 0;
#category-listing,
#course-listing {
.fluid-span(6);
margin-left: @fluidGridGutterWidth1200;
*margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
&:first-child {
margin-left: 0;
}
}
#course-detail {
.fluid-span(12);
margin: 1em 0 0;
}
}
}
// All widths up to 1199px.
@media (max-width: 1199px) {
// Editor on question pages
.path-question {
#id_answerhdr div.fitem {
padding-right: 6px;
padding-left: 4px;
}
}
// CSS for the course management pages.
#course-category-listings.columns-3 {
background-color: @tableBackground;
border: 0;
#category-listing,
#course-listing,
#course-detail {
.fluid-span(12);
margin: 0 0 1em 0;
}
}
#page-mod-forum-discuss .discussioncontrols {
text-align: right;
.discussioncontrol {
float: none;
width: auto;
display: inline-block;
margin: 0 3px 0.5em;
select,
input {
margin-bottom: 0;
}
&.movediscussion {
margin-right: 0;
padding-right: 0;
}
}
}
}
// File Picker.
@media (max-width: 768px) {
.fp-forminset .control-group .controls {
margin-left: 0;
}
}