Moodle release 2.7
[moodle.git] / theme / bootstrapbase / less / moodle / responsive.less
CommitLineData
8903b17b
BB
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 }
bfb1c6d4
JF
17}
18
19@media (min-width: 980px) and (max-width: 1199px) {
31614004
DS
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 }
8d223d71
NK
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 }
31614004
DS
49 .path-admin .buttons,
50 .form-buttons {
51 padding-left: @horizontalComponentOffset980;
52 }
8903b17b
BB
53}
54
d61c96b6
DW
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 }
2eab90fa
JF
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
88d366e5
JF
102 .fp-formset div {
103 height: auto;
104 }
d61c96b6
DW
105}
106
8903b17b 107@media (min-width: 1200px) {
d8037b26 108 // Login page.
8903b17b
BB
109 .loginbox.twocolumns .loginpanel {
110 margin-left: 0;
111 }
112 .loginbox.twocolumns .loginpanel,
113 .loginbox.twocolumns .signuppanel {
114 width: 48.717948717948715%;
115 *width: 48.664757228587014%;
116 }
bfb1c6d4
JF
117 // Wider form labels.
118 .form-item .form-label,
119 .mform .fitem div.fitemtitle,
120 .userprofile dl.list dt,
121 .form-horizontal .control-label {
122 width: @horizontalComponentOffset1200 - 20px;
123 }
124 .form-item .form-setting,
125 .form-item .form-description,
126 .mform .fitem .felement,
127 #page-mod-forum-search .c1,
128 .mform .fdescription.required,
129 .userprofile dl.list dd,
130 .form-horizontal .controls {
131 margin-left: @horizontalComponentOffset1200;
132 }
8d223d71
NK
133 .dir-rtl {
134 .form-item .form-setting,
135 .form-item .form-description,
136 .mform .fitem .felement,
137 .mform .fdescription.required,
138 .userprofile dl.list dd,
139 .form-horizontal .controls {
2eab90fa 140 margin-right: (@horizontalComponentOffset1200 - 100px);
8d223d71
NK
141 }
142 #page-mod-forum-search .c1 {
143 margin-right: @horizontalComponentOffset1200;
144 }
293a1894
NK
145 .form-item .form-label,
146 .mform .fitem div.fitemtitle,
147 .userprofile dl.list dt,
148 .form-horizontal .control-label {
2eab90fa 149 width: (@horizontalComponentOffset1200 - 120px);
293a1894
NK
150 }
151
8d223d71 152 }
bfb1c6d4
JF
153 .path-admin .buttons,
154 .form-buttons {
155 padding-left: @horizontalComponentOffset1200;
156 }
8d223d71
NK
157 .dir-rtl {
158 .path-admin .buttons,
159 .form-buttons {
160 padding-right: @horizontalComponentOffset1200;
161 }
162 }
bfb1c6d4 163
d8037b26
GB
164 // Core empty block regions.
165 .fluid-span (@columns) {
166 .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
167 }
168 .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
169 .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
170 #region-main.span8 {
171 /** increase the span size by 1 **/
172 .fluid-span(9);
173 }
174 #block-region-side-pre.span4 {
175 /** decrease the span size by 1 **/
176 .fluid-span(3);
177 }
178 }
8903b17b
BB
179}
180
181@media (min-width: 980px) {
182 .loginbox.twocolumns .loginpanel {
183 margin-left: 0;
184 }
185 .loginbox.twocolumns .loginpanel,
186 .loginbox.twocolumns .signuppanel {
187 width: 48.617948717948715%;
188 *width: 48.664757228587014%;
189 }
190}
191
192@media (min-width: 768px) and (max-width: 979px) {
d8037b26 193 // Login page.
8903b17b
BB
194 .loginbox.twocolumns .loginpanel {
195 margin-left: 0;
196 }
197 .loginbox.twocolumns .loginpanel,
198 .loginbox.twocolumns .signuppanel {
199 width: 48.61878453038674%;
200 *width: 48.56559304102504%;
201 }
d8037b26
GB
202 // Core empty block regions.
203 .fluid-span (@columns) {
204 .fluid-span-full(@columns, @fluidGridColumnWidth768, @fluidGridGutterWidth768);
205 }
206 .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
207 .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
208 #region-main.span8 {
209 /** increase the span size by 1 **/
210 .fluid-span(9);
211 }
212 #block-region-side-pre.span4 {
213 /** decrease the span size by 1 **/
214 .fluid-span(3);
215 }
216 }
8903b17b
BB
217}
218
219@media (max-width: 767px) {
220 .loginbox.twocolumns .loginpanel,
221 .loginbox.twocolumns .signuppanel {
222 display: block;
223 float: none;
224 width: 100%;
225 margin-left: 0;
226 .box-sizing(border-box);
227 }
b23a3205
JF
228 #page-mod-quiz-edit div.quizcontents,
229 .questionbankwindow.block {
230 width: 100%;
231 float: none;
232 }
233 #page-mod-quiz-edit #block-region-side-pre,
234 #page-mod-quiz-edit #block-region-side-post {
235 clear: both;
236 }
237
8903b17b 238 }
8903b17b
BB
239
240@media (max-width: 480px) {
9c2ec10b
DS
241 // make tabs act like nav-stacked
242 // (mostly) copied from bootstrap/navs.less
243 .nav-tabs > li {
8903b17b
BB
244 float: none;
245 }
9c2ec10b
DS
246 .nav-tabs > li > a {
247 margin-right: 0; // no need for the gap between nav items
248 }
249 .nav-tabs {
250 border-bottom: 0;
251 }
252 .nav-tabs > li > a {
8903b17b
BB
253 border: 1px solid #ddd;
254 .border-radius(0);
255 }
9c2ec10b
DS
256 .nav-tabs > .active > a,
257 .nav-tabs > .active > a:hover {
258 border: 1px solid #ddd;
259 }
260 .nav-tabs > li:first-child > a {
8903b17b
BB
261 .border-top-radius(4px);
262 }
9c2ec10b 263 .nav-tabs > li:last-child > a {
8903b17b
BB
264 .border-bottom-radius(4px);
265 }
9c2ec10b
DS
266 .nav-tabs > li > a:hover,
267 .nav-tabs > li > a:focus {
8903b17b
BB
268 border-color: #ddd;
269 z-index: 2;
270 }
8903b17b
BB
271 .fp-content-center {
272 display: block;
273 vertical-align: top;
274 }
8903b17b
BB
275 .course-content ul.topics li.section,
276 .course-content ul.topics li.section .content,
277 .course-content ul.weeks li.section .content,
278 .course-content ul.weeks li.section,
279 .course-content ul.section {
280 margin-right: 0;
281 margin-left: 0;
282 padding: 0;
283 }
284 .activityinstance {
285 display: block;
286 }
287 .editing .course-content .section .activity {
288 margin-bottom: 0.2em;
289 padding-bottom: 0.2em;
290 border-bottom: thin solid #eee;
291 }
292 .course-content .section .activity .commands {
8903b17b
BB
293 text-align: right;
294 }
4c512690
SH
295 /** Handles display of the activity chooser on small screens **/
296 .jsenabled .choosercontainer #chooseform .alloptions {
297 max-width: 100%;
8903b17b 298 }
4c512690
SH
299 .jsenabled .choosercontainer #chooseform .instruction,
300 .jsenabled .choosercontainer #chooseform .typesummary {
301 position:static;
8903b17b
BB
302 }
303 .que .info {
304 float: none;
305 width: auto;
306 }
307 .que .content {
308 margin: 0;
309 }
310 .path-mod-choice .horizontal .choices .option {
311 display: block;
312 }
313 .path-mod-forum .forumsearch #search {
314 width: 120px;
315 }
41d64830
JF
316 .path-mod-forum .forumheaderlist .picture {
317 display: none;
318 }
8903b17b
BB
319}
320
321// Stuart's 2,1,3 layout
322@media (min-width : 768px) {
323 .row-fluid .desktop-first-column {
324 margin-left: 0;
325 }
c72106b2
RW
326 #page-navbar .breadcrumb-button {
327 display: inline;
328 }
8903b17b
BB
329}
330@media (max-width : 767px) {
331 .row-fluid .desktop-first-column {
332 clear: right;
333 }
334}
335// Forms
336@media (max-width: 767px) {
337 // Remove the horizontal form styles
338 .form-item .form-label,
339 .mform .fitem div.fitemtitle {
340 // copied from .control-label {
341 float: none;
342 width: auto;
343 padding-top: 0;
344 text-align: left;
345 }
346 .form-item .form-label label{
347 display: inline-block;
348 margin-right: .5em;
349 }
350 .form-item .form-setting .form-checkbox {
351 margin-top: 0;
352 }
353 .form-label span.form-shortname {
354 display: inline-block;
355 }
356 .form-item .form-setting,
357 .mform .fitem .felement,
358 .path-backup .mform .fitem .felement,
359 .mform .fdescription.required,
360 .form-item .form-description {
361 margin-left: 0;
362 }
363 table#form td.submit,
364 .form-buttons,
365 #fitem_id_submitbutton,
366 .fp-content-center form + div,
367 #fgroup_id_buttonar,
368 .form-horizontal .form-actions,
369 .fitem_fsubmit .felement.fsubmit {
370 padding-left: 10px;
371 padding-right: 10px;
372 }
373 #helppopupbox {
374 width: auto !important;
375 left: 0 !important;
376 }
377}
378// Shrink calender when short on space in block
379@media (min-width : 768px) and (max-width: 979px) {
380 .block_calendar_month .content,
381 .block .minicalendar td {
382 padding-left: 0;
383 padding-right: 0;
384 }
385}
386
5d752f4b
NK
387.dir-rtl {
388 .dropdown-menu {
389 right:0;
390 left:auto;
391 }
392 .navbar .nav>li>.dropdown-menu:before {
393 right:9px;
394 left:auto;
395 }
396 .navbar .nav>li>.dropdown-menu:after {
397 right: 10px;
398 left:auto;
399 }
400 .dropdown-submenu>a:after {
401 margin-right: -10px;
402 margin-left: 0;
403 border-right-color: #ccc;
404 border-left-color: transparent;
405 border-width: 5px 5px 5px 0px;
406 }
407 .dropdown-submenu>.dropdown-menu {
408 right:100%;
409 left:auto;
410 }
411}
412
8903b17b
BB
413@media (max-width: 979px) {
414 .nav-collapse {
415 height: 0;
416 .nav > li > a {
417 color: @grayDark;
418 }
419 .nav > li > a:hover,
420 .nav > li > a:focus,
421 .dropdown-menu a:hover,
422 .dropdown-menu a:focus,
423 .dropdown-submenu a:focus,
424 .dropdown-submenu a:hover,
425 .dropdown-submenu a:active,
426 .dropdown-menu > li > a:hover,
427 .dropdown-menu > li > a:focus,
428 {
429 background-image: none;
430 color: @grayDark;
431 }
432 }
433 .nav-collapse.active {
434 height: auto;
435 }
7e7e8fd3
AB
436 .path-mod-data .box > table > tbody > tr > td {
437 display: block;
438 }
9c53c70c
AB
439 .path-mod-forum .forumheaderlist {
440 thead .header {
441 font-weight: normal;
442 font-size: round(@fontSizeSmall);
443 }
444 .discussion {
445 .author, .replies, .lastpost {
446 font-size: round(@fontSizeSmall);
447 }
448 .replies .unread a {
449 padding: 0;
450 }
451 }
452 }
8903b17b
BB
453}
454
d8037b26 455@media (max-width: 767px) {
8903b17b
BB
456// Resize, reflow file-picker on small devices
457 #filesskin .yui3-panel,
458 #filesskin .file-picker.fp-generallayout {
459 width: 100%;
460 left: 0;
461 }
462 .userprofile dl.list {
463 // copied from dl-horizontal in bootstrap/repsonsive.less
464 dt {
465 float: none;
466 clear: none;
467 width: auto;
468 text-align: left;
469 }
470 dd {
471 margin-left: 0;
472 }
473 }
47e00c34
RW
474 // Reset the alignment for required label to display inline on mobile devices
475 #page-mod-wiki-create .mform .fitem div.fitemtitle {
476 float: left;
477 }
478
8903b17b
BB
479 // GRID & CONTAINERS
480 // -----------------
481 // Remove width from containers
482 .container {
483 width: auto;
484 }
485 // Fluid rows
486 .row-fluid {
487 width: 100%;
488 }
489 .row-fluid .span8.pull-right,
490 .row-fluid .span9.pull-right {
491 float: none;
492 }
493 // Undo negative margin on rows and thumbnails
494 .row {
495 margin-left: 0;
496 }
497 // Make all grid-sized elements block level again
498 [class*="span"],
499 .row-fluid [class*="span"] {
500 float: none;
501 display: block;
502 width: 100%;
503 margin-left: 0;
504 .box-sizing(border-box);
505 }
338021b9 506
d8037b26
GB
507 // We need to specify a more specific selector to reset the width for
508 // cases when we have content in the side-pre blockregion but not in the
509 // side-post blockregion as there are more specific selectors in
510 // core.less which take precedence which break responsiveness.
511 .empty-region-side-post.used-region-side-pre, // Post region is empty and pre region is in use.
512 .jsenabled.docked-region-side-post.used-region-side-pre { // All post blocks docked and pre region is in use.
513 #block-region-side-pre.span4,
514 #region-main.span8 {
515 .fluid-span(12);
516 }
517 }
338021b9 518
8903b17b
BB
519 .row-fluid .span12 {
520 width: 100%;
521 .box-sizing(border-box);
522 }
523 .row-fluid [class*="offset"]:first-child {
524 margin-left: 0;
525 }
526 div[role=main] {
f6606495 527 margin-bottom: 1em;
8903b17b 528 }
759e970f
AB
529 .coursebox {
530 .info {
531 .name {
532 a {
533 background-position: 0 13px;
534 }
535 }
536 }
537 }
538 .category-browse {
539 .coursebox {
540 .info {
541 .name {
542 a {
543 background-position: 0 13px;
544 }
545 }
546 }
547 }
548 }
8903b17b 549}
5dc361e1
SH
550
551// All widths between 1200px and 1600px
552@media (min-width: 1200px) and (max-width: 1600px) {
d8037b26
GB
553 .fluid-span (@columns) {
554 .fluid-span-full(@columns, @fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
555 }
5dc361e1
SH
556 // CSS for the course management pages.
557 #course-category-listings.columns-3 {
e514c722 558 background-color: @tableBackground;
5dc361e1
SH
559 border:0;
560
561 #category-listing,
562 #course-listing {
563 .fluid-span(6);
d8037b26
GB
564 margin-left: @fluidGridGutterWidth1200;
565 *margin-left: @fluidGridGutterWidth1200 - (.5 / @gridRowWidth * 100 * 1%);
5dc361e1
SH
566 &:first-child {
567 margin-left: 0;
568 }
569 }
570 #course-detail {
571 .fluid-span(12);
572 margin: 1em 0 0;
573 }
574 }
5dc361e1
SH
575}
576
577// All widths up to 1199px.
578@media (max-width: 1199px) {
579 // CSS for the course management pages.
580 #course-category-listings.columns-3 {
e514c722 581 background-color: @tableBackground;
5dc361e1
SH
582 border:0;
583 #category-listing,
584 #course-listing,
585 #course-detail {
586 .fluid-span(12);
587 margin: 0 0 1em 0;
588 }
589 }
35620f63
SH
590
591 #page-mod-forum-discuss .discussioncontrols {
592 text-align: right;
593 .discussioncontrol {
594 float: none;
595 width: auto;
596 display: inline-block;
597 margin: 0 3px 0.5em;
598 select,
599 input {
600 margin-bottom: 0;
601 }
602 &.movediscussion {
603 margin-right: 0;
604 padding-right: 0;
605 }
606 }
607 }
608
609 #page-mod-forum-discuss.dir-rtl .discussioncontrols {
610 text-align: left;
611 }
338021b9 612}
88d366e5
JF
613
614
615// File Picker.
616@media (max-width: 768px) {
617 .fp-forminset .control-group .controls {
618 margin-left: 0;
619 }
620 .dir-rtl .fp-formset .control-group {
621 label.control-label {
622 text-align: right;
623 float: none;
624 }
625 }
626 .dir-rtl .fp-forminset .control-group {
627 label.control-label {
628 text-align: right;
629 float: none;
630 }
631 .controls {
632 margin-right: 0;
633 }
634 }
d8037b26 635}