weekly release 2.8dev

[moodle.git] / theme / bootstrapbase / less / moodle / responsive.less

/* responsive.less */

// Should probably be moved to relevant .less files
// after 4095 selector issue is solved

@media (min-width: 980px) {
    .dir-rtl .navbar .nav.pull-right,
    .dir-rtl .navbar .logininfo {
        float: left;
    }
    .dir-rtl .navbar .nav {
        float: right;
        & > li {
            float: right;
        }
    }
}

@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;
    }
    .dir-rtl {
        .form-item .form-setting,
        .form-item .form-description,
        .mform .fitem .felement,
        .mform .fdescription.required,
        .userprofile dl.list dd,
        .form-horizontal .controls {
            margin-right: @horizontalComponentOffset980;
        }
    }
    #page-mod-forum-search.dir-lrt .c1 {
        margin-right: @horizontalComponentOffset980;
    }
    .path-admin .buttons,
    .form-buttons {
        padding-left: @horizontalComponentOffset980;
    }
}

@media (max-width: 873px) {
    .file-picker .fp-repo-area {
        width: 100%;
        height: auto;
        max-height: 220px;
        y-scroll: auto;
        float: none;
        border: 0px;
    }
    .file-picker .fp-repo-items {
        width: 100%;
        float: none;
    }
    .file-picker .fp-login-form .fp-login-input label {
        text-align: left;
    }
    .dir-rtl .file-picker .fp-login-form .fp-login-input label {
        text-align: right;
    }
    .file-picker .fp-content form td {
        display: block;
        width: 100%;
        text-align: left;
    }
    .dir-rtl .file-picker .fp-content form td {
        text-align: right;
    }
    .fp-content .mdl-right {
        text-align: left;
    }
    .dir-rtl .fp-content .mdl-right {
        text-align: right;
    }

    .fp-repo-items .fp-navbar {
        border-top: 1px solid rgb(187, 187, 187);
    }

    .dir-rtl {
        .userprofile dl.list dt,
        .userprofile dl.list dd {
            float: none;
            text-align: right;
            margin-right: 0;
        }
    }

    .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;
    }
    .dir-rtl {
        .form-item .form-setting,
        .form-item .form-description,
        .mform .fitem .felement,
        .mform .fdescription.required,
        .userprofile dl.list dd,
        .form-horizontal .controls {
            margin-right: (@horizontalComponentOffset1200 - 100px);
        }
        #page-mod-forum-search .c1 {
            margin-right: @horizontalComponentOffset1200;
        }
        .form-item .form-label,
        .mform .fitem div.fitemtitle,
        .userprofile dl.list dt,
        .form-horizontal .control-label {
            width: (@horizontalComponentOffset1200 - 120px);
        }

    }
    .path-admin .buttons,
    .form-buttons {
        padding-left: @horizontalComponentOffset1200;
    }
    .dir-rtl {
        .path-admin .buttons,
        .form-buttons {
            padding-right: @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) {
    // 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;
        vertical-align: top;
    }
    .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: right;
  }
}
// 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 {
        width: auto !important;
        left: 0 !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;
    }
}

.dir-rtl {
    .dropdown-menu {
        right:0;
        left:auto;
        margin-right: 0px;
    }
    .navbar .nav > li > .dropdown-menu:before {
        right:9px;
        left:auto;
    }
    .navbar .nav > li > .dropdown-menu:after {
        right: 10px;
        left:auto;
    }
    .dropdown-submenu > a:after {
        margin-right: 0;
        margin-left: -10px;
        float: left;
        border-right-color: #ccc;
        border-left-color: transparent;
        border-width: 5px 5px 5px 0px;
    }
    .dropdown-submenu > .dropdown-menu {
        right:100%;
        left:auto;
    }
}

@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:focus,
        .dropdown-submenu a:hover,
        .dropdown-submenu a:active,
        .dropdown-menu > li > a:hover,
        .dropdown-menu > li > a:focus,
        {
            background-image: none;
            color: @grayDark;
        }
    }
    .nav-collapse.active {
        height: auto;
    }
    .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;
            }
        }
    }
}

@media (max-width: 767px) {
// 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;
            }
        }
    }

   #page-mod-forum-discuss.dir-rtl .discussioncontrols {
       text-align: left;
   }
}


// File Picker.
@media (max-width: 768px) {
    .fp-forminset .control-group .controls {
        margin-left: 0;
    }
    .dir-rtl .fp-formset .control-group {
        label.control-label {
            text-align: right;
            float: none;
        }
    }
    .dir-rtl .fp-forminset .control-group {
        label.control-label {
            text-align: right;
            float: none;
        }
        .controls {
            margin-right: 0;
        }
    }
}