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