MDL-66893 mod_forum: update user content region 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;
435 $grading-content-show-content-button-padding-left: calc(#{map-get($spacers, 2) * 2} + 45px) !default;
437 @keyframes expandSearchButton {
438     from {
439         height: $grading-icon-button-size;
440         width: $grading-icon-button-size;
441         border-radius: $grading-icon-button-size / 2;
442         background-color: $gray-200;
443     }
444     to {
445         width: 100%;
446         height: $input-height-lg;
447         border-radius: 0;
448         background-color: $input-bg;
449         border-color: $input-border-color;
450         padding-left: $grading-search-button-padding-left;
451         padding-top: $input-padding-y-lg;
452         padding-bottom: $input-padding-y-lg;
453         @include font-size($input-font-size-lg);
454         line-height: $input-line-height-lg;
455         right: 0;
456     }
459 @keyframes collapseSearchButton {
460     from {
461         width: 100%;
462         height: $input-height-lg;
463         border-radius: 0;
464         background-color: $input-bg;
465         border-color: $input-border-color;
466         padding-left: $grading-search-button-padding-left;
467         padding-top: $input-padding-y-lg;
468         padding-bottom: $input-padding-y-lg;
469         @include font-size($input-font-size-lg);
470         line-height: $input-line-height-lg;
471         right: 0;
472     }
473     to {
474         height: $grading-icon-button-size;
475         width: $grading-icon-button-size;
476         border-radius: $grading-icon-button-size / 2;
477         background-color: $gray-200;
478     }
481 .path-mod-forum .unified-grader {
482     .navbar {
483         max-height: none;
484         z-index: 1;
485     }
487     .grader-grading-panel {
488         position: absolute;
489         top: 0;
490         height: 100%;
491         z-index: 0;
492         width: $grading-drawer-width;
494         &.hidden {
495             right: ($grading-drawer-width * -1);
496         }
498         .grading-icon {
499             width: $grading-icon-button-size;
500         }
502         .user-picker-container {
503             .userpicture {
504                 height: 60px;
505                 width: 60px;
506             }
508             .user-full-name {
509                 max-width: 240px;
510             }
512             .page-link {
513                 width: $grading-icon-button-size;
514                 height: $grading-icon-button-size;
515                 display: flex;
516                 text-align: center;
517                 align-items: center;
518                 justify-content: center;
519             }
520         }
522         .header-container {
523             height: 65px;
524             position: relative;
525             overflow: hidden;
527             .info-container {
528                 position: absolute;
529                 top: 50%;
530                 left: 0;
531                 transform: translateY(-50%);
532                 width: 100%;
533                 height: 100%;
534                 padding: map-get($spacers, 2);
535                 padding-right: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)});
536                 opacity: 1;
537                 visibility: visible;
538                 transition: left $grading-animation-duration ease-in-out;
539                 z-index: 1;
540             }
542             .user-search-container {
543                 overflow: hidden;
544                 position: absolute;
545                 top: 50%;
546                 right: 0;
547                 transform: translateY(-50%);
548                 z-index: 2;
549                 width: 100%;
550                 height: 100% !important; /* stylelint-disable-line declaration-no-important */
551                 padding: map-get($spacers, 2);
553                 .search-input-container {
554                     position: relative;
555                     overflow: visible;
556                     flex-wrap: nowrap;
558                     input {
559                         padding-left: $grading-search-input-padding-left;
560                         padding-right: $grading-search-input-padding-right;
561                         transition: $custom-forms-transition;
562                     }
564                     .search-icon {
565                         position: absolute;
566                         top: 50%;
567                         left: map-get($spacers, 2);
568                         transform: translateY(-50%);
569                         color: $input-color;
570                         height: $grading-icon-button-size;
571                         width: $grading-icon-button-size - ($input-border-width * 2);
572                         background-color: $input-bg;
573                     }
575                     input,
576                     .search-icon {
577                         opacity: 1;
578                         visibility: visible;
579                         transition:
580                             opacity 0s linear $grading-animation-duration,
581                             visibility 0s linear $grading-animation-duration;
582                     }
584                     .toggle-search-button {
585                         position: absolute;
586                         top: 50%;
587                         right: map-get($spacers, 2);
588                         transform: translateY(-50%);
589                         z-index: 1;
590                         color: inherit;
591                         text-align: left;
592                         padding-left: 9px;
593                         animation-name: expandSearchButton;
594                         animation-duration: $grading-animation-duration;
595                         animation-timing-function: ease-in-out;
596                         transition: right 0s linear $grading-animation-duration;
598                         .expanded-icon {
599                             opacity: 1;
600                             max-width: 50px;
601                             max-height: 50px;
602                             transition:
603                                 opacity 0s linear $grading-animation-duration,
604                                 max-height 0s linear $grading-animation-duration,
605                                 max-width 0s linear $grading-animation-duration;
606                         }
608                         .collapsed-icon {
609                             opacity: 0;
610                             max-height: 0;
611                             max-width: 0;
612                             overflow: hidden;
613                             transition:
614                                 opacity 0s linear $grading-animation-duration,
615                                 max-height 0s linear $grading-animation-duration,
616                                 max-width 0s linear $grading-animation-duration;
617                         }
618                     }
619                 }
621                 &.collapse:not(.show) {
622                     width: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)} + #{map-get($spacers, 2)});
623                     transition: width $grading-animation-duration ease-in-out;
625                     .search-input-container {
626                         flex-wrap: nowrap;
628                         input,
629                         .search-icon {
630                             opacity: 0;
631                             visibility: hidden;
632                             transition:
633                                 opacity 0s linear,
634                                 visibility 0s linear;
635                         }
637                         input {
638                             padding-left: 0;
639                             padding-right: 0;
640                         }
642                         .toggle-search-button {
643                             animation-name: collapseSearchButton;
644                             animation-duration: $grading-animation-duration;
646                             .expanded-icon {
647                                 opacity: 0;
648                                 max-height: 0;
649                                 max-width: 0;
650                                 overflow: hidden;
651                                 transition:
652                                     opacity 0s linear,
653                                     max-height 0s linear,
654                                     max-width 0s linear;
655                             }
657                             .collapsed-icon {
658                                 opacity: 1;
659                                 max-width: 50px;
660                                 max-height: 50px;
661                                 transition:
662                                     opacity 0s linear,
663                                     max-height 0s linear,
664                                     max-width 0s linear;
665                             }
666                         }
667                     }
668                 }
669             }
671             .user-search-container.show + .info-container,
672             .user-search-container.collapsing + .info-container {
673                 opacity: 0;
674                 visibility: hidden;
675                 left: calc(100% * -1);
676                 transition:
677                     left $grading-animation-duration ease-in-out,
678                     opacity 0s linear $grading-animation-duration,
679                     visibility 0s linear $grading-animation-duration,
680                     padding 0s linear $grading-animation-duration;
681             }
682         }
683     }
685     .grader-module-content {
686         overflow-y: auto;
687         margin-right: $grading-drawer-width;
688         @include transition(margin-right .2s ease-in-out);
689     }
691     .grader-grading-panel.hidden + .grader-module-content {
692         margin-right: 0;
693     }
695     .drawer-button {
696         position: relative;
698         &.active::after {
699             content: "";
700             position: absolute;
701             bottom: $grading-nav-bar-active-drawer-button-bottom;
702             left: 0;
703             width: 100%;
704             height: 3px;
705             background-color: map-get($theme-colors, 'primary');
706         }
708         .icon {
709             font-size: 20px;
710             height: 20px;
711             width: 20px;
712         }
713     }
715     .grader-module-content-display {
716         .discussion-container {
717             &:last-of-type {
718                 > hr {
719                     display: none;
720                 }
721             }
723             .posts-container {
724                 &:last-of-type {
725                     > hr {
726                         display: none;
727                     }
728                 }
730                 .parent-container {
731                     position: relative;
733                     .show-content-button {
734                         position: absolute;
735                         height: 100%;
736                         width: 100%;
737                         left: 0;
738                         top: 0;
739                         padding-left: $grading-content-show-content-button-padding-left;
740                         text-align: left;
741                         z-index: 1;
743                         &:not(.collapsed) {
744                             display: none;
745                         }
746                     }
748                     .content {
749                         display: block;
750                         height: auto !important; /* stylelint-disable-line declaration-no-important */
752                         .header {
753                             transition: margin-bottom $grading-animation-duration ease-in-out;
755                             div + div {
756                                 opacity: 1;
757                                 visibility: visible;
758                                 max-height: none;
759                                 transition:
760                                     opacity $grading-animation-duration linear,
761                                     visibility 0s linear;
762                             }
763                         }
764                         .body-content-container {
765                             opacity: 1;
766                             visibility: visible;
767                             max-height: none;
768                             transition:
769                                 opacity $grading-animation-duration linear,
770                                 visibility 0s linear;
771                         }
772                     }
774                     .show-content-button.collapsed + .content {
775                         opacity: .3;
777                         .header {
778                             margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
780                             div + div {
781                                 opacity: 0;
782                                 visibility: hidden;
783                                 max-height: 0;
784                             }
785                         }
786                         .body-content-container {
787                             opacity: 0;
788                             visibility: hidden;
789                             max-height: 0;
790                         }
791                     }
793                     .show-content-button.collapsed:hover + .content,
794                     .show-content-button.collapsed:focus + .content {
795                         opacity: 1;
796                     }
797                 }
798             }
799         }
801         .no-post-container {
802             .icon {
803                 height: 250px;
804                 width: 250px;
805                 margin-right: 0;
806             }
807         }
808     }
811 @include media-breakpoint-down(xs) {
812     .path-mod-forum .unified-grader {
813         .grader-grading-panel {
814             width: 100%;
815         }
816     }
819 // End styling for mod_forum.
821 .maincalendar .calendarmonth td,
822 .maincalendar .calendarmonth th {
823     border: 1px dotted $table-border-color;
826 .path-grade-report-grader h1 {
827     text-align: inherit;
830 #page-mod-chat-gui_basic input#message {
831     max-width: 100%;
834 #page-mod-data-view #singleimage {
835     width: auto;
838 .path-mod-data form {
839     margin-top: 10px;
842 .template_heading {
843     margin-top: 10px;
846 .breadcrumb-button {
847     margin-top: 4px;
850 .breadcrumb-button .singlebutton {
851     float: left;
852     margin-left: 4px;
855 .ie .row-fluid .desktop-first-column {
856     margin-left: 0;
859 .langmenu form {
860     margin: 0;
862 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
863 canvas {
864     -ms-touch-action: auto;
867 div#dock {
868     display: none;
871 // Choice module
873 // Lesson module
875 /** General styles (scope: all of lesson) **/
876 .path-mod-lesson .invisiblefieldset.fieldsetfix {
877     display: block;
879 .path-mod-lesson .answeroption .checkbox label p {
880     display: inline;
882 .path-mod-lesson .form-inline label.form-check-label {
883     display: inline-block;
885 .path-mod-lesson .slideshow {
886     overflow: auto;
887     padding: 15px;
889 #page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
890     white-space: normal;
892 #page-mod-lesson-view {
893     .vertical .singlebutton {
894         display: block;
895         + .singlebutton {
896             margin-left: 0;
897             margin-top: 1rem;
898         }
899     }
900     .fitem .felement .custom-select {
901         align-self: flex-start;
902     }
904 .path-mod-lesson .generaltable td {
905     vertical-align: middle;
906     label {
907         margin-bottom: 0;
908     }
909     .highlight {
910         display: inline-block;
911         margin-left: 0.25rem;
912     }
913     input[type="checkbox"] {
914         display: block;
915     }
918 .path-mod-wiki .wiki_headingtitle,
919 .path-mod-wiki .midpad,
920 .path-mod-wiki .wiki_headingtime {
921     text-align: inherit;
924 .path-mod-wiki .wiki_contentbox {
925     width: 100%;
928 // Survey module
930 .path-mod-survey {
931     .surveytable {
932         > tbody > tr:nth-of-type(odd) {
933             background-color: $table-bg;
934         }
936         > tbody > tr:nth-of-type(even) {
937             background-color: $table-bg-accent;
938         }
940         .rblock label {
941             text-align: center;
942         }
943     }
947 .nav .caret {
948     margin-left: 4px;
951 // Dividers
952 .nav {
953     .divider {
954         overflow: hidden;
955         width: 0;
956     }
959 // Usermenu
960 .usermenu {
961     .login {
962         line-height: 2.25rem;
964         a {
965             color: $link-color;
966             &:hover,
967             &:focus {
968                 color: $link-hover-color;
969                 text-decoration: underline;
970             }
971         }
972     }
975 .userloggedinas,
976 .userswitchedrole,
977 .loginfailures {
978     .usermenu {
979         .usertext {
980             float: left;
981             text-align: right;
982             margin-right: $spacer / 2;
983             height: 35px;
984             .meta {
985                 display: block;
986                 font-size: $font-size-sm;
987             }
988         }
989         .avatar {
990             img {
991                 margin: 0;
992             }
993         }
994     }
997 .userloggedinas .usermenu {
998     .userbutton .avatars {
999         position: relative;
1000         display: inline-block;
1001         .avatar {
1002             &.current {
1003                 display: inline-block;
1004                 position: absolute;
1005                 bottom: 0;
1006                 right: 0;
1007                 width: 20px;
1008                 height: 20px;
1009                 border-radius: 50%;
1010                 img {
1011                     vertical-align: baseline;
1012                 }
1013             }
1014             img {
1015                 width: inherit;
1016                 height: inherit;
1017             }
1018         }
1019         .realuser {
1020             width: 35px;
1021             height: 35px;
1022             display: inline-block;
1023         }
1024     }
1027 @include media-breakpoint-down(sm) {
1028     .usertext {
1029         display: none;
1030     }
1033 // Quiz module
1034 .path-mod-quiz .mod-quiz-edit-content {
1035     // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
1036     margin-bottom: 10rem;
1039 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
1040 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
1041     width: auto;
1042     max-width: none;
1044 #page-mod-quiz-mod #id_reviewoptionshdr .form-group {
1045     float: left;
1046     width: 20rem;
1047     display: inline-block;
1048     min-height: 12rem;
1051 #page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
1052     line-height: 1.5;
1053     vertical-align: bottom;
1055 #page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
1056     float: left;
1057     clear: left;
1059 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
1060     width: 90%;
1061     height: 22px;
1062     justify-content: flex-start;
1065 // Question navigation block.
1066 .path-mod-quiz #mod_quiz_navblock {
1067     .qnbutton {
1068         text-decoration: none;
1069         font-size: 14px;
1070         line-height: 20px;
1071         font-weight: normal;
1072         background-color: $card-bg;
1073         background-image: none;
1074         height: 40px;
1075         width: 30px;
1076         border-radius: 3px;
1077         border: 0;
1078         overflow: visible;
1079         margin: 0 6px 6px 0;
1080     }
1082     span.qnbutton {
1083         cursor: default;
1084         background-color: $input-bg-disabled;
1085         color: $gray;
1086     }
1088     a.qnbutton:hover,
1089     a.qnbutton:active,
1090     a.qnbutton:focus {
1091         text-decoration: underline;
1092     }
1094     .qnbutton .thispageholder {
1095         border: 1px solid;
1096         border-radius: 3px;
1097         z-index: 1;
1098     }
1100     .qnbutton.thispage .thispageholder {
1101         border-width: 3px;
1102     }
1104     .allquestionsononepage .qnbutton.thispage .thispageholder {
1105         border-width: 1px;
1106     }
1108     .qnbutton.flagged .thispageholder {
1109         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
1110     }
1112     .qnbutton .trafficlight {
1113         border: 0;
1114         background: $card-bg none center / 10px no-repeat scroll;
1115         height: 20px;
1116         margin-top: 20px;
1117         border-radius: 0 0 3px 3px;
1118     }
1120     .qnbutton.notyetanswered .trafficlight,
1121     .qnbutton.invalidanswer .trafficlight {
1122         background-color: $card-bg;
1123     }
1125     .qnbutton.invalidanswer .trafficlight {
1126         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
1127     }
1129     .qnbutton.correct .trafficlight {
1130         background-image: url([[pix:theme|mod/quiz/checkmark]]);
1131         background-color: $state-success-text;
1132     }
1134     .qnbutton.blocked .trafficlight {
1135         background-image: url([[pix:core|t/locked]]);
1136         background-color: $input-bg-disabled;
1137     }
1139     .qnbutton.notanswered .trafficlight,
1140     .qnbutton.incorrect .trafficlight {
1141         background-color: $state-danger-text;
1142     }
1144     .qnbutton.partiallycorrect .trafficlight {
1145         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
1146         background-color: $state-warning-text;
1147     }
1149     .qnbutton.complete .trafficlight,
1150     .qnbutton.answersaved .trafficlight,
1151     .qnbutton.requiresgrading .trafficlight {
1152         background-color: $gray-light;
1153     }
1156 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
1157     height: 1.4em;
1158     vertical-align: middle;
1161 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
1162     padding: 0;
1163     margin: 0 0.4em;
1166 // Assign.
1167 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
1168     top: auto;
1171 // This section removes the responsiveness from the form in the grading panel
1172 $popout-header-font-size: 1.5 * $font-size-base;
1173 // This can't be calculated from modal-title-padding because we are mixing px and rem units.
1174 $popout-header-height: 4rem;
1176 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
1177     height: calc(100% - #{$popout-header-height});
1180 .path-mod-assign [data-region="grade-panel"] {
1181     padding-top: $spacer;
1183 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
1184 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
1185     width: 100%;
1186     padding: 0;
1187     max-width: 100%;
1188     flex: none;
1190 .path-mod-assign [data-region="grade-panel"] fieldset,
1191 .path-mod-assign [data-region="grade-panel"] .fitem.row {
1192     margin: 0;
1195 .path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
1196     width: 100%;
1199 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
1200     width: auto;
1203 // Now styles for the popout sections.
1205 .path-mod-assign [data-region="grade-panel"] .popout {
1206     background-color: $modal-content-bg;
1209 .path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
1210     background-color: $card-bg;
1211     @include border-radius($card-border-radius);
1212     border: $card-border-width solid $card-border-color;
1213     padding: $card-spacer-x;
1214     margin-bottom: $spacer;
1216 .path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
1217     border-bottom: $hr-border-width solid $hr-border-color;
1218     margin-bottom: $spacer;
1222 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
1223     @extend .modal-header;
1224     font-size: $popout-header-font-size;
1227 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
1228     margin-top: 0;
1231 // Now style the fixed header elements.
1233 .path-mod-assign [data-region="assignment-info"] {
1234     overflow-y: hidden;
1237 .path-mod-assign [data-region="grading-navigation"] {
1238     padding: 6px;
1241 .path-mod-assign [data-region="grade-actions"] {
1242     padding: 10px;
1245 .path-mod-assign [data-region="user-info"] .img-rounded {
1246     margin-top: 0;
1249 .path-mod-assign [data-region="grading-navigation-panel"] {
1250     height: 85px;
1253 @media (max-width: 767px) {
1254     .path-mod-assign [data-region="grading-navigation-panel"] {
1255         height: auto;
1256     }
1257     .path-mod-assign [data-region="user-info"] {
1258         margin-top: 1rem;
1259     }
1262 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
1263     width: auto;
1264     display: inline-block;
1267 /**
1268  * Assign feedback.
1269  */
1270 .assignfeedback_editpdf_widget * {
1271     box-sizing: content-box;
1274 .assignfeedback_editpdf_widget button {
1275     box-sizing: border-box;
1278 .assignfeedback_editpdf_widget .commentcolourbutton img {
1279     border-width: 0;
1282 .assignfeedback_editpdf_widget .label {
1283     @extend .alert;
1284     @extend .alert-info;
1287 .assignfeedback_editpdf_menu {
1288     padding: 0;
1291 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
1292     float: none;
1294 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
1295     width: 100%;
1297 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
1298     padding-left: $spacer;
1299     padding-right: $spacer;
1301 .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
1302 .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
1303     background-color: $card-bg;
1306 /**
1307  * Mod LTI.
1308  */
1309 .path-admin-mod-lti {
1310     .btn .loader img,
1311     #tool-list-loader-container .loader img {
1312         height: auto;
1313     }