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