MDL-66893 mod_forum: update navigation bar in grader UI
[moodle.git] / theme / boost / scss / moodle / modules.scss
1 /* modules.less */
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
8 select {
9     width: auto;
10 }
12 // Choice module
14 .path-mod-choice {
15     .horizontal .choices .option {
16         display: inline-block;
17     }
18 }
20 .path-mod-feedback .feedback_form .col-form-label {
21     display: block !important; /* stylelint-disable-line declaration-no-important */
22 }
24 // Feedback module
25 .path-mod-feedback .itemactions {
26     float: right;
27 }
28 .path-mod-feedback .itemhandle {
29     position: absolute;
30     right: 1rem;
31 }
33 // Forum module
35 .path-mod-forum .forumsearch {
36     input,
37     .helptooltip {
38         margin: 0 3px;
39     }
40 }
42 .path-mod-forum .forumheaderlist,
43 .path-mod-forum .forumheaderlist td {
44     border: none;
45 }
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         }
57         thead .header {
58             white-space: normal;
59             vertical-align: top;
60         }
62         thead .header.replies {
63             text-align: center;
64         }
66         thead .header.lastpost {
67             text-align: right;
68         }
70         thead .header th,
71         tbody .discussion td {
72             &.discussionsubscription {
73                 width: 16px;
74                 padding-left: 0.5em;
75                 padding-right: 0.5em;
76             }
77         }
79         .discussion {
80             .replies,
81             .lastpost {
82                 white-space: normal;
83             }
85             .discussionsubscription,
86             .replies {
87                 text-align: center;
88             }
90             .topic,
91             .discussionsubscription,
92             .topic.starter,
93             .replies,
94             .lastpost {
95                 vertical-align: top;
96             }
97         }
98     }
100     // Style for the forum subscription mode node.
101     .subscriptionmode {
102         color: $body-color;
103     }
105     // Style for the currently selected subscription mode.
106     .activesetting {
107         color: $body-color;
108         font-weight: bold;
109     }
112 .discussion-settings-container {
113     .custom-select {
114         width: 100%;
115     }
117     input {
118         max-width: 100%;
119     }
122 .forumpost {
123     border: $border-width solid $border-color;
124     display: block;
125     padding: 6px;
127     .header {
128         margin-bottom: 3px;
129     }
131     .picture img {
132         margin: 3px;
134         &.userpicture {
135             margin-left: 3px;
136             margin-right: 10px;
137         }
138     }
140     .content {
141         .posting.fullpost {
142             margin-top: 8px;
143         }
144     }
146     .row {
147         display: block;
148         .topic,
149         .content-mask,
150         .options {
151             margin-left: 48px;
152         }
154         &.side {
155             clear: both;
156         }
157     }
160 .forumpost .row .left {
161     width: 48px;
164 .forumpost .options .commands {
165     margin-left: 0;
168 .forumpost .subject {
169     font-weight: bold;
172 // Override hardcoded forum modules styling
173 .forumsearch input[type=text] {
174     margin-bottom: 0;
177 #page-mod-forum-view {
178     table {
179         .fit-content {
180             width: 1px;
181             white-space: nowrap;
182         }
184         .limit-width {
185             max-width: 200px;
186             white-space: nowrap;
187             text-overflow: ellipsis;
188             overflow: hidden;
190             .author-info {
191                 max-width: calc(100% - 35px - .5rem);
192             }
193         }
194     }
197 #page-mod-forum-discuss .discussioncontrols {
198     width: auto;
199     margin: 0;
201     .form-inline input {
202         margin-top: -1px;
203     }
206 $author-image-width: 70px;
207 $author-image-margin: 24px;
208 $author-image-width-sm: 30px;
209 $author-image-margin-sm: 8px;
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     }
221 .path-mod-forum.nested-v2-display-mode {
222     .discussionsubscription {
223         margin-top: 0;
224         text-align: inherit;
225         margin-bottom: 0;
226     }
228     .preload-subscribe,
229     .preload-unsubscribe {
230         display: none;
231     }
233     .post-message {
234         line-height: 1.6;
235     }
237     .indent {
238         margin-left: 0;
239     }
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     }
250     .badge-light {
251         background-color: #f6f6f6;
252         color: #5b5b5b;
253     }
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     }
267     .ratinginput {
268         padding: .25em 1.75rem 0.25em .75em;
269         line-height: 1;
270         height: auto;
271         border-radius: 10rem;
273         @include media-breakpoint-down(sm) {
274             margin-top: .5rem;
275         }
276     }
278     .group-image {
279         width: 35px;
280         height: 35px;
281         margin-right: 0;
282         float: none;
283         display: inline-block;
284     }
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     }
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     }
297     .author-header {
298         font-style: italic;
300         .author-name {
301             font-style: normal;
302         }
303     }
305     /** Make the tag list text screen reader visible only */
306     .tag_list > b {
307         @extend .sr-only;
308     }
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     }
317     .forum-post-container {
318         .replies-container {
319             .forum-post-container {
320                 border-top: 1px solid #dee2e6;
321                 padding-top: 1.5rem;
323                 .replies-container .forum-post-container {
324                     border-top: none;
325                     padding-top: 0;
326                 }
327             }
329             .inline-reply-container .reply-author {
330                 display: none;
331             }
332         }
334         .post-message p:last-of-type {
335             margin-bottom: 0;
336         }
338         .author-image-container {
339             width: $author-image-width;
340             margin-right: $author-image-margin;
341             flex-shrink: 0;
342         }
344         .inline-reply-container textarea {
345             border: 0;
346             resize: none;
347         }
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;
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;
363                     padding-top: (36px - $author-image-width-sm) / 2;
364                 }
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;
372                     /**
373                      * Stop indenting the replies after the 5th reply.
374                      */
375                     .indent .indent .indent {
376                         padding-left: 0;
377                     }
378                 }
379             }
380         }
381     }
384 /** Extra small devices (portrait phones, less than 576px). */
385 @include media-breakpoint-down(sm) {
386     #page-mod-forum-discuss.nested-v2-display-mode {
387         .forum-post-container {
388             .author-image-container {
389                 width: $author-image-width-sm;
390                 margin-right: $author-image-margin-sm;
391             }
393             .indent {
394                 .indent {
395                     padding-left: $author-image-width-sm + $author-image-margin-sm;
397                     .indent .indent {
398                         padding-left: 0;
399                     }
400                 }
401             }
402         }
404         .group-image {
405             width: 30px;
406             height: 30px;
407         }
408     }
411 // Make filter popover content scrollable if needed.
412 .filter-scrollable {
413     overflow-y: auto;
414     max-height: 25em;
415     margin-bottom: 1em;
418 // Required to fit a date mform into a filter popover.
419 .filter-dates-popover {
420     width: 100%;
421     max-width: 41.5em;
423     .mform {
424         margin-left: -3em;
425     }
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;
434 $grading-nav-bar-active-drawer-button-bottom: calc(#{map-get($spacers, 2) * -1} - 1px) !default;
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     }
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     }
480 .path-mod-forum .unified-grader {
481     .navbar {
482         max-height: none;
483         z-index: 1;
484     }
486     .grader-grading-panel {
487         position: absolute;
488         top: 0;
489         height: 100%;
490         z-index: 0;
491         width: $grading-drawer-width;
493         &.hidden {
494             right: ($grading-drawer-width * -1);
495         }
497         .grading-icon {
498             width: $grading-icon-button-size;
499         }
501         .user-picker-container {
502             .userpicture {
503                 height: 60px;
504                 width: 60px;
505             }
507             .user-full-name {
508                 max-width: 240px;
509             }
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         }
521         .header-container {
522             height: 65px;
523             position: relative;
524             overflow: hidden;
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             }
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);
552                 .search-input-container {
553                     position: relative;
554                     overflow: visible;
555                     flex-wrap: nowrap;
557                     input {
558                         padding-left: $grading-search-input-padding-left;
559                         padding-right: $grading-search-input-padding-right;
560                         transition: $custom-forms-transition;
561                     }
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                     }
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                     }
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;
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                         }
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                 }
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;
624                     .search-input-container {
625                         flex-wrap: nowrap;
627                         input,
628                         .search-icon {
629                             opacity: 0;
630                             visibility: hidden;
631                             transition:
632                                 opacity 0s linear,
633                                 visibility 0s linear;
634                         }
636                         input {
637                             padding-left: 0;
638                             padding-right: 0;
639                         }
641                         .toggle-search-button {
642                             animation-name: collapseSearchButton;
643                             animation-duration: $grading-animation-duration;
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                             }
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             }
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     }
684     .grader-module-content {
685         overflow-y: auto;
686         margin-right: $grading-drawer-width;
687         @include transition(margin-right .2s ease-in-out);
688     }
690     .grader-grading-panel.hidden + .grader-module-content {
691         margin-right: 0;
692     }
694     .drawer-button {
695         position: relative;
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         }
707         .icon {
708             font-size: 20px;
709             height: 20px;
710             width: 20px;
711         }
712     }
715 @include media-breakpoint-down(xs) {
716     .path-mod-forum .unified-grader {
717         .grader-grading-panel {
718             width: 100%;
719         }
720     }
723 // End styling for mod_forum.
725 .maincalendar .calendarmonth td,
726 .maincalendar .calendarmonth th {
727     border: 1px dotted $table-border-color;
730 .path-grade-report-grader h1 {
731     text-align: inherit;
734 #page-mod-chat-gui_basic input#message {
735     max-width: 100%;
738 #page-mod-data-view #singleimage {
739     width: auto;
742 .path-mod-data form {
743     margin-top: 10px;
746 .template_heading {
747     margin-top: 10px;
750 .breadcrumb-button {
751     margin-top: 4px;
754 .breadcrumb-button .singlebutton {
755     float: left;
756     margin-left: 4px;
759 .ie .row-fluid .desktop-first-column {
760     margin-left: 0;
763 .langmenu form {
764     margin: 0;
766 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
767 canvas {
768     -ms-touch-action: auto;
771 div#dock {
772     display: none;
775 // Choice module
777 // Lesson module
779 /** General styles (scope: all of lesson) **/
780 .path-mod-lesson .invisiblefieldset.fieldsetfix {
781     display: block;
783 .path-mod-lesson .answeroption .checkbox label p {
784     display: inline;
786 .path-mod-lesson .form-inline label.form-check-label {
787     display: inline-block;
789 .path-mod-lesson .slideshow {
790     overflow: auto;
791     padding: 15px;
793 #page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
794     white-space: normal;
796 #page-mod-lesson-view {
797     .vertical .singlebutton {
798         display: block;
799         + .singlebutton {
800             margin-left: 0;
801             margin-top: 1rem;
802         }
803     }
804     .fitem .felement .custom-select {
805         align-self: flex-start;
806     }
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     }
822 .path-mod-wiki .wiki_headingtitle,
823 .path-mod-wiki .midpad,
824 .path-mod-wiki .wiki_headingtime {
825     text-align: inherit;
828 .path-mod-wiki .wiki_contentbox {
829     width: 100%;
832 // Survey module
834 .path-mod-survey {
835     .surveytable {
836         > tbody > tr:nth-of-type(odd) {
837             background-color: $table-bg;
838         }
840         > tbody > tr:nth-of-type(even) {
841             background-color: $table-bg-accent;
842         }
844         .rblock label {
845             text-align: center;
846         }
847     }
851 .nav .caret {
852     margin-left: 4px;
855 // Dividers
856 .nav {
857     .divider {
858         overflow: hidden;
859         width: 0;
860     }
863 // Usermenu
864 .usermenu {
865     .login {
866         line-height: 2.25rem;
868         a {
869             color: $link-color;
870             &:hover,
871             &:focus {
872                 color: $link-hover-color;
873                 text-decoration: underline;
874             }
875         }
876     }
879 .userloggedinas,
880 .userswitchedrole,
881 .loginfailures {
882     .usermenu {
883         .usertext {
884             float: left;
885             text-align: right;
886             margin-right: $spacer / 2;
887             height: 35px;
888             .meta {
889                 display: block;
890                 font-size: $font-size-sm;
891             }
892         }
893         .avatar {
894             img {
895                 margin: 0;
896             }
897         }
898     }
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                 }
917             }
918             img {
919                 width: inherit;
920                 height: inherit;
921             }
922         }
923         .realuser {
924             width: 35px;
925             height: 35px;
926             display: inline-block;
927         }
928     }
931 @include media-breakpoint-down(sm) {
932     .usertext {
933         display: none;
934     }
937 // Quiz module
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;
943 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
944 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
945     width: auto;
946     max-width: none;
948 #page-mod-quiz-mod #id_reviewoptionshdr .form-group {
949     float: left;
950     width: 20rem;
951     display: inline-block;
952     min-height: 12rem;
955 #page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
956     line-height: 1.5;
957     vertical-align: bottom;
959 #page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
960     float: left;
961     clear: left;
963 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
964     width: 90%;
965     height: 22px;
966     justify-content: flex-start;
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;
976         background-color: $card-bg;
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     }
986     span.qnbutton {
987         cursor: default;
988         background-color: $input-bg-disabled;
989         color: $gray;
990     }
992     a.qnbutton:hover,
993     a.qnbutton:active,
994     a.qnbutton:focus {
995         text-decoration: underline;
996     }
998     .qnbutton .thispageholder {
999         border: 1px solid;
1000         border-radius: 3px;
1001         z-index: 1;
1002     }
1004     .qnbutton.thispage .thispageholder {
1005         border-width: 3px;
1006     }
1008     .allquestionsononepage .qnbutton.thispage .thispageholder {
1009         border-width: 1px;
1010     }
1012     .qnbutton.flagged .thispageholder {
1013         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
1014     }
1016     .qnbutton .trafficlight {
1017         border: 0;
1018         background: $card-bg none center / 10px no-repeat scroll;
1019         height: 20px;
1020         margin-top: 20px;
1021         border-radius: 0 0 3px 3px;
1022     }
1024     .qnbutton.notyetanswered .trafficlight,
1025     .qnbutton.invalidanswer .trafficlight {
1026         background-color: $card-bg;
1027     }
1029     .qnbutton.invalidanswer .trafficlight {
1030         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
1031     }
1033     .qnbutton.correct .trafficlight {
1034         background-image: url([[pix:theme|mod/quiz/checkmark]]);
1035         background-color: $state-success-text;
1036     }
1038     .qnbutton.blocked .trafficlight {
1039         background-image: url([[pix:core|t/locked]]);
1040         background-color: $input-bg-disabled;
1041     }
1043     .qnbutton.notanswered .trafficlight,
1044     .qnbutton.incorrect .trafficlight {
1045         background-color: $state-danger-text;
1046     }
1048     .qnbutton.partiallycorrect .trafficlight {
1049         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
1050         background-color: $state-warning-text;
1051     }
1053     .qnbutton.complete .trafficlight,
1054     .qnbutton.answersaved .trafficlight,
1055     .qnbutton.requiresgrading .trafficlight {
1056         background-color: $gray-light;
1057     }
1060 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
1061     height: 1.4em;
1062     vertical-align: middle;
1065 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
1066     padding: 0;
1067     margin: 0 0.4em;
1070 // Assign.
1071 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
1072     top: auto;
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;
1080 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
1081     height: calc(100% - #{$popout-header-height});
1084 .path-mod-assign [data-region="grade-panel"] {
1085     padding-top: $spacer;
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;
1091     max-width: 100%;
1092     flex: none;
1094 .path-mod-assign [data-region="grade-panel"] fieldset,
1095 .path-mod-assign [data-region="grade-panel"] .fitem.row {
1096     margin: 0;
1099 .path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
1100     width: 100%;
1103 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
1104     width: auto;
1107 // Now styles for the popout sections.
1109 .path-mod-assign [data-region="grade-panel"] .popout {
1110     background-color: $modal-content-bg;
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;
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;
1126 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
1127     @extend .modal-header;
1128     font-size: $popout-header-font-size;
1131 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
1132     margin-top: 0;
1135 // Now style the fixed header elements.
1137 .path-mod-assign [data-region="assignment-info"] {
1138     overflow-y: hidden;
1141 .path-mod-assign [data-region="grading-navigation"] {
1142     padding: 6px;
1145 .path-mod-assign [data-region="grade-actions"] {
1146     padding: 10px;
1149 .path-mod-assign [data-region="user-info"] .img-rounded {
1150     margin-top: 0;
1153 .path-mod-assign [data-region="grading-navigation-panel"] {
1154     height: 85px;
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     }
1166 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
1167     width: auto;
1168     display: inline-block;
1171 /**
1172  * Assign feedback.
1173  */
1174 .assignfeedback_editpdf_widget * {
1175     box-sizing: content-box;
1178 .assignfeedback_editpdf_widget button {
1179     box-sizing: border-box;
1182 .assignfeedback_editpdf_widget .commentcolourbutton img {
1183     border-width: 0;
1186 .assignfeedback_editpdf_widget .label {
1187     @extend .alert;
1188     @extend .alert-info;
1191 .assignfeedback_editpdf_menu {
1192     padding: 0;
1195 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
1196     float: none;
1198 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
1199     width: 100%;
1201 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
1202     padding-left: $spacer;
1203     padding-right: $spacer;
1205 .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
1206 .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
1207     background-color: $card-bg;
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     }