MDL-55452 stylelint: prevent use of !important
[moodle.git] / theme / bootstrapbase / less / moodle / modules.less
CommitLineData
8903b17b
BB
1/* modules.less */
2
3// The home for small tweaks to modules that don't require
4// changes drastic enough to pull in the full module css
5// and replace it completely
6// Plus some misc. odds and ends
7
8select {
9 width: auto;
10}
11
de2fec2e 12// Forum module
8bf57320 13
bfaee803
SH
14.path-mod-forum .forumsearch {
15 input,
16 .helptooltip {
17 margin: 0 3px;
18 }
19}
20
8903b17b
BB
21.path-mod-forum .forumheaderlist,
22.path-mod-forum .forumheaderlist td {
23 border: none;
24}
25
ebfb73db
AN
26.path-mod-forum {
27 .forumheaderlist {
28 thead .header,
29 tbody .discussion td {
8bf57320 30 white-space: normal;
ebfb73db
AN
31 vertical-align: top;
32 padding-left: 0.5em;
33 padding-right: 0.5em;
8bf57320 34 }
ebfb73db
AN
35
36 thead .header {
37 white-space: normal;
38 vertical-align: top;
39 }
40
41 thead .header.replies {
8bf57320
DM
42 text-align: center;
43 }
ebfb73db
AN
44 thead .header.lastpost {
45 text-align: right;
46 }
47 thead .header th,
0e878352 48 tbody .discussion td {
ebfb73db
AN
49 &.discussionsubscription {
50 width: 16px;
51 padding-left: 0.5em;
52 padding-right: 0.5em;
53 }
54 }
55 .discussion {
0e878352
DP
56 .author,
57 .replies,
58 .lastpost {
ebfb73db
AN
59 white-space: normal;
60 }
61 .discussionsubscription,
62 .replies {
63 text-align: center;
64 }
65 .topic,
66 .discussionsubscription,
67 .topic.starter,
68 .picture,
69 .author,
70 .replies,
71 .lastpost {
72 vertical-align: top;
73 }
8bf57320
DM
74 }
75 }
76}
77
8903b17b
BB
78.forumpost {
79 .well;
80 padding: 6px;
73c4e333
AB
81 .header {
82 margin-bottom: 3px;
83 }
cee8be63
JC
84 .picture img {
85 margin: 3px;
86 &.userpicture {
87 margin-left: 3px;
88 margin-right: 10px;
89 }
90 }
91 .content {
92 .posting.fullpost {
93 margin-top: 8px;
94 }
95 }
96 .row {
97 .topic,
98 .content-mask,
99 .options {
100 margin-left: 48px;
101 }
102 &.side {
103 clear: both;
104 }
105 }
106}
107
108.dir-rtl .forumpost {
109 .picture img {
110 &.userpicture {
111 margin-left: 10px;
112 margin-right: 3px;
113 }
114 }
115 .row {
116 .topic,
117 .content-mask,
118 .options {
119 margin-left: 0;
120 margin-right: 48px;
73c4e333
AB
121 }
122 }
8903b17b
BB
123}
124
125.forumpost .row .left {
cee8be63 126 width: 48px;
8903b17b
BB
127}
128
129.forumpost .options .commands {
130 margin-left: 0;
131}
132
133.forumpost .subject {
134 font-weight: bold;
135}
136
137// Override hardcoded forum modules styling
138.forumsearch input[type=text] {
eb695207 139 margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
8903b17b
BB
140}
141
35620f63
SH
142#page-mod-forum-discuss .discussioncontrols {
143 width: auto;
144 margin: 0;
8903b17b
BB
145}
146
147#page-footer {
148 margin-top: 1em;
149 padding: 1em 0;
e514c722 150 border-top: 2px solid @tableBorder;
8903b17b
BB
151}
152
0e878352
DP
153.maincalendar .calendarmonth td,
154.maincalendar .calendarmonth th {
e514c722 155 border: 1px dotted @tableBorder;
8903b17b
BB
156}
157
158.path-grade-report-grader h1 {
159 text-align: inherit;
160}
161
162#page-mod-chat-gui_basic input#message {
163 max-width: 100%;
164}
165
166#page-mod-data-view #singleimage {
167 width: auto;
168}
169
170.path-mod-data form {
171 margin-top: 10px;
172}
173
174.template_heading {
175 margin-top: 10px;
176}
177
178.breadcrumb-button {
179 float: right;
3355b72e 180 margin-top: 4px;
8903b17b 181}
eef85081 182
41dcfbf1
MA
183.breadcrumb-button .singlebutton {
184 float: left;
185 margin-left: 4px;
186}
187
eef85081
NK
188.dir-rtl {
189 .nav-tabs > li,
190 .nav-pills > li {
191 float: right;
192 }
193}
8903b17b 194.dir-rtl .navbar .brand {
2af06c4c 195 padding: 10px 0 10px 20px;
8903b17b
BB
196 float: right;
197}
af9c2dcf 198
af9c2dcf
GB
199.navbar-inverse .logininfo a {
200 color: @navbarInverseLinkColor;
201}
202.navbar-inverse .logininfo a:hover {
203 background-color: @navbarInverseLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
204 color: @navbarInverseLinkColorHover;
8903b17b
BB
205}
206
207.navbar-fixed-top,
208.navbar-fixed-bottom {
58183f9b 209 z-index: 4030;
8903b17b
BB
210}
211
212.dir-rtl .breadcrumb-button,
213.dir-rtl .navbar .btn-navbar {
214 float: left;
215}
216
41dcfbf1
MA
217.dir-rtl .breadcrumb-button .singlebutton {
218 float: right;
219 margin-right: 4px;
b395f7b5 220 margin-left: 0;
221}
222.dir-rtl .breadcrumb-button .singlebutton div,
223.dir-rtl .breadcrumb-button .singlebutton div input[type="submit"] {
224 margin-right: 5px;
225 margin-left: 0;
41dcfbf1
MA
226}
227
8903b17b 228.ie .row-fluid .desktop-first-column {
58183f9b 229 margin-left: 0;
8903b17b
BB
230}
231.langmenu form {
232 margin: 0;
233}
234.container-fluid {
235 max-width: 1680px;
236 margin: 0 auto;
237}
238// contributed by Paul Hibbitts, see http://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx
239canvas {
240 -ms-touch-action: auto;
241}
242
243div#dock {
244 display: none;
245}
246
de2fec2e
TH
247// Choice module
248
9184a2f7
AB
249.path-mod-choice {
250 .horizontal .choices {
251 margin: 0;
252 .option {
253 display: inline-block;
254 padding: 10px;
255 }
256 }
257 .results .data {
258 white-space: normal;
8903b17b
BB
259 }
260}
261
de2fec2e
TH
262// Lesson module
263
8903b17b
BB
264.path-mod-lesson .firstpageoptions {
265 margin: auto;
266 min-width: 280px;
267 width: 60%;
268}
01a96461
RW
269
270.path-mod-lesson .centerpadded {
271 padding: 5px;
272 text-align: center;
273}
876c0ac3 274
14cdc257
RW
275.path-mod-wiki .wiki_headingtitle,
276.path-mod-wiki .midpad,
277.path-mod-wiki .wiki_headingtime {
278 text-align: inherit;
876c0ac3 279}
14cdc257
RW
280
281.path-mod-wiki .wiki_contentbox {
282 width: 100%;
eef85081 283}
1765866f 284
a36f97f7
JC
285// Dropdown styling.
286.dropdown-menu {
287 > li > a {
288 padding: 3px 20px 3px 8px;
289 }
290}
291.dir-rtl .dropdown-menu {
292 > li > a {
293 padding: 3px 8px 3px 20px;
294 }
295}
296.dir-rtl .dropdown-submenu > .dropdown-menu {
d3a93557 297 .border-radius(6px 0px 6px 6px);
a36f97f7
JC
298}
299
300
1765866f
DM
301// Survey module
302
303.path-mod-survey {
304 .surveytable {
75b68df3
DP
305 > tbody > tr:nth-of-type(odd) {
306 background-color: @tableBackground;
307 }
308 > tbody > tr:nth-of-type(even) {
309 background-color: @tableBackgroundAccent;
310 }
311 .rblock label {
312 text-align: center;
313 }
1765866f 314 }
0e878352
DP
315 .resultgraph,
316 .reportsummary,
317 .studentreport,
318 .reportbuttons,
319 .centerpara {
418b9328 320 text-align: center;
1765866f
DM
321 }
322}
b549e66e
AB
323// rtl overrides
324.dir-rtl {
8bb2d476 325 &.path-mod-forum .forumheaderlist {
b549e66e
AB
326 thead .header.lastpost {
327 text-align: left;
328 }
8bb2d476
JC
329 .discussion {
330 .lastpost {
331 text-align: left;
332 }
333 }
b549e66e 334 }
a36f97f7
JC
335}
336
337.nav .caret {
338 margin-left: 4px;
339}
340.dir-rtl .nav .caret {
341 margin-right: 4px;
ebfb73db 342}
d9640a99 343
328ef3df
JC
344// Dividers
345.nav {
346 .divider {
347 overflow: hidden;
348 width: 0;
d8d65e76
ME
349 height: @navbarHeight;
350 border-left: 1px solid @navbarBackground;
351 border-right: 1px solid @navbarBackgroundHighlight;
352 }
353}
354.navbar-inverse {
355 .nav {
356 .divider {
357 border-left-color: @navbarInverseBackground;
358 border-right-color: lighten(@navbarInverseBackground, 25%);
359 }
328ef3df
JC
360 }
361}
328ef3df
JC
362.dropdown-menu {
363 .divider {
364 width: auto;
365 height: 1px;
d8d65e76
ME
366 border-left: 0 none;
367 border-right: 0 none;
328ef3df 368 }
d9640a99 369}
6da0e4cf
JC
370
371// Usermenu
372.usermenu {
854a647e
JC
373 .login {
374 color: @navbarText;
375 line-height: 40px;
376 a {
f89a85f8
JC
377 color: @linkColor;
378 &:hover,
379 &:focus {
380 color: @linkColorHover;
381 text-decoration: underline;
382 }
854a647e
JC
383 }
384 }
f89a85f8
JC
385 .moodle-actionmenu {
386
387 .toggle-display {
6da0e4cf 388 display: block;
f89a85f8
JC
389 opacity: 1;
390 color: @navbarLinkColor;
391 line-height: 40px;
392 height: 40px;
393 &:hover {
394 color: @navbarLinkColorHover;
395 }
396
397 .userbutton {
398 height: 40px;
6da0e4cf 399 line-height: 40px;
0e878352 400 .avatars {
f89a85f8
JC
401 display: inline-block;
402 height: 36px;
403 width: 36px;
404 vertical-align: middle;
405 margin-right: 6px;
406 margin-left: 6px;
407
408 .avatar,
409 img {
410 display: block;
411 }
412 }
413 .usertext {
414 display: inline-block;
415 vertical-align: middle;
416 line-height: 1em;
417 color: inherit;
418 .meta,
419 .role {
420 display: block;
421 font-size: 12px;
422 .value {
423 font-weight: bold;
424 }
425 }
426 .role {
427 font-weight: bold;
428 }
429 }
6da0e4cf 430 }
6da0e4cf 431
f89a85f8
JC
432 // Hide caret when JS is disabled.
433 .caret {
434 display: none;
6da0e4cf
JC
435 }
436 }
f89a85f8
JC
437
438
439 // A little bit of visual feedback for the action menu when Javascript is disabled.
440 .menu {
441 .menu-action.icon {
442 img {
443 border-radius: 0;
444 background: transparent;
445 box-shadow: none;
446 }
447 &:hover img {
448 background: #fff;
449 border-radius: 4px;
450 box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.125);
6da0e4cf
JC
451 }
452 }
6da0e4cf 453 }
f89a85f8
JC
454 &[data-enhanced] .menu {
455 .menu-action.icon,
456 .menu-action.icon:hover {
457 img {
458 border-radius: 0;
459 background: transparent;
460 box-shadow: none;
461 }
462 }
6da0e4cf 463 }
f89a85f8 464
6da0e4cf
JC
465 }
466}
f89a85f8 467.navbar-inverse {
854a647e
JC
468 .usermenu {
469 .login {
470 color: @navbarInverseText;
471 a {
472 color: @navbarInverseLinkColor;
473 &:hover {
474 color: @navbarInverseLinkColorHover;
475 }
476 }
477 }
f89a85f8
JC
478 .moodle-actionmenu {
479 .toggle-display {
480 color: @navbarInverseLinkColor;
481 }
482 .userbutton {
483 .usertext {
854a647e 484 color: @navbarInverseLinkColor;
f89a85f8
JC
485 .meta {
486 color: @navbarInverseText;
487 .value {
488 color: @navbarInverseLinkColor;
489 }
490 }
6da0e4cf
JC
491 }
492 }
f89a85f8
JC
493 &:hover {
494 .usertext {
495 color: @navbarInverseLinkColorHover;
496 .meta {
497 color: @navbarInverseText;
498 .value {
499 color: @navbarInverseLinkColorHover;
500 }
854a647e
JC
501 }
502 }
503 }
f89a85f8 504 &[data-enhanced] .toggle-display.textmenu {
854a647e
JC
505 .caret {
506 border-top-color: @navbarInverseLinkColorHover;
507 }
6da0e4cf 508 }
f89a85f8
JC
509
510 // A little bit of visual feedback for the action menu when Javascript is disabled.
511 .menu {
512 .menu-action.icon {
513 img {
514 border-radius: 0;
515 background: transparent;
516 box-shadow: none;
517 }
518 &:hover img {
519 background: #333;
520 border-radius: 4px;
521 box-shadow: 0px 0px 16px rgba(255, 255, 255, 1);
522 }
523 }
524 }
525 &[data-enhanced] .menu {
526 .menu-action.icon,
527 .menu-action.icon:hover {
528 img {
529 border-radius: 0;
530 background: transparent;
531 box-shadow: none;
532 }
533 }
534 }
6da0e4cf
JC
535 }
536 }
537}
f89a85f8
JC
538
539.jsenabled {
6da0e4cf 540 .usermenu {
f89a85f8
JC
541 .moodle-actionmenu {
542 .toggle-display {
543 display: block;
544
545 &.textmenu {
546 padding-left: 8px;
547 padding-right: 8px;
548 }
549
550 // Show caret when JS is enabled.
551 .caret {
552 display: inline-block;
553 position: relative;
554 top: 9px;
555 }
556 }
557
558 > .menubar {
559 display: block;
677650c3 560 margin: 0px;
f89a85f8
JC
561 }
562 > .menu {
563 min-width: 160px;
564 .filler {
565 display: block;
566 .nav-divider();
567 }
568 }
569
570 &.show {
571 background-color: @navbarLinkBackgroundActive;
572 .menu {
573 padding: 5px 0;
574 margin: 2px 0 0;
575 background-clip: padding-box;
576 &:before {
577 content: '';
578 display: inline-block;
418b9328
DP
579 border-left: 7px solid transparent;
580 border-right: 7px solid transparent;
f89a85f8
JC
581 border-bottom: 7px solid #ccc;
582 border-bottom-color: @dropdownBorder;
583 position: absolute;
584 top: -7px;
585 }
586 &:after {
587 content: '';
588 display: inline-block;
418b9328
DP
589 border-left: 6px solid transparent;
590 border-right: 6px solid transparent;
f89a85f8
JC
591 border-bottom: 6px solid @dropdownBackground;
592 position: absolute;
593 top: -6px;
594 }
595
596 a {
f89a85f8
JC
597 border-radius: 0;
598
8ef43cfd
JC
599 &:focus {
600 text-decoration: none;
601 }
f89a85f8 602 &:hover {
8ef43cfd 603 text-decoration: none;
f89a85f8
JC
604 #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
605 }
606 }
607 &.align-tr-br {
608 margin-top: 2px;
609 }
610 .box-shadow (0 5px 10px rgba(0, 0, 0, 0.2));
611 }
f89a85f8 612 }
6da0e4cf 613 }
f89a85f8
JC
614 }
615 .navbar-inverse {
616 .usermenu {
617 .moodle-actionmenu {
618
619 &.show {
620 background-color: @navbarInverseLinkBackgroundActive;
621 }
6da0e4cf
JC
622 }
623 }
f89a85f8
JC
624 }
625}
626
627.dir-ltr {
628 .usermenu {
629 float: right;
630 > .moodle-actionmenu {
631 > .menu {
632 &:before {
633 right: 9px;
634 }
635 &:after {
636 right: 10px;
637 }
638 }
639 > .menubar li a {
640 text-align: right;
641 }
6da0e4cf
JC
642 }
643 }
644 &.userloggedinas .usermenu .userbutton .avatars {
645 .avatar {
646 &.current {
f89a85f8 647 left: 16px;
6da0e4cf
JC
648 }
649 }
650 }
651}
652
653.dir-rtl {
654 .usermenu {
854a647e 655 float: left;
f89a85f8
JC
656 > .moodle-actionmenu {
657 > .menu {
658 margin-right: 0px;
659 &:before {
660 left: 9px;
661 }
662 &:after {
663 left: 10px;
664 }
665 }
666 > .menubar li a {
667 text-align: left;
6da0e4cf 668 }
6da0e4cf
JC
669 }
670 }
671 &.userloggedinas .usermenu .userbutton .avatars {
672 .avatar {
673 &.current {
f89a85f8 674 left: -14px;
6da0e4cf
JC
675 }
676 }
677 }
678}
f89a85f8
JC
679
680
681.userloggedinas .usermenu .userbutton .avatars {
682 .avatar {
683 &.current {
684 position: relative;
685 top: 4px;
686 left: 4px;
687 width: 20px;
688 height: 20px;
689 margin-top: 11px;
690 margin-bottom: -34px;
691 border: 1px solid #fff;
692 border-radius: 50%;
418b9328 693 box-shadow: -2px -2px 16px rgba(0, 0, 0, 0.25);
f89a85f8
JC
694 }
695 img {
696 width: inherit;
697 height: inherit;
698 }
699 overflow: hidden;
700 }
701}
de2fec2e
TH
702
703// Quiz module
704
705// Question navigation block.
706.path-mod-quiz #mod_quiz_navblock {
707 .qnbutton {
708 text-decoration: none;
709 font-size: 14px;
710 line-height: 20px;
711 font-weight: normal;
712 background-color: @white;
713 background-image: none;
714 height: 40px;
715 width: 30px;
716 border-radius: 3px;
717 border: 0;
718 overflow: visible;
719 margin: 0 6px 6px 0;
720 }
721 span.qnbutton {
722 cursor: default;
723 background-color: @inputDisabledBackground;
724 color: @gray;
725 }
726 a.qnbutton:hover,
727 a.qnbutton:active,
728 a.qnbutton:focus {
729 text-decoration: underline;
730 }
731
732 .qnbutton .thispageholder {
733 border: 1px solid;
734 border-radius: 3px;
735 z-index: 1;
736 }
737 .qnbutton.thispage .thispageholder {
738 border-width: 3px;
739 }
740 .allquestionsononepage .qnbutton.thispage .thispageholder {
741 border-width: 1px;
742 }
743
744 .qnbutton.flagged .thispageholder {
745 background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0px no-repeat;
746 }
747
748 .qnbutton .trafficlight {
749 border: 0;
750 background: @white none center/10px no-repeat scroll;
751 height: 20px;
752 margin-top: 20px;
753 border-radius: 0 0 3px 3px;
754 }
755
756 .qnbutton.notyetanswered .trafficlight,
757 .qnbutton.invalidanswer .trafficlight {
758 background-color: @white;
759 }
760 .qnbutton.invalidanswer .trafficlight {
761 background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
762 }
763 .qnbutton.correct .trafficlight {
764 background-image: url([[pix:theme|mod/quiz/checkmark]]);
765 background-color: @successText;
766 }
767 .qnbutton.blocked .trafficlight {
768 background-image: url([[pix:core|t/locked]]);
769 background-color: @inputDisabledBackground;
770 }
771 .qnbutton.notanswered .trafficlight,
772 .qnbutton.incorrect .trafficlight {
773 background-color: @errorText;
774 }
775 .qnbutton.partiallycorrect .trafficlight {
776 background-image: url([[pix:theme|mod/quiz/whitecircle]]);
777 background-color: @orange;
778 }
779 .qnbutton.complete .trafficlight,
780 .qnbutton.answersaved .trafficlight,
05690639 781 .qnbutton.requiresgrading .trafficlight {
de2fec2e
TH
782 background-color: @grayLight;
783 }
784}