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