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
 352 }
 353
 354 @media (max-width: 768px) {
 355 // Resize, reflow file-picker on small devices
 356    #filesskin .yui3-panel,
 357    #filesskin .file-picker.fp-generallayout {
 358         width: 100%;
 359         left: 0;
 360     }
 361     .userprofile dl.list {
 362     // copied from dl-horizontal in bootstrap/repsonsive.less
 363         dt {
 364           float: none;
 365           clear: none;
 366           width: auto;
 367           text-align: left;
 368         }
 369         dd {
 370           margin-left: 0;
 371         }
 372     }
 373     // Reset the alignment for required label to display inline on mobile devices
 374     #page-mod-wiki-create .mform .fitem div.fitemtitle {
 375         float: left;
 376     }
 377
 378 // Hide broken drag'n'drop options on touch devices MDL-38371
 379 // Not a great workaround, landscape iPads are wider than this,
 380 // and a resized window on a netbook could be smaller, but best
 381 // we can do with CSS. There might be a JS-based solution.
 382     .section .side,
 383     .editing_move {
 384         display: none;
 385     }
 386     .activityinstance > a {
 387         display: block;
 388     }
 389
 390   // GRID & CONTAINERS
 391   // -----------------
 392   // Remove width from containers
 393   .container {
 394     width: auto;
 395   }
 396   // Fluid rows
 397   .row-fluid {
 398     width: 100%;
 399   }
 400   .row-fluid .span8.pull-right,
 401   .row-fluid .span9.pull-right {
 402     float: none;
 403   }
 404   // Undo negative margin on rows and thumbnails
 405   .row {
 406     margin-left: 0;
 407   }
 408   // Make all grid-sized elements block level again
 409   [class*="span"],
 410   .row-fluid [class*="span"] {
 411     float: none;
 412     display: block;
 413     width: 100%;
 414     margin-left: 0;
 415     .box-sizing(border-box);
 416   }
 417
 418   // We need to specify a more specific selector to reset the width for
 419   // cases when we have content in the side-pre blockregion but not in the
 420   // side-post blockregion as there are more specific selectors in
 421   // core.less which take precedence which break responsiveness.
 422   .empty-region-side-post.used-region-side-pre {
 423       #block-region-side-pre.span4,
 424       #region-main.span8.span8 {
 425         .fluid-span(12);
 426       }
 427   }
 428
 429   .row-fluid .span12 {
 430     width: 100%;
 431     .box-sizing(border-box);
 432   }
 433   .row-fluid [class*="offset"]:first-child {
 434     margin-left: 0;
 435   }
 436   div[role=main] {
 437       margin-bottom: 1em;
 438   }
 439 }
 440
 441 // All widths between 1200px and 1600px
 442 @media (min-width: 1200px) and (max-width: 1600px) {
 443     // CSS for the course management pages.
 444     #course-category-listings.columns-3 {
 445         background-color:transparent;
 446         border:0;
 447
 448         #category-listing,
 449         #course-listing {
 450             .fluid-span(6);
 451             margin-left: @fluidGridGutterWidth;
 452             *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
 453             &:first-child {
 454                 margin-left: 0;
 455             }
 456         }
 457         #course-detail {
 458             .fluid-span(12);
 459             margin: 1em 0 0;
 460         }
 461     }
 462
 463 }
 464
 465 // All widths up to 1199px.
 466 @media (max-width: 1199px) {
 467     // CSS for the course management pages.
 468     #course-category-listings.columns-3 {
 469         background-color:transparent;
 470         border:0;
 471         #category-listing,
 472         #course-listing,
 473         #course-detail {
 474             .fluid-span(12);
 475             margin: 0 0 1em 0;
 476         }
 477     }
 478 }