weekly release 4.0dev
[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
dd32d65f
JP
12.path-mod {
13 div.activity-information {
14 border-bottom: $border-width solid $table-border-color;
15 padding-top: map-get($spacers, 2);
16 padding-bottom: map-get($spacers, 3);
17 margin-bottom: map-get($spacers, 2);
18 }
19}
20
1d6964dc
TL
21// Choice module
22
23.path-mod-choice {
24 .horizontal .choices .option {
25 display: inline-block;
26 }
27}
28
84197640
LB
29.path-mod-choice {
30 .choices .option label {
31 vertical-align: top;
32 }
33}
34
50302c40
DW
35.path-mod-feedback .feedback_form .col-form-label {
36 display: block !important; /* stylelint-disable-line declaration-no-important */
37}
f25185d7 38
63e4df60 39// Feedback module
ba5c5083
DW
40.path-mod-feedback .itemactions {
41 float: right;
42}
a5d4b548
DW
43.path-mod-feedback .itemhandle {
44 position: absolute;
45 right: 1rem;
46}
ba5c5083 47
536f0460
DW
48// Forum module
49
50.path-mod-forum .forumsearch {
51 input,
52 .helptooltip {
53 margin: 0 3px;
54 }
55}
56
57.path-mod-forum .forumheaderlist,
58.path-mod-forum .forumheaderlist td {
59 border: none;
60}
61
62.path-mod-forum {
63 .forumheaderlist {
64 thead .header,
65 tbody .discussion td {
66 white-space: normal;
67 vertical-align: top;
68 padding-left: 0.5em;
69 padding-right: 0.5em;
70 }
71
72 thead .header {
73 white-space: normal;
74 vertical-align: top;
75 }
76
77 thead .header.replies {
78 text-align: center;
79 }
f4143537 80
536f0460
DW
81 thead .header.lastpost {
82 text-align: right;
83 }
f4143537 84
536f0460 85 thead .header th,
f4143537 86 tbody .discussion td {
536f0460
DW
87 &.discussionsubscription {
88 width: 16px;
89 padding-left: 0.5em;
90 padding-right: 0.5em;
91 }
92 }
f4143537 93
536f0460 94 .discussion {
f4143537
DP
95 .replies,
96 .lastpost {
536f0460
DW
97 white-space: normal;
98 }
f4143537 99
536f0460
DW
100 .discussionsubscription,
101 .replies {
102 text-align: center;
103 }
f4143537 104
536f0460
DW
105 .topic,
106 .discussionsubscription,
107 .topic.starter,
536f0460
DW
108 .replies,
109 .lastpost {
110 vertical-align: top;
111 }
112 }
113 }
01dc1c11 114
33eadfec
DM
115 .discussion-list {
116 .topic {
117 // Do not use the default bold style for the table headings.
118 font-weight: inherit;
119 }
120 }
121
01dc1c11
JP
122 // Style for the forum subscription mode node.
123 .subscriptionmode {
124 color: $body-color;
125 }
126
127 // Style for the currently selected subscription mode.
128 .activesetting {
129 color: $body-color;
130 font-weight: bold;
131 }
536f0460
DW
132}
133
959b996c 134.discussion-settings-container {
49f5b16c
RW
135 .custom-select {
136 width: 100%;
137 }
138
959b996c
JP
139 input {
140 max-width: 100%;
141 }
142}
143
536f0460 144.forumpost {
540ea1bc
BB
145 border: $border-width solid $border-color;
146 display: block;
536f0460 147 padding: 6px;
f4143537 148
536f0460
DW
149 .header {
150 margin-bottom: 3px;
151 }
f4143537 152
536f0460
DW
153 .picture img {
154 margin: 3px;
f4143537 155
536f0460
DW
156 &.userpicture {
157 margin-left: 3px;
158 margin-right: 10px;
159 }
160 }
f4143537 161
536f0460
DW
162 .content {
163 .posting.fullpost {
164 margin-top: 8px;
165 }
166 }
f4143537 167
536f0460 168 .row {
540ea1bc 169 display: block;
536f0460
DW
170 .topic,
171 .content-mask,
172 .options {
173 margin-left: 48px;
174 }
f4143537 175
536f0460
DW
176 &.side {
177 clear: both;
178 }
179 }
180}
181
182.forumpost .row .left {
183 width: 48px;
184}
185
186.forumpost .options .commands {
187 margin-left: 0;
188}
189
190.forumpost .subject {
191 font-weight: bold;
192}
193
194// Override hardcoded forum modules styling
195.forumsearch input[type=text] {
5142f564 196 margin-bottom: 0;
536f0460
DW
197}
198
9aa3a11d
RW
199#page-mod-forum-view {
200 table {
201 .fit-content {
202 width: 1px;
203 white-space: nowrap;
204 }
205
206 .limit-width {
207 max-width: 200px;
208 white-space: nowrap;
209 text-overflow: ellipsis;
210 overflow: hidden;
211
212 .author-info {
213 max-width: calc(100% - 35px - .5rem);
214 }
215 }
216 }
217}
218
536f0460
DW
219#page-mod-forum-discuss .discussioncontrols {
220 width: auto;
221 margin: 0;
7d41ccf0
DW
222
223 .form-inline input {
224 margin-top: -1px;
225 }
536f0460
DW
226}
227
7255378b
RW
228$author-image-width: 70px;
229$author-image-margin: 24px;
230$author-image-width-sm: 30px;
231$author-image-margin-sm: 8px;
232
233/** Gently highlight the selected post by changing it's background to blue and then fading it out. */
234@keyframes background-highlight {
235 from {
236 background-color: rgba(0, 123, 255, 0.5);
237 }
238 to {
239 background-color: inherit;
240 }
241}
242
69848e71 243.path-mod-forum .nested-v2-display-mode,
2602c7bf 244.path-mod-forum.nested-v2-display-mode {
15ecfac4
RW
245 .discussionsubscription {
246 margin-top: 0;
247 text-align: inherit;
248 margin-bottom: 0;
249 }
7255378b 250
15ecfac4
RW
251 .preload-subscribe,
252 .preload-unsubscribe {
253 display: none;
7255378b
RW
254 }
255
256 .post-message {
257 line-height: 1.6;
258 }
259
260 .indent {
261 margin-left: 0;
262 }
263
264 /** Reset the badge styling back to pill style. */
265 .badge {
266 font-size: inherit;
267 font-weight: inherit;
268 padding-left: .5rem;
269 padding-right: .5rem;
270 border-radius: 10rem;
271 }
272
273 .badge-light {
274 background-color: #f6f6f6;
275 color: #5b5b5b;
276 }
277
278 /** Style the ratings like a badge. */
279 .rating-aggregate-container {
280 background-color: #f6f6f6;
281 color: #5b5b5b;
282 padding: .25em .5em;
283 line-height: 1;
284 margin-right: .5rem;
285 vertical-align: middle;
286 border-radius: 10rem;
287 text-align: center;
288 }
289
290 .ratinginput {
291 padding: .25em 1.75rem 0.25em .75em;
292 line-height: 1;
293 height: auto;
294 border-radius: 10rem;
7a2d4f54
RW
295
296 @include media-breakpoint-down(sm) {
297 margin-top: .5rem;
298 }
7255378b
RW
299 }
300
301 .group-image {
302 width: 35px;
303 height: 35px;
304 margin-right: 0;
305 float: none;
306 display: inline-block;
307 }
308
309 /** Don't show the discussion locked alert in this mode because it's already indicated with a badge. */
310 .alert.discussionlocked {
55193f70 311 @include sr-only();
7255378b
RW
312 }
313
314 /** Fix muted text contrast ratios for accessibility. */
315 .text-muted,
316 .dimmed_text {
317 color: #707070 !important; /* stylelint-disable-line declaration-no-important */
318 }
319
320 .author-header {
321 font-style: italic;
322
323 .author-name {
324 font-style: normal;
325 }
326 }
327
328 /** Make the tag list text screen reader visible only */
329 .tag_list > b {
55193f70 330 @include sr-only();
7255378b
RW
331 }
332
333 :target > .focus-target {
334 animation-name: background-highlight;
335 animation-duration: 1s;
336 animation-timing-function: ease-in-out;
337 animation-iteration-count: 1;
338 }
339
340 .forum-post-container {
341 .replies-container {
342 .forum-post-container {
343 border-top: 1px solid #dee2e6;
344 padding-top: 1.5rem;
345
346 .replies-container .forum-post-container {
347 border-top: none;
348 padding-top: 0;
349 }
350 }
351
352 .inline-reply-container .reply-author {
353 display: none;
354 }
355 }
356
357 .post-message p:last-of-type {
358 margin-bottom: 0;
359 }
360
361 .author-image-container {
362 width: $author-image-width;
363 margin-right: $author-image-margin;
364 flex-shrink: 0;
365 }
366
367 .inline-reply-container textarea {
368 border: 0;
369 resize: none;
370 }
371
372 .indent {
373 /**
374 * The first post and first set of replies have a larger author image so offset the 2nd
375 * set of replies by the image width + margin to ensure they align.
376 */
377 .indent {
378 padding-left: $author-image-width + $author-image-margin;
379
380 /**
381 * Reduce the size of the the author image for all second level replies (and below).
382 */
383 .author-image-container {
384 width: $author-image-width-sm;
385 margin-right: $author-image-margin-sm;
7a2d4f54 386 padding-top: (36px - $author-image-width-sm) / 2;
7255378b
RW
387 }
388
389 /**
390 * Adjust the indentation offset for all 3rd level replies and below for the smaller author image.
391 */
392 .indent {
393 padding-left: $author-image-width-sm + $author-image-margin-sm;
394
395 /**
396 * Stop indenting the replies after the 5th reply.
397 */
398 .indent .indent .indent {
399 padding-left: 0;
400 }
401 }
402 }
403 }
404 }
405}
406
407/** Extra small devices (portrait phones, less than 576px). */
408@include media-breakpoint-down(sm) {
2602c7bf 409 #page-mod-forum-discuss.nested-v2-display-mode {
7255378b
RW
410 .forum-post-container {
411 .author-image-container {
412 width: $author-image-width-sm;
413 margin-right: $author-image-margin-sm;
414 }
415
416 .indent {
417 .indent {
418 padding-left: $author-image-width-sm + $author-image-margin-sm;
419
420 .indent .indent {
421 padding-left: 0;
422 }
423 }
424 }
425 }
426
427 .group-image {
428 width: 30px;
429 height: 30px;
430 }
431 }
432}
433
aa4b62ba
MH
434// Make filter popover content scrollable if needed.
435.filter-scrollable {
436 overflow-y: auto;
437 max-height: 25em;
438 margin-bottom: 1em;
439}
440
a9496531
MH
441// Required to fit a date mform into a filter popover.
442.filter-dates-popover {
443 width: 100%;
444 max-width: 41.5em;
445
446 .mform {
447 margin-left: -3em;
448 }
449}
450
46d51c8c
RW
451$grading-drawer-width: 430px !default;
452$grading-animation-duration: .3s !default;
453$grading-icon-button-size: 36px !default;
454$grading-search-button-padding-left: calc(#{map-get($spacers, 2)} + 8px) !default;
455$grading-search-input-padding-left: calc(#{map-get($spacers, 2)} + #{map-get($spacers, 2)} + #{$grading-icon-button-size - ($input-border-width * 2)}) !default; /* stylelint-disable-line max-line-length */
456$grading-search-input-padding-right: calc(#{map-get($spacers, 2)} + #{$grading-icon-button-size}) !default;
4c98e56c 457$grading-nav-bar-active-drawer-button-bottom: calc(#{map-get($spacers, 2) * -1} - 1px) !default;
d9fedf3d 458$grading-content-show-content-button-padding-left: calc(#{map-get($spacers, 2) * 2} + 45px) !default;
46d51c8c
RW
459
460@keyframes expandSearchButton {
461 from {
462 height: $grading-icon-button-size;
463 width: $grading-icon-button-size;
464 border-radius: $grading-icon-button-size / 2;
465 background-color: $gray-200;
466 }
467 to {
468 width: 100%;
469 height: $input-height-lg;
470 border-radius: 0;
471 background-color: $input-bg;
472 border-color: $input-border-color;
473 padding-left: $grading-search-button-padding-left;
474 padding-top: $input-padding-y-lg;
475 padding-bottom: $input-padding-y-lg;
476 @include font-size($input-font-size-lg);
477 line-height: $input-line-height-lg;
478 right: 0;
479 }
480}
481
482@keyframes collapseSearchButton {
483 from {
484 width: 100%;
485 height: $input-height-lg;
486 border-radius: 0;
487 background-color: $input-bg;
488 border-color: $input-border-color;
489 padding-left: $grading-search-button-padding-left;
490 padding-top: $input-padding-y-lg;
491 padding-bottom: $input-padding-y-lg;
492 @include font-size($input-font-size-lg);
493 line-height: $input-line-height-lg;
494 right: 0;
495 }
496 to {
497 height: $grading-icon-button-size;
498 width: $grading-icon-button-size;
499 border-radius: $grading-icon-button-size / 2;
500 background-color: $gray-200;
501 }
502}
503
504.path-mod-forum .unified-grader {
0489e9ce
BB
505 @include media-breakpoint-up(xs) {
506 .navbar {
507 max-height: none;
508 z-index: 1;
509 }
4c98e56c
RW
510 }
511
8404c2b1 512 .body-container {
0489e9ce 513 overflow: auto;
8404c2b1
RW
514 &.hidden {
515 display: none !important; /* stylelint-disable-line declaration-no-important */
516 }
517 }
518
519 .userpicture {
520 height: 60px;
521 width: 60px;
522 }
523
46d51c8c 524 .grader-grading-panel {
46d51c8c 525 top: 0;
0489e9ce 526 position: absolute;
46d51c8c
RW
527 height: 100%;
528 z-index: 0;
529 width: $grading-drawer-width;
530
531 &.hidden {
532 right: ($grading-drawer-width * -1);
533 }
534
535 .grading-icon {
536 width: $grading-icon-button-size;
537 }
538
539 .user-picker-container {
46d51c8c
RW
540 .user-full-name {
541 max-width: 240px;
542 }
543
544 .page-link {
545 width: $grading-icon-button-size;
546 height: $grading-icon-button-size;
547 display: flex;
548 text-align: center;
549 align-items: center;
550 justify-content: center;
551 }
552 }
553
554 .header-container {
555 height: 65px;
556 position: relative;
557 overflow: hidden;
558
559 .info-container {
560 position: absolute;
561 top: 50%;
562 left: 0;
563 transform: translateY(-50%);
564 width: 100%;
565 height: 100%;
566 padding: map-get($spacers, 2);
567 padding-right: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)});
568 opacity: 1;
569 visibility: visible;
570 transition: left $grading-animation-duration ease-in-out;
571 z-index: 1;
572 }
573
8404c2b1
RW
574 .toggle-search-button {
575 &.expand {
576 animation-name: expandSearchButton;
577 animation-duration: $grading-animation-duration;
578 animation-timing-function: ease-in-out;
579 }
580
581 &.collapse {
582 display: block;
583 animation-name: collapseSearchButton;
584 animation-duration: $grading-animation-duration;
585 }
586 }
587
46d51c8c
RW
588 .user-search-container {
589 overflow: hidden;
590 position: absolute;
591 top: 50%;
592 right: 0;
593 transform: translateY(-50%);
594 z-index: 2;
595 width: 100%;
596 height: 100% !important; /* stylelint-disable-line declaration-no-important */
597 padding: map-get($spacers, 2);
598
599 .search-input-container {
600 position: relative;
601 overflow: visible;
602 flex-wrap: nowrap;
603
604 input {
605 padding-left: $grading-search-input-padding-left;
606 padding-right: $grading-search-input-padding-right;
8404c2b1
RW
607 opacity: 1;
608 visibility: visible;
609 transition:
610 opacity 0s linear $grading-animation-duration,
611 visibility 0s linear;
46d51c8c
RW
612 }
613
614 .search-icon {
615 position: absolute;
616 top: 50%;
617 left: map-get($spacers, 2);
618 transform: translateY(-50%);
619 color: $input-color;
620 height: $grading-icon-button-size;
621 width: $grading-icon-button-size - ($input-border-width * 2);
622 background-color: $input-bg;
46d51c8c
RW
623 opacity: 1;
624 visibility: visible;
625 transition:
626 opacity 0s linear $grading-animation-duration,
627 visibility 0s linear $grading-animation-duration;
628 }
629
630 .toggle-search-button {
631 position: absolute;
632 top: 50%;
633 right: map-get($spacers, 2);
634 transform: translateY(-50%);
635 z-index: 1;
636 color: inherit;
637 text-align: left;
638 padding-left: 9px;
46d51c8c
RW
639 transition: right 0s linear $grading-animation-duration;
640
641 .expanded-icon {
642 opacity: 1;
8404c2b1 643 visibility: visible;
46d51c8c
RW
644 max-width: 50px;
645 max-height: 50px;
646 transition:
647 opacity 0s linear $grading-animation-duration,
648 max-height 0s linear $grading-animation-duration,
8404c2b1
RW
649 max-width 0s linear $grading-animation-duration,
650 visibility 0s linear $grading-animation-duration;
46d51c8c
RW
651 }
652
653 .collapsed-icon {
654 opacity: 0;
8404c2b1 655 visibility: hidden;
46d51c8c
RW
656 max-height: 0;
657 max-width: 0;
658 overflow: hidden;
659 transition:
660 opacity 0s linear $grading-animation-duration,
661 max-height 0s linear $grading-animation-duration,
8404c2b1
RW
662 max-width 0s linear $grading-animation-duration,
663 visibility 0s linear $grading-animation-duration;
46d51c8c
RW
664 }
665 }
666 }
667
8404c2b1 668 &.collapsed {
46d51c8c
RW
669 width: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)} + #{map-get($spacers, 2)});
670 transition: width $grading-animation-duration ease-in-out;
671
672 .search-input-container {
673 flex-wrap: nowrap;
674
675 input,
676 .search-icon {
677 opacity: 0;
678 visibility: hidden;
679 transition:
680 opacity 0s linear,
681 visibility 0s linear;
682 }
683
684 input {
685 padding-left: 0;
686 padding-right: 0;
687 }
688
689 .toggle-search-button {
46d51c8c
RW
690 .expanded-icon {
691 opacity: 0;
8404c2b1 692 visibility: hidden;
46d51c8c
RW
693 max-height: 0;
694 max-width: 0;
695 overflow: hidden;
696 transition:
697 opacity 0s linear,
698 max-height 0s linear,
8404c2b1
RW
699 max-width 0s linear,
700 visibility 0s linear;
46d51c8c
RW
701 }
702
703 .collapsed-icon {
704 opacity: 1;
8404c2b1 705 visibility: visible;
46d51c8c
RW
706 max-width: 50px;
707 max-height: 50px;
708 transition:
709 opacity 0s linear,
710 max-height 0s linear,
8404c2b1
RW
711 max-width 0s linear,
712 visibility 0s linear;
46d51c8c
RW
713 }
714 }
715 }
716 }
717 }
718
8404c2b1 719 .user-search-container:not(.collapsed) + .info-container {
46d51c8c
RW
720 opacity: 0;
721 visibility: hidden;
722 left: calc(100% * -1);
723 transition:
724 left $grading-animation-duration ease-in-out,
725 opacity 0s linear $grading-animation-duration,
726 visibility 0s linear $grading-animation-duration,
727 padding 0s linear $grading-animation-duration;
728 }
729 }
730 }
731
732 .grader-module-content {
733 overflow-y: auto;
734 margin-right: $grading-drawer-width;
735 @include transition(margin-right .2s ease-in-out);
736 }
737
4c98e56c
RW
738 .drawer-button {
739 position: relative;
740
741 &.active::after {
742 content: "";
743 position: absolute;
744 bottom: $grading-nav-bar-active-drawer-button-bottom;
745 left: 0;
746 width: 100%;
747 height: 3px;
748 background-color: map-get($theme-colors, 'primary');
749 }
750
751 .icon {
752 font-size: 20px;
753 height: 20px;
754 width: 20px;
755 }
756 }
d9fedf3d
RW
757
758 .grader-module-content-display {
759 .discussion-container {
760 &:last-of-type {
761 > hr {
762 display: none;
763 }
764 }
765
766 .posts-container {
767 &:last-of-type {
768 > hr {
769 display: none;
770 }
771 }
772
773 .parent-container {
774 position: relative;
775
776 .show-content-button {
777 position: absolute;
778 height: 100%;
779 width: 100%;
780 left: 0;
781 top: 0;
782 padding-left: $grading-content-show-content-button-padding-left;
783 text-align: left;
784 z-index: 1;
785
786 &:not(.collapsed) {
787 display: none;
788 }
789 }
790
791 .content {
792 display: block;
793 height: auto !important; /* stylelint-disable-line declaration-no-important */
794
795 .header {
796 transition: margin-bottom $grading-animation-duration ease-in-out;
797
798 div + div {
799 opacity: 1;
800 visibility: visible;
801 max-height: none;
802 transition:
803 opacity $grading-animation-duration linear,
804 visibility 0s linear;
805 }
806 }
69848e71 807
d9fedf3d
RW
808 .body-content-container {
809 opacity: 1;
810 visibility: visible;
811 max-height: none;
812 transition:
813 opacity $grading-animation-duration linear,
814 visibility 0s linear;
815 }
69848e71
RW
816
817 .forum-post-core {
818 opacity: 1;
819 visibility: visible;
820 max-height: none;
821 transition:
822 opacity $grading-animation-duration linear,
823 visibility 0s linear;
824 }
d9fedf3d
RW
825 }
826
827 .show-content-button.collapsed + .content {
828 opacity: .3;
829
830 .header {
831 margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
832
833 div + div {
834 opacity: 0;
835 visibility: hidden;
836 max-height: 0;
837 }
838 }
69848e71 839
d9fedf3d
RW
840 .body-content-container {
841 opacity: 0;
842 visibility: hidden;
843 max-height: 0;
844 }
69848e71
RW
845
846 .forum-post-core {
847 opacity: 0;
848 visibility: hidden;
849 max-height: 0;
850 }
d9fedf3d
RW
851 }
852
853 .show-content-button.collapsed:hover + .content,
854 .show-content-button.collapsed:focus + .content {
855 opacity: 1;
856 }
857 }
858 }
859 }
860
861 .no-post-container {
862 .icon {
863 height: 250px;
864 width: 250px;
865 margin-right: 0;
866 }
867 }
69848e71
RW
868
869 .nested-v2-display-mode {
870 .discussion-container {
871 .posts-container {
872 .parent-container {
873 .show-content-button {
874 padding-left: $author-image-width + $author-image-margin;
875 }
876 }
877 }
878 }
879 }
d9fedf3d 880 }
8404c2b1
RW
881
882 .no-search-results-container {
883 .icon {
884 height: 250px;
885 width: 250px;
886 margin-right: 0;
887 }
888 }
69848e71
RW
889
890 .nested-v2-display-mode {
891 .view-context-button {
892 margin-left: $author-image-width + $author-image-margin;
893 border-radius: $border-radius-lg;
894 }
895
896 .parent-container {
897 .author-image-container {
898 position: relative;
899
900 &:after {
901 position: absolute;
902 top: calc(#{$author-image-width} + #{map-get($spacers, 2)});
903 content: "";
904 background-color: $gray-200;
905 width: 2px;
906 height: calc(100% - #{$author-image-width} + #{map-get($spacers, 2)});
907 }
908 }
909 }
910
911 .parent-container + .post-container {
912 .author-image-container {
913 img {
914 width: $author-image-width-sm !important; /* stylelint-disable-line declaration-no-important */
915 }
916 }
917 }
918 }
919}
920
921.path-mod-forum .unified-grader .nested-v2-display-mode,
922.path-mod-forum .modal .nested-v2-display-mode {
923 .post-subject {
924 display: none;
925 }
46d51c8c
RW
926}
927
928@include media-breakpoint-down(xs) {
929 .path-mod-forum .unified-grader {
930 .grader-grading-panel {
931 width: 100%;
0489e9ce
BB
932 position: fixed;
933 height: calc(100vh - 50px);
934 overflow: scroll;
935 top: 50px;
936 }
937 .body-container {
938 overflow: visible;
46d51c8c
RW
939 }
940 }
941}
942
7255378b
RW
943// End styling for mod_forum.
944
f4143537
DP
945.maincalendar .calendarmonth td,
946.maincalendar .calendarmonth th {
536f0460
DW
947 border: 1px dotted $table-border-color;
948}
949
950.path-grade-report-grader h1 {
951 text-align: inherit;
952}
953
954#page-mod-chat-gui_basic input#message {
955 max-width: 100%;
956}
957
958#page-mod-data-view #singleimage {
959 width: auto;
960}
961
962.path-mod-data form {
963 margin-top: 10px;
964}
965
966.template_heading {
967 margin-top: 10px;
968}
969
970.breadcrumb-button {
536f0460
DW
971 margin-top: 4px;
972}
973
974.breadcrumb-button .singlebutton {
975 float: left;
976 margin-left: 4px;
977}
978
536f0460
DW
979.langmenu form {
980 margin: 0;
981}
536f0460
DW
982// contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
983canvas {
984 -ms-touch-action: auto;
985}
986
987div#dock {
988 display: none;
989}
990
991// Choice module
992
536f0460
DW
993// Lesson module
994
63e4df60 995/** General styles (scope: all of lesson) **/
f4143537
DP
996.path-mod-lesson .invisiblefieldset.fieldsetfix {
997 display: block;
998}
83b9a7c8
MG
999.path-mod-lesson .answeroption .checkbox label p {
1000 display: inline;
1001}
526491f2
BB
1002.path-mod-lesson .form-inline label.form-check-label {
1003 display: inline-block;
1004}
1deead46
BB
1005.path-mod-lesson .slideshow {
1006 overflow: auto;
1007 padding: 15px;
1008}
473391b6
MG
1009#page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
1010 white-space: normal;
1011}
9004441b
LB
1012#page-mod-lesson-view {
1013 .vertical .singlebutton {
1014 display: block;
1015 + .singlebutton {
1016 margin-left: 0;
1017 margin-top: 1rem;
1018 }
1019 }
7fed7636
MG
1020 .fitem .felement .custom-select {
1021 align-self: flex-start;
1022 }
9004441b 1023}
526491f2
BB
1024.path-mod-lesson .generaltable td {
1025 vertical-align: middle;
1026 label {
1027 margin-bottom: 0;
1028 }
1029 .highlight {
1030 display: inline-block;
1031 margin-left: 0.25rem;
1032 }
1033 input[type="checkbox"] {
1034 display: block;
1035 }
1036}
536f0460
DW
1037
1038.path-mod-wiki .wiki_headingtitle,
1039.path-mod-wiki .midpad,
1040.path-mod-wiki .wiki_headingtime {
1041 text-align: inherit;
1042}
1043
1044.path-mod-wiki .wiki_contentbox {
1045 width: 100%;
1046}
1047
536f0460
DW
1048// Survey module
1049
1050.path-mod-survey {
1051 .surveytable {
f4143537
DP
1052 > tbody > tr:nth-of-type(odd) {
1053 background-color: $table-bg;
1054 }
1055
1056 > tbody > tr:nth-of-type(even) {
4394f9e3 1057 background-color: $table-accent-bg;
f4143537
DP
1058 }
1059
1060 .rblock label {
1061 text-align: center;
1062 }
536f0460 1063 }
f4143537 1064
536f0460
DW
1065}
1066
1067.nav .caret {
1068 margin-left: 4px;
1069}
1070
1071// Dividers
1072.nav {
1073 .divider {
1074 overflow: hidden;
1075 width: 0;
536f0460
DW
1076 }
1077}
536f0460
DW
1078
1079// Usermenu
1080.usermenu {
1081 .login {
5f18da12 1082 line-height: 2.25rem;
536f0460 1083 }
3313fdd6 1084}
f4143537 1085
7001a3b2 1086.userloggedinas,
45cd101f
SL
1087.userswitchedrole,
1088.loginfailures {
536f0460 1089 .usermenu {
7001a3b2
FM
1090 .usertext {
1091 float: left;
1092 text-align: right;
1093 margin-right: $spacer / 2;
1094 height: 35px;
1095 .meta {
536f0460 1096 display: block;
7001a3b2 1097 font-size: $font-size-sm;
536f0460 1098 }
7001a3b2
FM
1099 }
1100 .avatar {
1101 img {
fde35b8f 1102 margin: 0;
536f0460 1103 }
536f0460
DW
1104 }
1105 }
1106}
1107
7001a3b2
FM
1108.userloggedinas .usermenu {
1109 .userbutton .avatars {
1110 position: relative;
1111 display: inline-block;
1112 .avatar {
1113 &.current {
1114 display: inline-block;
1115 position: absolute;
1116 bottom: 0;
1117 right: 0;
1118 width: 20px;
1119 height: 20px;
1120 border-radius: 50%;
1121 img {
1122 vertical-align: baseline;
1123 }
536f0460 1124 }
7001a3b2
FM
1125 img {
1126 width: inherit;
1127 height: inherit;
536f0460
DW
1128 }
1129 }
7001a3b2
FM
1130 .realuser {
1131 width: 35px;
1132 height: 35px;
1133 display: inline-block;
536f0460
DW
1134 }
1135 }
1136}
1137
7001a3b2
FM
1138@include media-breakpoint-down(sm) {
1139 .usertext {
1140 display: none;
536f0460
DW
1141 }
1142}
1143
1144// Quiz module
12d6dfc1
DW
1145.path-mod-quiz .mod-quiz-edit-content {
1146 // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
1147 margin-bottom: 10rem;
1148}
1149
1150#page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
1151#page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
1152 width: auto;
a3893e1b 1153 max-width: none;
12d6dfc1
DW
1154}
1155#page-mod-quiz-mod #id_reviewoptionshdr .form-group {
1156 float: left;
1157 width: 20rem;
1158 display: inline-block;
e283c6ca 1159 min-height: 12rem;
12d6dfc1
DW
1160}
1161
1162#page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
1163 line-height: 1.5;
1164 vertical-align: bottom;
1165}
1166#page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
1167 float: left;
1168 clear: left;
1169}
e283c6ca 1170#page-mod-quiz-mod #id_reviewoptionshdr .form-check {
3dcfb904 1171 width: auto;
12d6dfc1 1172 height: 22px;
a3893e1b 1173 justify-content: flex-start;
12d6dfc1 1174}
536f0460 1175
3dcfb904
HN
1176#page-mod-quiz-mod #id_reviewoptionshdr .review_option_item {
1177 width: 90%;
1178 height: 22px;
1179}
1180
536f0460
DW
1181// Question navigation block.
1182.path-mod-quiz #mod_quiz_navblock {
1183 .qnbutton {
1184 text-decoration: none;
1185 font-size: 14px;
1186 line-height: 20px;
1187 font-weight: normal;
12d6dfc1 1188 background-color: $card-bg;
536f0460
DW
1189 background-image: none;
1190 height: 40px;
1191 width: 30px;
1192 border-radius: 3px;
1193 border: 0;
1194 overflow: visible;
1195 margin: 0 6px 6px 0;
1196 }
f4143537 1197
536f0460
DW
1198 span.qnbutton {
1199 cursor: default;
4394f9e3
BB
1200 background-color: $input-disabled-bg;
1201 color: $gray-700;
536f0460 1202 }
f4143537 1203
536f0460
DW
1204 a.qnbutton:hover,
1205 a.qnbutton:active,
1206 a.qnbutton:focus {
1207 text-decoration: underline;
1208 }
1209
1210 .qnbutton .thispageholder {
1211 border: 1px solid;
1212 border-radius: 3px;
1213 z-index: 1;
1214 }
f4143537 1215
536f0460
DW
1216 .qnbutton.thispage .thispageholder {
1217 border-width: 3px;
1218 }
f4143537 1219
536f0460
DW
1220 .allquestionsononepage .qnbutton.thispage .thispageholder {
1221 border-width: 1px;
1222 }
1223
1224 .qnbutton.flagged .thispageholder {
fde35b8f 1225 background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
536f0460
DW
1226 }
1227
1228 .qnbutton .trafficlight {
1229 border: 0;
12d6dfc1 1230 background: $card-bg none center / 10px no-repeat scroll;
536f0460
DW
1231 height: 20px;
1232 margin-top: 20px;
1233 border-radius: 0 0 3px 3px;
1234 }
1235
1236 .qnbutton.notyetanswered .trafficlight,
1237 .qnbutton.invalidanswer .trafficlight {
12d6dfc1 1238 background-color: $card-bg;
536f0460 1239 }
f4143537 1240
536f0460
DW
1241 .qnbutton.invalidanswer .trafficlight {
1242 background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
1243 }
f4143537 1244
536f0460
DW
1245 .qnbutton.correct .trafficlight {
1246 background-image: url([[pix:theme|mod/quiz/checkmark]]);
4394f9e3 1247 background-color: $success;
536f0460 1248 }
f4143537 1249
536f0460
DW
1250 .qnbutton.blocked .trafficlight {
1251 background-image: url([[pix:core|t/locked]]);
4394f9e3 1252 background-color: $input-disabled-bg;
536f0460 1253 }
f4143537 1254
536f0460
DW
1255 .qnbutton.notanswered .trafficlight,
1256 .qnbutton.incorrect .trafficlight {
4394f9e3 1257 background-color: $danger;
536f0460 1258 }
f4143537 1259
536f0460
DW
1260 .qnbutton.partiallycorrect .trafficlight {
1261 background-image: url([[pix:theme|mod/quiz/whitecircle]]);
4394f9e3 1262 background-color: $warning;
536f0460 1263 }
f4143537 1264
536f0460
DW
1265 .qnbutton.complete .trafficlight,
1266 .qnbutton.answersaved .trafficlight,
1267 .qnbutton.requiresgrading .trafficlight {
4394f9e3 1268 background-color: $gray-600;
536f0460
DW
1269 }
1270}
bffc0ef1 1271
3bf57241
SL
1272#page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
1273 height: 1.4em;
1274 vertical-align: middle;
1275}
21a5c3c4 1276
10acff4a
BB
1277#page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
1278 padding: 0;
1279 margin: 0 0.4em;
1280}
1281
d9107267
BB
1282/* Countdown timer. */
1283#page-mod-quiz-attempt #region-main {
1284 overflow-x: inherit;
1285}
1286
1287#quiz-timer-wrapper {
1288 display: none;
1289 position: sticky;
1290 justify-content: end;
1291 top: $navbar-height + 5px;
d64def4d 1292 z-index: $zindex-sticky;
d9107267
BB
1293 #quiz-timer {
1294 border: $border-width solid $red;
1295 background-color: $white;
1296 }
1297}
1298.pagelayout-embedded #quiz-timer-wrapper {
1299 top: 5px;
1300}
1301
1302@for $i from 0 through 16 {
1303 #quiz-timer-wrapper #quiz-timer.timeleft#{$i} {
1304 $bg: lighten($red, ($i * 3%));
1305 background-color: $bg;
1306 color: color-yiq($bg);
1307 }
1308}
1309
21a5c3c4 1310// Assign.
bffc0ef1
FM
1311.path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
1312 top: auto;
1313}
f4143537 1314
21a5c3c4
DW
1315// This section removes the responsiveness from the form in the grading panel
1316$popout-header-font-size: 1.5 * $font-size-base;
1317// This can't be calculated from modal-title-padding because we are mixing px and rem units.
1318$popout-header-height: 4rem;
f4143537 1319
21a5c3c4
DW
1320.path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
1321 height: calc(100% - #{$popout-header-height});
1322}
1323
1324.path-mod-assign [data-region="grade-panel"] {
1325 padding-top: $spacer;
1326}
1327.path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
1328.path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
1329 width: 100%;
1330 padding: 0;
3ec69c2e
BB
1331 max-width: 100%;
1332 flex: none;
21a5c3c4
DW
1333}
1334.path-mod-assign [data-region="grade-panel"] fieldset,
1335.path-mod-assign [data-region="grade-panel"] .fitem.row {
1336 margin: 0;
1337}
1338
21a5c3c4
DW
1339.path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
1340 width: 100%;
63e4df60 1341}
f4143537 1342
21a5c3c4
DW
1343.path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
1344 width: auto;
1345}
1346
1347// Now styles for the popout sections.
1348
63e4df60
DW
1349.path-mod-assign [data-region="grade-panel"] .popout {
1350 background-color: $modal-content-bg;
1351}
f4143537 1352
21a5c3c4
DW
1353.path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
1354 background-color: $card-bg;
1355 @include border-radius($card-border-radius);
1356 border: $card-border-width solid $card-border-color;
1357 padding: $card-spacer-x;
1358 margin-bottom: $spacer;
1359}
1360.path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
1361 border-bottom: $hr-border-width solid $hr-border-color;
1362 margin-bottom: $spacer;
63e4df60 1363}
f4143537 1364
21a5c3c4 1365
63e4df60 1366.path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
55193f70
BB
1367 display: flex;
1368 align-items: flex-start;
1369 justify-content: space-between;
21a5c3c4 1370 font-size: $popout-header-font-size;
63e4df60 1371}
f4143537 1372
63e4df60
DW
1373.path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
1374 margin-top: 0;
1375}
f4143537 1376
21a5c3c4 1377// Now style the fixed header elements.
f4143537 1378
ba5c5083
DW
1379.path-mod-assign [data-region="assignment-info"] {
1380 overflow-y: hidden;
1381}
1382
bffc0ef1
FM
1383.path-mod-assign [data-region="grading-navigation"] {
1384 padding: 6px;
1385}
f4143537 1386
bffc0ef1
FM
1387.path-mod-assign [data-region="grade-actions"] {
1388 padding: 10px;
1389}
f4143537 1390
bffc0ef1
FM
1391.path-mod-assign [data-region="user-info"] .img-rounded {
1392 margin-top: 0;
1393}
f4143537 1394
bffc0ef1
FM
1395.path-mod-assign [data-region="grading-navigation-panel"] {
1396 height: 85px;
1397}
f4143537 1398
21a5c3c4
DW
1399@media (max-width: 767px) {
1400 .path-mod-assign [data-region="grading-navigation-panel"] {
1401 height: auto;
1402 }
1403 .path-mod-assign [data-region="user-info"] {
1404 margin-top: 1rem;
1405 }
1406}
1407
bffc0ef1
FM
1408.path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
1409 width: auto;
1410 display: inline-block;
1411}
1412
1413/**
1414 * Assign feedback.
1415 */
1416.assignfeedback_editpdf_widget * {
1417 box-sizing: content-box;
1418}
f4143537 1419
bffc0ef1
FM
1420.assignfeedback_editpdf_widget button {
1421 box-sizing: border-box;
1422}
f4143537 1423
bffc0ef1
FM
1424.assignfeedback_editpdf_widget .commentcolourbutton img {
1425 border-width: 0;
1426}
f4143537 1427
bffc0ef1 1428.assignfeedback_editpdf_widget .label {
55193f70
BB
1429 position: relative;
1430 padding: $alert-padding-y $alert-padding-x;
1431 margin-bottom: $alert-margin-bottom;
1432 border: $alert-border-width solid transparent;
1433 @include border-radius($alert-border-radius);
1434 @include alert-variant(theme-color-level('info', $alert-bg-level), theme-color-level('info', $alert-border-level), theme-color-level('info', $alert-color-level)); /* stylelint-disable-line max-line-length */
bffc0ef1
FM
1435}
1436
1437.assignfeedback_editpdf_menu {
1438 padding: 0;
1439}
63e4df60 1440
a5112298
DW
1441.path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
1442 float: none;
1443}
1444.path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
1445 width: 100%;
1446}
1447.path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
1448 padding-left: $spacer;
1449 padding-right: $spacer;
1450}
1451.path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
1452.path-mod-assign [data-region="grade-panel"] .showstudentdesc {
1453 background-color: $card-bg;
1454}
3d979f96
FM
1455
1456/**
1457 * Mod LTI.
1458 */
1459.path-admin-mod-lti {
1460 .btn .loader img,
1461 #tool-list-loader-container .loader img {
1462 height: auto;
1463 }
1464}