weekly release 3.2dev
[moodle.git] / theme / boost / scss / moodle / modules.scss
CommitLineData
536f0460
DW
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
63e4df60
DW
12// Feedback module
13.path-mod-feedback .feedback_form .col-md-9,
14.path-mod-feedback .feedback_form .col-md-3,
15.path-mod-feedback .feedback_form .col-md-3 label {
16 width: 100%;
17}
f4143537 18
63e4df60
DW
19.path-mod-feedback .feedback_form .col-md-9 {
20 margin-left: 1rem;
21 margin-bottom: -2rem;
22}
23
536f0460
DW
24// Forum module
25
26.path-mod-forum .forumsearch {
27 input,
28 .helptooltip {
29 margin: 0 3px;
30 }
31}
32
33.path-mod-forum .forumheaderlist,
34.path-mod-forum .forumheaderlist td {
35 border: none;
36}
37
38.path-mod-forum {
39 .forumheaderlist {
40 thead .header,
41 tbody .discussion td {
42 white-space: normal;
43 vertical-align: top;
44 padding-left: 0.5em;
45 padding-right: 0.5em;
46 }
47
48 thead .header {
49 white-space: normal;
50 vertical-align: top;
51 }
52
53 thead .header.replies {
54 text-align: center;
55 }
f4143537 56
536f0460
DW
57 thead .header.lastpost {
58 text-align: right;
59 }
f4143537 60
536f0460 61 thead .header th,
f4143537 62 tbody .discussion td {
536f0460
DW
63 &.discussionsubscription {
64 width: 16px;
65 padding-left: 0.5em;
66 padding-right: 0.5em;
67 }
68 }
f4143537 69
536f0460 70 .discussion {
f4143537
DP
71 .author,
72 .replies,
73 .lastpost {
536f0460
DW
74 white-space: normal;
75 }
f4143537 76
536f0460
DW
77 .discussionsubscription,
78 .replies {
79 text-align: center;
80 }
f4143537 81
536f0460
DW
82 .topic,
83 .discussionsubscription,
84 .topic.starter,
85 .picture,
86 .author,
87 .replies,
88 .lastpost {
89 vertical-align: top;
90 }
91 }
92 }
93}
94
95.forumpost {
96 @extend .card;
97 padding: 6px;
f4143537 98
536f0460
DW
99 .header {
100 margin-bottom: 3px;
101 }
f4143537 102
536f0460
DW
103 .picture img {
104 margin: 3px;
f4143537 105
536f0460
DW
106 &.userpicture {
107 margin-left: 3px;
108 margin-right: 10px;
109 }
110 }
f4143537 111
536f0460
DW
112 .content {
113 .posting.fullpost {
114 margin-top: 8px;
115 }
116 }
f4143537 117
536f0460
DW
118 .row {
119 .topic,
120 .content-mask,
121 .options {
122 margin-left: 48px;
123 }
f4143537 124
536f0460
DW
125 &.side {
126 clear: both;
127 }
128 }
129}
130
131.forumpost .row .left {
132 width: 48px;
133}
134
135.forumpost .options .commands {
136 margin-left: 0;
137}
138
139.forumpost .subject {
140 font-weight: bold;
141}
142
143// Override hardcoded forum modules styling
144.forumsearch input[type=text] {
5142f564 145 margin-bottom: 0;
536f0460
DW
146}
147
148#page-mod-forum-discuss .discussioncontrols {
149 width: auto;
150 margin: 0;
151}
152
153#page-footer {
536f0460
DW
154 border-top: 2px solid $table-border-color;
155}
156
f4143537
DP
157.maincalendar .calendarmonth td,
158.maincalendar .calendarmonth th {
536f0460
DW
159 border: 1px dotted $table-border-color;
160}
161
162.path-grade-report-grader h1 {
163 text-align: inherit;
164}
165
166#page-mod-chat-gui_basic input#message {
167 max-width: 100%;
168}
169
170#page-mod-data-view #singleimage {
171 width: auto;
172}
173
174.path-mod-data form {
175 margin-top: 10px;
176}
177
178.template_heading {
179 margin-top: 10px;
180}
181
182.breadcrumb-button {
183 float: right;
184 margin-top: 4px;
185}
186
187.breadcrumb-button .singlebutton {
188 float: left;
189 margin-left: 4px;
190}
191
192.navbar-fixed-top,
193.navbar-fixed-bottom {
194 z-index: 4030;
195}
196
197.ie .row-fluid .desktop-first-column {
198 margin-left: 0;
199}
f4143537 200
536f0460
DW
201.langmenu form {
202 margin: 0;
203}
536f0460
DW
204// contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
205canvas {
206 -ms-touch-action: auto;
207}
208
209div#dock {
210 display: none;
211}
212
213// Choice module
214
215.path-mod-choice {
216 .horizontal .choices {
217 margin: 0;
f4143537 218
536f0460
DW
219 .option {
220 display: inline-block;
221 padding: 10px;
222 }
223 }
f4143537 224
536f0460
DW
225 .results .data {
226 white-space: normal;
227 }
228}
229
230// Lesson module
231
63e4df60 232/** General styles (scope: all of lesson) **/
f4143537
DP
233.path-mod-lesson .invisiblefieldset.fieldsetfix {
234 display: block;
235}
536f0460
DW
236
237.path-mod-wiki .wiki_headingtitle,
238.path-mod-wiki .midpad,
239.path-mod-wiki .wiki_headingtime {
240 text-align: inherit;
241}
242
243.path-mod-wiki .wiki_contentbox {
244 width: 100%;
245}
246
137c289a
FM
247// Dropdown styling.
248.dropdown-menu {
249 margin-top: 11px;
250}
251
536f0460
DW
252// Survey module
253
254.path-mod-survey {
255 .surveytable {
f4143537
DP
256 > tbody > tr:nth-of-type(odd) {
257 background-color: $table-bg;
258 }
259
260 > tbody > tr:nth-of-type(even) {
261 background-color: $table-bg-accent;
262 }
263
264 .rblock label {
265 text-align: center;
266 }
536f0460 267 }
f4143537
DP
268
269 .resultgraph,
270 .reportsummary,
271 .studentreport,
272 .reportbuttons,
273 .centerpara {
274 text-align: center;
536f0460
DW
275 }
276}
277
278.nav .caret {
279 margin-left: 4px;
280}
281
282// Dividers
283.nav {
284 .divider {
285 overflow: hidden;
286 width: 0;
9cb41231
DP
287 // height: $navbarHeight;
288 // border-left: 1px solid $navbarBackground;
289 // border-right: 1px solid $navbarBackgroundHighlight;
536f0460
DW
290 }
291}
292//.navbar-inverse {
293// .nav {
9cb41231
DP
294// .divider {
295// border-left-color: $navbarInverseBackground;
296// border-right-color: lighten($navbarInverseBackground, 25%);
297// }
298// }
536f0460 299//}
536f0460
DW
300
301// Usermenu
302.usermenu {
303 .login {
5f18da12 304 line-height: 2.25rem;
f4143537 305
536f0460 306 a {
5f18da12 307 color: $link-color;
f4143537 308
536f0460
DW
309 &:hover,
310 &:focus {
5f18da12 311 color: $link-hover-color;
536f0460
DW
312 text-decoration: underline;
313 }
314 }
315 }
536f0460 316
f4143537 317 .moodle-actionmenu {
536f0460
DW
318 .toggle-display {
319 display: block;
320 opacity: 1;
321 color: $dropdown-link-color;
322 line-height: 40px;
323 height: 40px;
f4143537 324
536f0460
DW
325 &:hover {
326 color: $dropdown-link-hover-color;
327 }
328
329 .userbutton {
330 height: 40px;
331 line-height: 40px;
f4143537
DP
332
333 .avatars {
536f0460
DW
334 display: inline-block;
335 height: 36px;
336 width: 36px;
337 vertical-align: middle;
338 margin-right: 6px;
339 margin-left: 6px;
340
341 .avatar,
342 img {
343 display: block;
344 }
345 }
f4143537 346
536f0460
DW
347 .usertext {
348 display: inline-block;
349 vertical-align: middle;
350 line-height: 1em;
351 color: inherit;
f4143537 352
536f0460
DW
353 .meta,
354 .role {
355 display: block;
356 font-size: 12px;
f4143537 357
536f0460
DW
358 .value {
359 font-weight: bold;
360 }
361 }
f4143537 362
536f0460
DW
363 .role {
364 font-weight: bold;
365 }
366 }
367 }
368
369 // Hide caret when JS is disabled.
370 .caret {
371 display: none;
372 }
373 }
536f0460
DW
374 }
375}
f4143537 376
3313fdd6
DW
377@include media-breakpoint-down(sm) {
378 .usertext {
379 display: none;
380 }
381}
f4143537 382
536f0460
DW
383.jsenabled {
384 .usermenu {
385 .moodle-actionmenu {
386 .toggle-display {
387 display: block;
388
389 &.textmenu {
390 padding-left: 8px;
391 padding-right: 8px;
392 }
393
394 // Show caret when JS is enabled.
395 .caret {
396 display: inline-block;
397 position: relative;
398 top: 9px;
399 }
400 }
401
402 > .menubar {
403 display: block;
fde35b8f 404 margin: 0;
536f0460 405 }
f4143537 406
536f0460
DW
407 > .menu {
408 min-width: 160px;
f4143537 409
536f0460
DW
410 .filler {
411 display: block;
f4143537 412
536f0460
DW
413 @include nav-divider();
414 }
415 }
416
417 &.show {
418 background-color: $dropdown-link-active-bg;
f4143537 419
536f0460
DW
420 .menu {
421 padding: 5px 0;
422 margin: 2px 0 0;
423 background-clip: padding-box;
f4143537 424
536f0460
DW
425 &:before {
426 content: '';
427 display: inline-block;
f4143537
DP
428 border-left: 7px solid transparent;
429 border-right: 7px solid transparent;
536f0460
DW
430 border-bottom: 7px solid #ccc;
431 border-bottom-color: $dropdown-border-color;
432 position: absolute;
433 top: -7px;
434 }
f4143537 435
536f0460
DW
436 &:after {
437 content: '';
438 display: inline-block;
f4143537
DP
439 border-left: 6px solid transparent;
440 border-right: 6px solid transparent;
536f0460
DW
441 border-bottom: 6px solid $dropdown-bg;
442 position: absolute;
443 top: -6px;
444 }
445
446 a {
447 border-radius: 0;
448
449 &:focus {
450 text-decoration: none;
451 }
f4143537 452
536f0460
DW
453 &:hover {
454 text-decoration: none;
f4143537 455
da92b738 456 @include gradient-y($dropdown-link-hover-bg, darken($dropdown-link-hover-bg, 5%));
536f0460
DW
457 }
458 }
f4143537 459
536f0460
DW
460 &.align-tr-br {
461 margin-top: 2px;
462 }
f4143537
DP
463
464 @include box-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
465 }
536f0460
DW
466 }
467 }
468 }
469}
470
471.usermenu {
472 float: right;
f4143537 473
536f0460
DW
474 > .moodle-actionmenu {
475 > .menu {
476 &:before {
477 right: 9px;
478 }
f4143537 479
536f0460
DW
480 &:after {
481 right: 10px;
482 }
483 }
f4143537 484
536f0460
DW
485 > .menubar li a {
486 text-align: right;
487 }
488 }
489}
f4143537 490
536f0460
DW
491&.userloggedinas .usermenu .userbutton .avatars {
492 .avatar {
493 &.current {
494 left: 16px;
495 }
496 }
497}
498
536f0460
DW
499.userloggedinas .usermenu .userbutton .avatars {
500 .avatar {
501 &.current {
502 position: relative;
503 top: 4px;
504 left: 4px;
505 width: 20px;
506 height: 20px;
507 margin-top: 11px;
508 margin-bottom: -34px;
509 border: 1px solid #fff;
510 border-radius: 50%;
f4143537 511 box-shadow: -2px -2px 16px rgba(0, 0, 0, 0.25);
536f0460 512 }
f4143537 513
536f0460
DW
514 img {
515 width: inherit;
516 height: inherit;
517 }
518 overflow: hidden;
519 }
520}
521
522// Quiz module
523
524// Question navigation block.
525.path-mod-quiz #mod_quiz_navblock {
526 .qnbutton {
527 text-decoration: none;
528 font-size: 14px;
529 line-height: 20px;
530 font-weight: normal;
531 background-color: $body-color;
532 background-image: none;
533 height: 40px;
534 width: 30px;
535 border-radius: 3px;
536 border: 0;
537 overflow: visible;
538 margin: 0 6px 6px 0;
539 }
f4143537 540
536f0460
DW
541 span.qnbutton {
542 cursor: default;
543 background-color: $input-bg-disabled;
544 color: $gray;
545 }
f4143537 546
536f0460
DW
547 a.qnbutton:hover,
548 a.qnbutton:active,
549 a.qnbutton:focus {
550 text-decoration: underline;
551 }
552
553 .qnbutton .thispageholder {
554 border: 1px solid;
555 border-radius: 3px;
556 z-index: 1;
557 }
f4143537 558
536f0460
DW
559 .qnbutton.thispage .thispageholder {
560 border-width: 3px;
561 }
f4143537 562
536f0460
DW
563 .allquestionsononepage .qnbutton.thispage .thispageholder {
564 border-width: 1px;
565 }
566
567 .qnbutton.flagged .thispageholder {
fde35b8f 568 background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
536f0460
DW
569 }
570
571 .qnbutton .trafficlight {
572 border: 0;
f4143537 573 background: $body-color none center / 10px no-repeat scroll;
536f0460
DW
574 height: 20px;
575 margin-top: 20px;
576 border-radius: 0 0 3px 3px;
577 }
578
579 .qnbutton.notyetanswered .trafficlight,
580 .qnbutton.invalidanswer .trafficlight {
581 background-color: $body-color;
582 }
f4143537 583
536f0460
DW
584 .qnbutton.invalidanswer .trafficlight {
585 background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
586 }
f4143537 587
536f0460
DW
588 .qnbutton.correct .trafficlight {
589 background-image: url([[pix:theme|mod/quiz/checkmark]]);
590 background-color: $state-success-text;
591 }
f4143537 592
536f0460
DW
593 .qnbutton.blocked .trafficlight {
594 background-image: url([[pix:core|t/locked]]);
595 background-color: $input-bg-disabled;
596 }
f4143537 597
536f0460
DW
598 .qnbutton.notanswered .trafficlight,
599 .qnbutton.incorrect .trafficlight {
600 background-color: $state-danger-text;
601 }
f4143537 602
536f0460
DW
603 .qnbutton.partiallycorrect .trafficlight {
604 background-image: url([[pix:theme|mod/quiz/whitecircle]]);
605 background-color: $state-warning-text;
606 }
f4143537 607
536f0460
DW
608 .qnbutton.complete .trafficlight,
609 .qnbutton.answersaved .trafficlight,
610 .qnbutton.requiresgrading .trafficlight {
611 background-color: $gray-light;
612 }
613}
bffc0ef1
FM
614
615/**
616 * Assign.
617 */
618.path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
619 top: auto;
620}
f4143537 621
63e4df60 622.path-mod-assign [data-region="grade-panel"] .has-popout {
9cb41231 623 background-color: $card-bg;
f4143537 624
9cb41231
DP
625 @include border-radius($card-border-radius);
626 border: $card-border-width solid $card-border-color;
63e4df60 627}
f4143537 628
63e4df60
DW
629.path-mod-assign [data-region="grade-panel"] .popout {
630 background-color: $modal-content-bg;
631}
f4143537 632
63e4df60
DW
633.path-mod-assign [data-region="grade-panel"] .col-md-3 {
634 width: 100%;
635}
f4143537 636
63e4df60
DW
637.path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
638 @extend .modal-header;
639 font-size: 1.5rem;
640}
f4143537 641
63e4df60
DW
642.path-mod-assign [data-region="grade-panel"] [data-region="popout-button"] {
643 margin-top: 0.5rem;
644}
f4143537 645
63e4df60
DW
646.path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
647 margin-top: 0;
648}
f4143537 649
bffc0ef1
FM
650.path-mod-assign [data-region="grade-panel"] h3 {
651 margin: 10px 0;
652 line-height: 40px;
653}
f4143537 654
bffc0ef1
FM
655.path-mod-assign [data-region="grading-navigation"] {
656 padding: 6px;
657}
f4143537 658
bffc0ef1
FM
659.path-mod-assign [data-region="grade-actions"] {
660 padding: 10px;
661}
f4143537 662
bffc0ef1
FM
663.path-mod-assign [data-region="user-info"] .img-rounded {
664 margin-top: 0;
665}
f4143537 666
bffc0ef1
FM
667.path-mod-assign [data-region="grading-navigation-panel"] {
668 height: 85px;
669}
f4143537 670
bffc0ef1
FM
671.path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
672 width: auto;
673 display: inline-block;
674}
675
676/**
677 * Assign feedback.
678 */
679.assignfeedback_editpdf_widget * {
680 box-sizing: content-box;
681}
f4143537 682
bffc0ef1
FM
683.assignfeedback_editpdf_widget button {
684 box-sizing: border-box;
685}
f4143537 686
bffc0ef1
FM
687.assignfeedback_editpdf_widget .commentcolourbutton img {
688 border-width: 0;
689}
f4143537 690
bffc0ef1
FM
691.assignfeedback_editpdf_widget .label {
692 @extend .tag;
693 @extend .tag-info;
694}
695
696.assignfeedback_editpdf_menu {
697 padding: 0;
698}
63e4df60 699