theme/bootstrapbase/less/moodle/responsive.less

   1 /* responsive.less */
   2
   3 // Should probably be moved to relevant .less files
   4 // after 4095 selector issue is solved
   5
   6 // TODO: MDL-55142 remove browser hacks in this file:
   7 /* stylelint-disable declaration-block-no-duplicate-properties, no-browser-hacks */
   8
   9 @media (min-width: (@navbarCollapseDesktopWidth)) {
  10
  11     a[id]:empty::before,
  12     a[name]:empty::before {
  13         display: inline-block;
  14         position: relative;
  15         content: '';
  16         padding-top: @navbarHeight;
  17         margin-top: -@navbarHeight;
  18         vertical-align: top;
  19     }
  20
  21 }
  22
  23 @media (min-width: 980px) and (max-width: 1199px) {
  24     // Wider form labels.
  25     .form-item .form-label,
  26     .mform .fitem div.fitemtitle,
  27     .userprofile dl.list dt,
  28     .form-horizontal .control-label {
  29         width: @horizontalComponentOffset980 - 20px;
  30     }
  31     .form-item .form-setting,
  32     .form-item .form-description,
  33     .mform .fitem .felement,
  34     #page-mod-forum-search .c1,
  35     .mform .fdescription.required,
  36     .userprofile dl.list dd,
  37     .form-horizontal .controls {
  38         margin-left: @horizontalComponentOffset980;
  39     }
  40     #page-mod-forum-search.dir-lrt .c1 {
  41         margin-right: @horizontalComponentOffset980;
  42     }
  43     .path-admin .buttons,
  44     .form-buttons {
  45         padding-left: @horizontalComponentOffset980;
  46     }
  47 }
  48
  49 @media (max-width: 767px) {
  50     .file-picker .fp-repo-area {
  51         width: 100%;
  52         height: auto;
  53         max-height: 220px;
  54         float: none;
  55         border: 0;
  56     }
  57     .file-picker .fp-repo-items {
  58         width: 100%;
  59         float: none;
  60         margin-left: 0;
  61     }
  62     .file-picker .fp-login-form .fp-login-input label {
  63         text-align: left;
  64     }
  65     .file-picker .fp-content form td {
  66         display: block;
  67         width: 100%;
  68         text-align: left;
  69     }
  70     .fp-content .mdl-right {
  71         text-align: left;
  72     }
  73
  74     .fp-repo-items .fp-navbar {
  75         border-top: 1px solid rgb(187, 187, 187);
  76     }
  77
  78     .fp-formset div {
  79         height: auto;
  80     }
  81 }
  82
  83 @media (min-width: 1200px) {
  84     // Editor on question page
  85     .path-question {
  86         #id_answerhdr div.fitem_feditor {
  87             padding-right: 6px;
  88         }
  89     }
  90     // Login page.
  91     .loginbox.twocolumns .loginpanel {
  92         margin-left: 0;
  93     }
  94     .loginbox.twocolumns .loginpanel,
  95     .loginbox.twocolumns .signuppanel {
  96         width: 48.717948717948715%;
  97         *width: 48.664757228587014%;
  98     }
  99     // Wider form labels.
 100     .form-item .form-label,
 101     .mform .fitem div.fitemtitle,
 102     .userprofile dl.list dt,
 103     .form-horizontal .control-label {
 104         width: @horizontalComponentOffset1200 - 20px;
 105     }
 106     .form-item .form-setting,
 107     .form-item .form-description,
 108     .mform .fitem .felement,
 109     #page-mod-forum-search .c1,
 110     .mform .fdescription.required,
 111     .userprofile dl.list dd,
 112     .form-horizontal .controls {
 113         margin-left: @horizontalComponentOffset1200;
 114     }
 115     .path-admin .buttons,
 116     .form-buttons {
 117         padding-left: @horizontalComponentOffset1200;
 118     }
 119
 120     // Core empty block regions.
 121     .fluid-span (@columns) {
 122         .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
 123     }
 124     .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
 125     .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
 126         #region-main.span8 {
 127             /** increase the span size by 1 **/
 128             .fluid-span(9);
 129         }
 130         #block-region-side-pre.span4 {
 131             /** decrease the span size by 1 **/
 132             .fluid-span(3);
 133         }
 134     }
 135 }
 136
 137 @media (min-width: 980px) {
 138     .loginbox.twocolumns .loginpanel {
 139         margin-left: 0;
 140     }
 141     .loginbox.twocolumns .loginpanel,
 142     .loginbox.twocolumns .signuppanel {
 143         width: 48.617948717948715%;
 144         *width: 48.664757228587014%;
 145     }
 146 }
 147
 148 @media (min-width: 768px) and (max-width: 979px) {
 149     // Login page.
 150     .loginbox.twocolumns .loginpanel {
 151         margin-left: 0;
 152     }
 153     .loginbox.twocolumns .loginpanel,
 154     .loginbox.twocolumns .signuppanel {
 155         width: 48.61878453038674%;
 156         *width: 48.56559304102504%;
 157     }
 158     // Core empty block regions.
 159     .fluid-span (@columns) {
 160         .fluid-span-full(@columns, @fluidGridColumnWidth768, @fluidGridGutterWidth768);
 161     }
 162     .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
 163     .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
 164         #region-main.span8 {
 165             /** increase the span size by 1 **/
 166             .fluid-span(9);
 167         }
 168         #block-region-side-pre.span4 {
 169             /** decrease the span size by 1 **/
 170             .fluid-span(3);
 171         }
 172     }
 173 }
 174
 175 @media (max-width: 767px) {
 176     .loginbox.twocolumns .loginpanel,
 177     .loginbox.twocolumns .signuppanel {
 178         display: block;
 179         float: none;
 180         width: 100%;
 181         margin-left: 0;
 182         .box-sizing(border-box);
 183     }
 184     #page-mod-quiz-edit div.quizcontents,
 185     .questionbankwindow.block {
 186         width: 100%;
 187         float: none;
 188     }
 189     #page-mod-quiz-edit #block-region-side-pre,
 190     #page-mod-quiz-edit #block-region-side-post {
 191         clear: both;
 192     }
 193
 194 }
 195
 196 @media (max-width: 480px) {
 197     // make tabs act like nav-stacked
 198     // (mostly) copied from bootstrap/navs.less
 199     .nav-tabs > li {
 200         float: none;
 201     }
 202     .nav-tabs > li > a {
 203         margin-right: 0; // no need for the gap between nav items
 204     }
 205     .nav-tabs {
 206         border-bottom: 0;
 207     }
 208     .nav-tabs > li > a {
 209         border: 1px solid #ddd;
 210         .border-radius(0);
 211     }
 212     .nav-tabs > .active > a,
 213     .nav-tabs > .active > a:hover {
 214         border: 1px solid #ddd;
 215     }
 216     .nav-tabs > li:first-child > a {
 217         .border-top-radius(4px);
 218     }
 219     .nav-tabs > li:last-child > a {
 220         .border-bottom-radius(4px);
 221     }
 222     .nav-tabs > li > a:hover,
 223     .nav-tabs > li > a:focus {
 224         border-color: #ddd;
 225         z-index: 2;
 226     }
 227     .fp-content-center {
 228         display: block;
 229     }
 230     .course-content ul.topics li.section,
 231     .course-content ul.topics li.section .content,
 232     .course-content ul.weeks li.section .content,
 233     .course-content ul.weeks li.section,
 234     .course-content ul.section {
 235         margin-right: 0;
 236         margin-left: 0;
 237         padding: 0;
 238     }
 239     .activityinstance {
 240         display: block;
 241     }
 242     .editing .course-content .section .activity {
 243         margin-bottom: 0.2em;
 244         padding-bottom: 0.2em;
 245         border-bottom: thin solid #eee;
 246     }
 247     .course-content .section .activity .commands {
 248         text-align: right;
 249     }
 250     /** Handles display of the activity chooser on small screens **/
 251     .jsenabled .choosercontainer #chooseform .alloptions {
 252         max-width: 100%;
 253     }
 254     .jsenabled .choosercontainer #chooseform .instruction,
 255     .jsenabled .choosercontainer #chooseform .typesummary {
 256         position: static;
 257     }
 258     .que .info {
 259         float: none;
 260         width: auto;
 261     }
 262     .que .content {
 263         margin: 0;
 264     }
 265     .path-mod-choice .horizontal  .choices .option {
 266         display: block;
 267     }
 268     .path-mod-forum .forumsearch #search {
 269         width: 120px;
 270     }
 271     .path-mod-forum .forumheaderlist .picture {
 272         display: none;
 273     }
 274 }
 275
 276 // Stuart's 2,1,3 layout
 277 @media (min-width: 768px) {
 278     .row-fluid .desktop-first-column {
 279         margin-left: 0;
 280     }
 281     #page-navbar .breadcrumb-button {
 282         display: inline;
 283     }
 284 }
 285
 286 @media (max-width: 767px) {
 287     .row-fluid .desktop-first-column {
 288         clear: both;
 289     }
 290 }
 291 // Forms
 292 @media (max-width: 767px) {
 293     // Remove the horizontal form styles
 294     .form-item .form-label,
 295     .mform .fitem div.fitemtitle {
 296         // copied from .control-label {
 297         float: none;
 298         width: auto;
 299         padding-top: 0;
 300         text-align: left;
 301     }
 302     .form-item .form-label label {
 303         display: inline-block;
 304         margin-right: .5em;
 305     }
 306     .form-item .form-setting .form-checkbox {
 307         margin-top: 0;
 308     }
 309     .form-label span.form-shortname {
 310         display: inline-block;
 311     }
 312     .form-item .form-setting,
 313     .mform .fitem .felement,
 314     .path-backup .mform .fitem .felement,
 315     .mform .fdescription.required,
 316     .form-item .form-description {
 317         margin-left: 0;
 318     }
 319     table#form td.submit,
 320     .form-buttons,
 321     #fitem_id_submitbutton,
 322     .fp-content-center form + div,
 323     #fgroup_id_buttonar,
 324     .form-horizontal .form-actions,
 325     .fitem_fsubmit .felement.fsubmit {
 326         padding-left: 10px;
 327         padding-right: 10px;
 328     }
 329     #helppopupbox {
 330         /* stylelint-disable declaration-no-important */
 331         width: auto !important;
 332         left: 0 !important;
 333         /* stylelint-enable declaration-no-important */
 334     }
 335 }
 336 // Shrink calender when short on space in block
 337 @media (min-width: 768px) and (max-width: 979px) {
 338     .block_calendar_month .content,
 339     .block .minicalendar td {
 340         padding-left: 0;
 341         padding-right: 0;
 342     }
 343 }
 344
 345 @media (max-width: 979px) {
 346     .nav-collapse {
 347         height: 0;
 348         .nav > li > a {
 349             color: @grayDark;
 350         }
 351         .nav > li > a:hover,
 352         .nav > li > a:focus,
 353         .dropdown-menu a:hover,
 354         .dropdown-menu a:focus,
 355         .dropdown-submenu a:hover,
 356         .dropdown-submenu a:focus,
 357         .dropdown-submenu a:active,
 358         .dropdown-menu > li > a:hover,
 359         .dropdown-menu > li > a:focus,
 360         .dropdown-submenu:hover > a,
 361         .dropdown-submenu:focus > a {
 362             background-image: none;
 363             color: @grayDark;
 364         }
 365     }
 366     .nav-collapse.in {
 367         height: auto;
 368         .usermenu .moodle-actionmenu[data-enhanced] {
 369             .toggle-display {
 370                 display: none;
 371             }
 372             .menu {
 373                 display: block;
 374
 375                 li {
 376                     margin: 0 0.5em;
 377                 }
 378             }
 379         }
 380     }
 381     .path-mod-data .box > table > tbody > tr > td {
 382         display: block;
 383     }
 384     .path-mod-forum .forumheaderlist {
 385         thead .header {
 386             font-weight: normal;
 387             font-size: round(@fontSizeSmall);
 388         }
 389         .discussion {
 390             .author,
 391             .replies,
 392             .lastpost {
 393                 font-size: round(@fontSizeSmall);
 394             }
 395             .replies .unread a {
 396                 padding: 0;
 397             }
 398         }
 399     }
 400
 401     .navbar {
 402         .nav-collapse.in {
 403             border-top: 1px solid @navbarBorder;
 404             &.pull-left,
 405             &.pull-right {
 406                 float: none;
 407             }
 408             > .nav {
 409                 margin: 0;
 410
 411                 // Add padding to first-level links.
 412                 > li > a {
 413                     padding-left: 20px;
 414                     border-radius: 0;
 415                 }
 416                 .dropdown-menu {
 417                     margin: 0 0 0 15px;
 418                     li > a {
 419                         border-radius: 0;
 420                     }
 421                 }
 422             }
 423
 424             .nav,
 425             .nav .dropdown-menu {
 426                 .dropdown-submenu {
 427                     .dropdown-toggle {
 428                         &:after {
 429                             display: inline-block;
 430                             float: none;
 431                             .caret();
 432                             border-top-color: @navbarBorder;
 433                             margin-left: 4px;
 434                             margin-top: 8px;
 435                         }
 436                     }
 437
 438                     &.open {
 439                         > a {
 440                             background-color: @navbarBackground;
 441                         }
 442                     }
 443
 444                     // Suppress showing of submenu menu content on hover.
 445                     &:hover {
 446                         .dropdown-menu {
 447                             display: none;
 448                         }
 449                         &.open {
 450                             > a {
 451                                 background-color: @navbarBackground;
 452                             }
 453                             > .dropdown-menu,
 454                             .open > .dropdown-menu {
 455                                 display: block;
 456                             }
 457                         }
 458                     }
 459                 }
 460                 .divider {
 461                     width: auto;
 462                     display: block;
 463                     height: 0;
 464                     margin: 4px 1px;
 465                     border-left: 0 none;
 466                     border-right: 0 none;
 467                     border-top: 1px solid @navbarBorder;
 468                     border-bottom: 1px solid @navbarBackgroundHighlight;
 469                 }
 470             }
 471         }
 472     }
 473
 474     .navbar-inverse {
 475         .nav-collapse.in {
 476             border-top-color: @navbarInverseBorder;
 477             .nav,
 478             .nav .dropdown-menu {
 479                 .dropdown-submenu {
 480                     .dropdown-toggle {
 481                         &:after {
 482                             border-top-color: @navbarInverseBorder;
 483                         }
 484                     }
 485                     &.open {
 486                         > a {
 487                             background-color: @navbarInverseBackground;
 488                         }
 489                     }
 490
 491                     &:hover {
 492                         &.open {
 493                             > a {
 494                                 background-color: @navbarInverseBackground;
 495                             }
 496                         }
 497                     }
 498                 }
 499                 .divider {
 500                     width: auto;
 501                     display: block;
 502                     height: 0;
 503                     margin: 4px 1px;
 504                     border-top: 1px solid @navbarInverseBackground;
 505                     border-bottom: 1px solid lighten(@navbarInverseBackground, 25%);
 506                 }
 507             }
 508             .nav {
 509                 > li > a {
 510                     &:hover,
 511                     &:focus {
 512                         color: @navbarInverseLinkColorHover;
 513                     }
 514                 }
 515             }
 516             .dropdown-menu a {
 517                 &:hover,
 518                 &:focus {
 519                     color: @navbarInverseLinkColorHover;
 520                 }
 521                 > li > a {
 522                     &:hover,
 523                     &:focus {
 524                         color: @navbarInverseLinkColorHover;
 525                     }
 526                 }
 527             }
 528             .dropdown-submenu a {
 529                 &:hover,
 530                 &:focus,
 531                 &:active {
 532                     color: @navbarInverseLinkColorHover;
 533                 }
 534             }
 535         }
 536     }
 537 }
 538
 539 @media (max-width: 767px) {
 540     // Resize, reflow file-picker on small devices
 541     #filesskin .yui3-panel,
 542     #filesskin .file-picker.fp-generallayout {
 543         width: 100%;
 544         left: 0;
 545     }
 546     .userprofile dl.list {
 547         // copied from dl-horizontal in bootstrap/repsonsive.less
 548         dt {
 549             float: none;
 550             clear: none;
 551             width: auto;
 552             text-align: left;
 553         }
 554         dd {
 555             margin-left: 0;
 556         }
 557     }
 558     // Reset the alignment for required label to display inline on mobile devices
 559     #page-mod-wiki-create .mform .fitem div.fitemtitle {
 560         float: left;
 561     }
 562
 563     // GRID & CONTAINERS
 564     // -----------------
 565     // Remove width from containers
 566     .container {
 567         width: auto;
 568     }
 569     // Fluid rows
 570     .row-fluid {
 571         width: 100%;
 572     }
 573     .row-fluid .span8.pull-right,
 574     .row-fluid .span9.pull-right {
 575         float: none;
 576     }
 577     // Undo negative margin on rows and thumbnails
 578     .row {
 579         margin-left: 0;
 580     }
 581     // Make all grid-sized elements block level again
 582     [class*="span"],
 583     .row-fluid [class*="span"] {
 584         float: none;
 585         display: block;
 586         width: 100%;
 587         margin-left: 0;
 588         .box-sizing(border-box);
 589     }
 590
 591     // We need to specify a more specific selector to reset the width for
 592     // cases when we have content in the side-pre blockregion but not in the
 593     // side-post blockregion as there are more specific selectors in
 594     // core.less which take precedence which break responsiveness.
 595     .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
 596     .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
 597         #block-region-side-pre.span4,
 598         #region-main.span8 {
 599             .fluid-span(12);
 600         }
 601     }
 602
 603     .row-fluid .span12 {
 604         width: 100%;
 605         .box-sizing(border-box);
 606     }
 607     .row-fluid [class*="offset"]:first-child {
 608         margin-left: 0;
 609     }
 610     div[role=main] {
 611         margin-bottom: 1em;
 612     }
 613     .coursebox {
 614         .info {
 615             .name {
 616                 a {
 617                     background-position: 0 13px;
 618                 }
 619             }
 620         }
 621     }
 622     .category-browse {
 623         .coursebox {
 624             .info {
 625                 .name {
 626                     a {
 627                         background-position: 0 13px;
 628                     }
 629                 }
 630             }
 631         }
 632     }
 633 }
 634
 635 // All widths between 1200px and 1600px
 636 @media (min-width: 1200px) and (max-width: 1600px) {
 637     .fluid-span (@columns) {
 638         .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
 639     }
 640     // CSS for the course management pages.
 641     #course-category-listings.columns-3 {
 642         background-color: @tableBackground;
 643         border: 0;
 644
 645         #category-listing,
 646         #course-listing {
 647             .fluid-span(6);
 648             margin-left: @fluidGridGutterWidth1200;
 649             *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
 650             &:first-child {
 651                 margin-left: 0;
 652             }
 653         }
 654         #course-detail {
 655             .fluid-span(12);
 656             margin: 1em 0 0;
 657         }
 658     }
 659 }
 660
 661 // All widths up to 1199px.
 662 @media (max-width: 1199px) {
 663
 664     // Editor on question pages
 665     .path-question {
 666         #id_answerhdr div.fitem {
 667             padding-right: 6px;
 668             padding-left: 4px;
 669         }
 670     }
 671     // CSS for the course management pages.
 672     #course-category-listings.columns-3 {
 673         background-color: @tableBackground;
 674         border: 0;
 675         #category-listing,
 676         #course-listing,
 677         #course-detail {
 678             .fluid-span(12);
 679             margin: 0 0 1em 0;
 680         }
 681     }
 682
 683     #page-mod-forum-discuss .discussioncontrols {
 684         text-align: right;
 685         .discussioncontrol {
 686             float: none;
 687             width: auto;
 688             display: inline-block;
 689             margin: 0 3px 0.5em;
 690             select,
 691             input {
 692                 margin-bottom: 0;
 693             }
 694             &.movediscussion {
 695                 margin-right: 0;
 696                 padding-right: 0;
 697             }
 698         }
 699     }
 700 }
 701
 702
 703 // File Picker.
 704 @media (max-width: 768px) {
 705     .fp-forminset .control-group .controls {
 706         margin-left: 0;
 707     }
 708 }