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         text-align: right;
 234     }
 235     /** Handles display of the activity chooser on small screens **/
 236     .jsenabled .choosercontainer #chooseform .alloptions {
 237         max-width: 100%;
 238     }
 239     .jsenabled .choosercontainer #chooseform .instruction,
 240     .jsenabled .choosercontainer #chooseform .typesummary {
 241         position:static;
 242     }
 243     .que .info {
 244         float: none;
 245         width: auto;
 246     }
 247     .que .content {
 248         margin: 0;
 249     }
 250     .path-mod-choice .horizontal  .choices .option {
 251         display: block;
 252     }
 253     .path-mod-forum .forumsearch #search {
 254         width: 120px;
 255     }
 256     .path-mod-forum .forumheaderlist .picture {
 257         display: none;
 258     }
 259 }
 260
 261 // Stuart's 2,1,3 layout
 262 @media (min-width : 768px) {
 263   .row-fluid .desktop-first-column {
 264       margin-left: 0;
 265   }
 266   #page-navbar .breadcrumb-button {
 267       display: inline;
 268   }
 269 }
 270 @media (max-width : 767px) {
 271   .row-fluid .desktop-first-column {
 272       clear: right;
 273   }
 274 }
 275 // Forms
 276 @media (max-width: 767px) {
 277   // Remove the horizontal form styles
 278     .form-item .form-label,
 279     .mform .fitem div.fitemtitle {
 280     // copied from .control-label {
 281       float: none;
 282       width: auto;
 283       padding-top: 0;
 284       text-align: left;
 285     }
 286     .form-item .form-label label{
 287         display: inline-block;
 288         margin-right: .5em;
 289     }
 290     .form-item .form-setting .form-checkbox {
 291         margin-top: 0;
 292     }
 293     .form-label span.form-shortname {
 294         display: inline-block;
 295     }
 296     .form-item .form-setting,
 297     .mform .fitem .felement,
 298     .path-backup .mform .fitem .felement,
 299     .mform .fdescription.required,
 300     .form-item .form-description {
 301       margin-left: 0;
 302     }
 303     table#form td.submit,
 304     .form-buttons,
 305     #fitem_id_submitbutton,
 306     .fp-content-center form + div,
 307     #fgroup_id_buttonar,
 308     .form-horizontal .form-actions,
 309     .fitem_fsubmit .felement.fsubmit {
 310       padding-left: 10px;
 311       padding-right: 10px;
 312     }
 313     #helppopupbox {
 314         width: auto !important;
 315         left: 0 !important;
 316     }
 317 }
 318 // Shrink calender when short on space in block
 319 @media (min-width : 768px) and (max-width: 979px) {
 320     .block_calendar_month .content,
 321     .block .minicalendar td {
 322         padding-left: 0;
 323         padding-right: 0;
 324     }
 325 }
 326
 327 @media (max-width: 979px) {
 328     .nav-collapse {
 329          height: 0;
 330         .nav > li > a {
 331             color: @grayDark;
 332         }
 333         .nav > li > a:hover,
 334         .nav > li > a:focus,
 335         .dropdown-menu a:hover,
 336         .dropdown-menu a:focus,
 337         .dropdown-submenu a:focus,
 338         .dropdown-submenu a:hover,
 339         .dropdown-submenu a:active,
 340         .dropdown-menu > li > a:hover,
 341         .dropdown-menu > li > a:focus,
 342         {
 343             background-image: none;
 344             color: @grayDark;
 345         }
 346     }
 347     .nav-collapse.active {
 348         height: auto;
 349     }
 350
 351 }
 352
 353 @media (max-width: 768px) {
 354 // Resize, reflow file-picker on small devices
 355    #filesskin .yui3-panel,
 356    #filesskin .file-picker.fp-generallayout {
 357         width: 100%;
 358         left: 0;
 359     }
 360     .userprofile dl.list {
 361     // copied from dl-horizontal in bootstrap/repsonsive.less
 362         dt {
 363           float: none;
 364           clear: none;
 365           width: auto;
 366           text-align: left;
 367         }
 368         dd {
 369           margin-left: 0;
 370         }
 371     }
 372     // Reset the alignment for required label to display inline on mobile devices
 373     #page-mod-wiki-create .mform .fitem div.fitemtitle {
 374         float: left;
 375     }
 376
 377   // GRID & CONTAINERS
 378   // -----------------
 379   // Remove width from containers
 380   .container {
 381     width: auto;
 382   }
 383   // Fluid rows
 384   .row-fluid {
 385     width: 100%;
 386   }
 387   .row-fluid .span8.pull-right,
 388   .row-fluid .span9.pull-right {
 389     float: none;
 390   }
 391   // Undo negative margin on rows and thumbnails
 392   .row {
 393     margin-left: 0;
 394   }
 395   // Make all grid-sized elements block level again
 396   [class*="span"],
 397   .row-fluid [class*="span"] {
 398     float: none;
 399     display: block;
 400     width: 100%;
 401     margin-left: 0;
 402     .box-sizing(border-box);
 403   }
 404
 405   // We need to specify a more specific selector to reset the width for
 406   // cases when we have content in the side-pre blockregion but not in the
 407   // side-post blockregion as there are more specific selectors in
 408   // core.less which take precedence which break responsiveness.
 409   .empty-region-side-post.used-region-side-pre {
 410       #block-region-side-pre.span4,
 411       #region-main.span8.span8 {
 412         .fluid-span(12);
 413       }
 414   }
 415
 416   .row-fluid .span12 {
 417     width: 100%;
 418     .box-sizing(border-box);
 419   }
 420   .row-fluid [class*="offset"]:first-child {
 421     margin-left: 0;
 422   }
 423   div[role=main] {
 424       margin-bottom: 1em;
 425   }
 426 }
 427
 428 // All widths between 1200px and 1600px
 429 @media (min-width: 1200px) and (max-width: 1600px) {
 430     // CSS for the course management pages.
 431     #course-category-listings.columns-3 {
 432         background-color:transparent;
 433         border:0;
 434
 435         #category-listing,
 436         #course-listing {
 437             .fluid-span(6);
 438             margin-left: @fluidGridGutterWidth;
 439             *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
 440             &:first-child {
 441                 margin-left: 0;
 442             }
 443         }
 444         #course-detail {
 445             .fluid-span(12);
 446             margin: 1em 0 0;
 447         }
 448     }
 449
 450 }
 451
 452 // All widths up to 1199px.
 453 @media (max-width: 1199px) {
 454     // CSS for the course management pages.
 455     #course-category-listings.columns-3 {
 456         background-color:transparent;
 457         border:0;
 458         #category-listing,
 459         #course-listing,
 460         #course-detail {
 461             .fluid-span(12);
 462             margin: 0 0 1em 0;
 463         }
 464     }
 465 }