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.in {
 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.in {
 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,
 498             .nav .dropdown-menu {
 499                 .dropdown-submenu {
 500                     .dropdown-toggle {
 501                         &:after {
 502                             display: inline-block;
 503                             float: none;
 504                             .caret();
 505                             border-top-color: @navbarBorder;
 506                             margin-left: 4px;
 507                             margin-top: 8px;
 508                         }
 509                     }
 510
 511                     &.open {
 512                         > a {
 513                             background-color: @navbarBackground;
 514                         }
 515                     }
 516
 517                     // Suppress showing of submenu menu content on hover.
 518                     &:hover {
 519                         .dropdown-menu {
 520                             display: none;
 521                         }
 522                         &.open {
 523                             > a {
 524                                 background: @navbarBackground;
 525                             }
 526                             > .dropdown-menu,
 527                             .open > .dropdown-menu {
 528                                 display: block;
 529                             }
 530                         }
 531                     }
 532                 }
 533                 .divider {
 534                     width: auto;
 535                     display: block;
 536                     height: 0px;
 537                     margin: 4px 1px;
 538                     border-left: 0px none;
 539                     border-right: 0px none;
 540                     border-top: 1px solid @navbarBorder;
 541                     border-bottom: 1px solid @navbarBackgroundHighlight;
 542                 }
 543             }
 544         }
 545         &.navbar-inverse {
 546             .nav-collapse.in {
 547                 border-top-color: @navbarInverseBorder;
 548                 .nav,
 549                 .nav .dropdown-menu {
 550                     .dropdown-submenu {
 551                         .dropdown-toggle {
 552                             &:after {
 553                                 border-top-color: @navbarInverseBorder;
 554                             }
 555                         }
 556                         &.open {
 557                             > a {
 558                                 background-color: @navbarInverseBackground;
 559                             }
 560                         }
 561
 562                         &:hover {
 563                             &.open {
 564                                 > a {
 565                                     background: @navbarInverseBackground;
 566                                 }
 567                             }
 568                         }
 569                     }
 570                 }
 571             }
 572         }
 573     }
 574
 575     .dir-rtl {
 576         .navbar {
 577             .nav-collapse.in {
 578                 > .nav {
 579                     margin: 0;
 580                     > li > a {
 581                         padding-left: 0px;
 582                         padding-right: 20px;
 583                     }
 584                     .dropdown-menu {
 585                         margin: 0px 15px 0px 0px;
 586                     }
 587                 }
 588                 .dropdown-menu {
 589                     > li {
 590                         > a {
 591                             padding: 9px 15px;
 592                         }
 593                     }
 594                 }
 595                 .nav,
 596                 .nav .dropdown-menu {
 597                     .dropdown-submenu {
 598                         .dropdown-toggle {
 599                             &:after {
 600                                 margin-left: 0px;
 601                                 margin-right: 4px;
 602                             }
 603                         }
 604                     }
 605                 }
 606             }
 607         }
 608     }
 609
 610 }
 611
 612 @media (max-width: 767px) {
 613 // Resize, reflow file-picker on small devices
 614    #filesskin .yui3-panel,
 615    #filesskin .file-picker.fp-generallayout {
 616         width: 100%;
 617         left: 0;
 618     }
 619     .userprofile dl.list {
 620     // copied from dl-horizontal in bootstrap/repsonsive.less
 621         dt {
 622           float: none;
 623           clear: none;
 624           width: auto;
 625           text-align: left;
 626         }
 627         dd {
 628           margin-left: 0;
 629         }
 630     }
 631     // Reset the alignment for required label to display inline on mobile devices
 632     #page-mod-wiki-create .mform .fitem div.fitemtitle {
 633         float: left;
 634     }
 635
 636   // GRID & CONTAINERS
 637   // -----------------
 638   // Remove width from containers
 639   .container {
 640     width: auto;
 641   }
 642   // Fluid rows
 643   .row-fluid {
 644     width: 100%;
 645   }
 646   .row-fluid .span8.pull-right,
 647   .row-fluid .span9.pull-right {
 648     float: none;
 649   }
 650   // Undo negative margin on rows and thumbnails
 651   .row {
 652     margin-left: 0;
 653   }
 654   // Make all grid-sized elements block level again
 655   [class*="span"],
 656   .row-fluid [class*="span"] {
 657     float: none;
 658     display: block;
 659     width: 100%;
 660     margin-left: 0;
 661     .box-sizing(border-box);
 662   }
 663
 664     // We need to specify a more specific selector to reset the width for
 665     // cases when we have content in the side-pre blockregion but not in the
 666     // side-post blockregion as there are more specific selectors in
 667     // core.less which take precedence which break responsiveness.
 668     .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
 669     .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
 670         #block-region-side-pre.span4,
 671         #region-main.span8 {
 672             .fluid-span(12);
 673         }
 674     }
 675
 676   .row-fluid .span12 {
 677     width: 100%;
 678     .box-sizing(border-box);
 679   }
 680   .row-fluid [class*="offset"]:first-child {
 681     margin-left: 0;
 682   }
 683   div[role=main] {
 684       margin-bottom: 1em;
 685   }
 686     .coursebox {
 687         .info {
 688             .name {
 689                 a {
 690                     background-position: 0 13px;
 691                 }
 692             }
 693         }
 694     }
 695     .category-browse {
 696         .coursebox {
 697             .info {
 698                 .name {
 699                     a {
 700                         background-position: 0 13px;
 701                     }
 702                 }
 703             }
 704         }
 705     }
 706 }
 707
 708 // All widths between 1200px and 1600px
 709 @media (min-width: 1200px) and (max-width: 1600px) {
 710     .fluid-span (@columns) {
 711         .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
 712     }
 713     // CSS for the course management pages.
 714     #course-category-listings.columns-3 {
 715         background-color: @tableBackground;
 716         border:0;
 717
 718         #category-listing,
 719         #course-listing {
 720             .fluid-span(6);
 721             margin-left: @fluidGridGutterWidth1200;
 722             *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
 723             &:first-child {
 724                 margin-left: 0;
 725             }
 726         }
 727         #course-detail {
 728             .fluid-span(12);
 729             margin: 1em 0 0;
 730         }
 731     }
 732 }
 733
 734 // All widths up to 1199px.
 735 @media (max-width: 1199px) {
 736
 737     // Editor on question pages
 738     .path-question {
 739         #id_answerhdr div.fitem {
 740             padding-right: 6px;
 741             padding-left: 4px;
 742         }
 743     }
 744     // CSS for the course management pages.
 745     #course-category-listings.columns-3 {
 746         background-color: @tableBackground;
 747         border:0;
 748         #category-listing,
 749         #course-listing,
 750         #course-detail {
 751             .fluid-span(12);
 752             margin: 0 0 1em 0;
 753         }
 754     }
 755
 756     #page-mod-forum-discuss .discussioncontrols {
 757         text-align: right;
 758         .discussioncontrol {
 759             float: none;
 760             width: auto;
 761             display: inline-block;
 762             margin: 0 3px 0.5em;
 763             select,
 764             input {
 765                 margin-bottom: 0;
 766             }
 767             &.movediscussion {
 768                 margin-right: 0;
 769                 padding-right: 0;
 770             }
 771         }
 772     }
 773
 774    #page-mod-forum-discuss.dir-rtl .discussioncontrols {
 775        text-align: left;
 776    }
 777 }
 778
 779
 780 // File Picker.
 781 @media (max-width: 768px) {
 782     .fp-forminset .control-group .controls {
 783         margin-left: 0;
 784     }
 785     .dir-rtl .fp-formset .control-group {
 786         label.control-label {
 787             text-align: right;
 788             float: none;
 789         }
 790     }
 791     .dir-rtl .fp-forminset .control-group {
 792         label.control-label {
 793             text-align: right;
 794             float: none;
 795         }
 796         .controls {
 797             margin-right: 0;
 798         }
 799     }
 800 }