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
  56 @media (max-width: 873px) {
  57     .file-picker .fp-repo-area {
  58         width: 100%;
  59         height: auto;
  60         max-height: 220px;
  61         y-scroll: auto;
  62         float: none;
  63         border: 0px;
  64     }
  65     .file-picker .fp-repo-items {
  66         width: 100%;
  67         float: none;
  68     }
  69     .file-picker .fp-login-form .fp-login-input label {
  70         text-align: left;
  71     }
  72     .dir-rtl .file-picker .fp-login-form .fp-login-input label {
  73         text-align: right;
  74     }
  75     .file-picker .fp-content form td {
  76         display: block;
  77         width: 100%;
  78         text-align: left;
  79     }
  80     .dir-rtl .file-picker .fp-content form td {
  81         text-align: right;
  82     }
  83     .fp-content .mdl-right {
  84         text-align: left;
  85     }
  86     .dir-rtl .fp-content .mdl-right {
  87         text-align: right;
  88     }
  89
  90     .fp-repo-items .fp-navbar {
  91         border-top: 1px solid rgb(187, 187, 187);
  92     }
  93 }
  94
  95 // login page
  96 @media (min-width: 1200px) {
  97     .loginbox.twocolumns .loginpanel {
  98         margin-left: 0;
  99     }
 100     .loginbox.twocolumns .loginpanel,
 101     .loginbox.twocolumns .signuppanel {
 102         width: 48.717948717948715%;
 103        *width: 48.664757228587014%;
 104    }
 105     // Wider form labels.
 106     .form-item .form-label,
 107     .mform .fitem div.fitemtitle,
 108     .userprofile dl.list dt,
 109     .form-horizontal .control-label {
 110         width: @horizontalComponentOffset1200 - 20px;
 111     }
 112     .form-item .form-setting,
 113     .form-item .form-description,
 114     .mform .fitem .felement,
 115     #page-mod-forum-search .c1,
 116     .mform .fdescription.required,
 117     .userprofile dl.list dd,
 118     .form-horizontal .controls {
 119         margin-left: @horizontalComponentOffset1200;
 120     }
 121     .dir-rtl {
 122         .form-item .form-setting,
 123         .form-item .form-description,
 124         .mform .fitem .felement,
 125         .mform .fdescription.required,
 126         .userprofile dl.list dd,
 127         .form-horizontal .controls {
 128             margin-right: @horizontalComponentOffset1200;
 129         }
 130         #page-mod-forum-search .c1 {
 131             margin-right: @horizontalComponentOffset1200;
 132         }
 133     }
 134     .path-admin .buttons,
 135     .form-buttons {
 136         padding-left: @horizontalComponentOffset1200;
 137     }
 138     .dir-rtl {
 139         .path-admin .buttons,
 140         .form-buttons {
 141             padding-right: @horizontalComponentOffset1200;
 142         }
 143     }
 144
 145 }
 146
 147 @media (min-width: 980px) {
 148     .loginbox.twocolumns .loginpanel {
 149         margin-left: 0;
 150     }
 151     .loginbox.twocolumns .loginpanel,
 152     .loginbox.twocolumns .signuppanel {
 153         width: 48.617948717948715%;
 154        *width: 48.664757228587014%;
 155    }
 156 }
 157
 158 @media (min-width: 768px) and (max-width: 979px) {
 159     .loginbox.twocolumns .loginpanel {
 160           margin-left: 0;
 161     }
 162     .loginbox.twocolumns .loginpanel,
 163     .loginbox.twocolumns .signuppanel {
 164         width: 48.61878453038674%;
 165         *width: 48.56559304102504%;
 166     }
 167 }
 168
 169 @media (max-width: 767px) {
 170      .loginbox.twocolumns .loginpanel,
 171      .loginbox.twocolumns .signuppanel {
 172          display: block;
 173          float: none;
 174          width: 100%;
 175          margin-left: 0;
 176          .box-sizing(border-box);
 177      }
 178  }
 179
 180 @media (max-width: 480px) {
 181     // make tabs act like nav-stacked
 182     // (mostly) copied from bootstrap/navs.less
 183     .nav-tabs > li {
 184         float: none;
 185     }
 186     .nav-tabs > li > a {
 187         margin-right: 0; // no need for the gap between nav items
 188     }
 189     .nav-tabs {
 190         border-bottom: 0;
 191     }
 192     .nav-tabs > li > a {
 193         border: 1px solid #ddd;
 194         .border-radius(0);
 195     }
 196     .nav-tabs > .active > a,
 197     .nav-tabs > .active > a:hover {
 198         border: 1px solid #ddd;
 199     }
 200     .nav-tabs > li:first-child > a {
 201         .border-top-radius(4px);
 202     }
 203     .nav-tabs > li:last-child > a {
 204         .border-bottom-radius(4px);
 205     }
 206     .nav-tabs > li > a:hover,
 207     .nav-tabs > li > a:focus {
 208         border-color: #ddd;
 209         z-index: 2;
 210     }
 211     .fp-content-center {
 212         display: block;
 213         vertical-align: top;
 214     }
 215     .course-content ul.topics li.section,
 216     .course-content ul.topics li.section .content,
 217     .course-content ul.weeks li.section .content,
 218     .course-content ul.weeks li.section,
 219     .course-content ul.section {
 220         margin-right: 0;
 221         margin-left: 0;
 222         padding: 0;
 223     }
 224     .activityinstance {
 225         display: block;
 226     }
 227     .editing .course-content .section .activity {
 228         margin-bottom: 0.2em;
 229         padding-bottom: 0.2em;
 230         border-bottom: thin solid #eee;
 231     }
 232     .course-content .section .activity .commands {
 233         display: block;
 234         text-align: right;
 235     }
 236     /** Handles display of the activity chooser on small screens **/
 237     .jsenabled .choosercontainer #chooseform .alloptions {
 238         max-width: 100%;
 239     }
 240     .jsenabled .choosercontainer #chooseform .instruction,
 241     .jsenabled .choosercontainer #chooseform .typesummary {
 242         position:static;
 243     }
 244     .que .info {
 245         float: none;
 246         width: auto;
 247     }
 248     .que .content {
 249         margin: 0;
 250     }
 251     .path-mod-choice .horizontal  .choices .option {
 252         display: block;
 253     }
 254     .path-mod-forum .forumsearch #search {
 255         width: 120px;
 256     }
 257     .path-mod-forum .forumheaderlist .picture {
 258         display: none;
 259     }
 260 }
 261
 262 // Stuart's 2,1,3 layout
 263 @media (min-width : 768px) {
 264   .row-fluid .desktop-first-column {
 265       margin-left: 0;
 266   }
 267   #page-navbar .breadcrumb-button {
 268       display: inline;
 269   }
 270 }
 271 @media (max-width : 767px) {
 272   .row-fluid .desktop-first-column {
 273       clear: right;
 274   }
 275 }
 276 // Forms
 277 @media (max-width: 767px) {
 278   // Remove the horizontal form styles
 279     .form-item .form-label,
 280     .mform .fitem div.fitemtitle {
 281     // copied from .control-label {
 282       float: none;
 283       width: auto;
 284       padding-top: 0;
 285       text-align: left;
 286     }
 287     .form-item .form-label label{
 288         display: inline-block;
 289         margin-right: .5em;
 290     }
 291     .form-item .form-setting .form-checkbox {
 292         margin-top: 0;
 293     }
 294     .form-label span.form-shortname {
 295         display: inline-block;
 296     }
 297     .form-item .form-setting,
 298     .mform .fitem .felement,
 299     .path-backup .mform .fitem .felement,
 300     .mform .fdescription.required,
 301     .form-item .form-description {
 302       margin-left: 0;
 303     }
 304     table#form td.submit,
 305     .form-buttons,
 306     #fitem_id_submitbutton,
 307     .fp-content-center form + div,
 308     #fgroup_id_buttonar,
 309     .form-horizontal .form-actions,
 310     .fitem_fsubmit .felement.fsubmit {
 311       padding-left: 10px;
 312       padding-right: 10px;
 313     }
 314     #helppopupbox {
 315         width: auto !important;
 316         left: 0 !important;
 317     }
 318 }
 319 // Shrink calender when short on space in block
 320 @media (min-width : 768px) and (max-width: 979px) {
 321     .block_calendar_month .content,
 322     .block .minicalendar td {
 323         padding-left: 0;
 324         padding-right: 0;
 325     }
 326 }
 327
 328 @media (max-width: 979px) {
 329     .nav-collapse {
 330          height: 0;
 331         .nav > li > a {
 332             color: @grayDark;
 333         }
 334         .nav > li > a:hover,
 335         .nav > li > a:focus,
 336         .dropdown-menu a:hover,
 337         .dropdown-menu a:focus,
 338         .dropdown-submenu a:focus,
 339         .dropdown-submenu a:hover,
 340         .dropdown-submenu a:active,
 341         .dropdown-menu > li > a:hover,
 342         .dropdown-menu > li > a:focus,
 343         {
 344             background-image: none;
 345             color: @grayDark;
 346         }
 347     }
 348     .nav-collapse.active {
 349         height: auto;
 350     }
 351     .path-mod-data .box > table > tbody > tr > td {
 352         display: block;
 353     }
 354     .path-mod-forum .forumheaderlist {
 355         thead .header {
 356             font-weight: normal;
 357             font-size: round(@fontSizeSmall);
 358         }
 359         .discussion {
 360             .author, .replies, .lastpost {
 361                 font-size: round(@fontSizeSmall);
 362             }
 363             .replies .unread a {
 364                 padding: 0;
 365             }
 366         }
 367     }
 368 }
 369
 370 @media (max-width: 768px) {
 371 // Resize, reflow file-picker on small devices
 372    #filesskin .yui3-panel,
 373    #filesskin .file-picker.fp-generallayout {
 374         width: 100%;
 375         left: 0;
 376     }
 377     .userprofile dl.list {
 378     // copied from dl-horizontal in bootstrap/repsonsive.less
 379         dt {
 380           float: none;
 381           clear: none;
 382           width: auto;
 383           text-align: left;
 384         }
 385         dd {
 386           margin-left: 0;
 387         }
 388     }
 389     // Reset the alignment for required label to display inline on mobile devices
 390     #page-mod-wiki-create .mform .fitem div.fitemtitle {
 391         float: left;
 392     }
 393
 394 // Hide broken drag'n'drop options on touch devices MDL-38371
 395 // Not a great workaround, landscape iPads are wider than this,
 396 // and a resized window on a netbook could be smaller, but best
 397 // we can do with CSS. There might be a JS-based solution.
 398     .section .side,
 399     .editing_move {
 400         display: none;
 401     }
 402     .activityinstance > a {
 403         display: block;
 404     }
 405
 406   // GRID & CONTAINERS
 407   // -----------------
 408   // Remove width from containers
 409   .container {
 410     width: auto;
 411   }
 412   // Fluid rows
 413   .row-fluid {
 414     width: 100%;
 415   }
 416   .row-fluid .span8.pull-right,
 417   .row-fluid .span9.pull-right {
 418     float: none;
 419   }
 420   // Undo negative margin on rows and thumbnails
 421   .row {
 422     margin-left: 0;
 423   }
 424   // Make all grid-sized elements block level again
 425   [class*="span"],
 426   .row-fluid [class*="span"] {
 427     float: none;
 428     display: block;
 429     width: 100%;
 430     margin-left: 0;
 431     .box-sizing(border-box);
 432   }
 433   .row-fluid .span12 {
 434     width: 100%;
 435     .box-sizing(border-box);
 436   }
 437   .row-fluid [class*="offset"]:first-child {
 438     margin-left: 0;
 439   }
 440   div[role=main] {
 441       margin-bottom: 2em;
 442   }
 443     .coursebox {
 444         .info {
 445             .name {
 446                 a {
 447                     background-position: 0 13px;
 448                 }
 449             }
 450         }
 451     }
 452     .category-browse {
 453         .coursebox {
 454             .info {
 455                 .name {
 456                     a {
 457                         background-position: 0 13px;
 458                     }
 459                 }
 460             }
 461         }
 462     }
 463 }
 464
 465 // All widths between 1200px and 1600px
 466 @media (min-width: 1200px) and (max-width: 1600px) {
 467     // CSS for the course management pages.
 468     #course-category-listings.columns-3 {
 469         background-color:transparent;
 470         border:0;
 471
 472         #category-listing,
 473         #course-listing {
 474             .fluid-span(6);
 475             margin-left: @fluidGridGutterWidth;
 476             *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
 477             &:first-child {
 478                 margin-left: 0;
 479             }
 480         }
 481         #course-detail {
 482             .fluid-span(12);
 483             margin: 1em 0 0;
 484         }
 485     }
 486
 487 }
 488
 489 // All widths up to 1199px.
 490 @media (max-width: 1199px) {
 491     // CSS for the course management pages.
 492     #course-category-listings.columns-3 {
 493         background-color:transparent;
 494         border:0;
 495         #category-listing,
 496         #course-listing,
 497         #course-detail {
 498             .fluid-span(12);
 499             margin: 0 0 1em 0;
 500         }
 501     }
 502 }