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,
    .form-item .form-dependenton,
    .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,
    .form-item .form-dependenton,
    .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,
    .form-item .form-dependenton {
        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;
    }
}