MDL-69111 mod_forum: forum grading on small viewports
[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     .discussion-list {
101         .topic {
102             // Do not use the default bold style for the table headings.
103             font-weight: inherit;
104         }
105     }
107     // Style for the forum subscription mode node.
108     .subscriptionmode {
109         color: $body-color;
110     }
112     // Style for the currently selected subscription mode.
113     .activesetting {
114         color: $body-color;
115         font-weight: bold;
116     }
119 .discussion-settings-container {
120     .custom-select {
121         width: 100%;
122     }
124     input {
125         max-width: 100%;
126     }
129 .forumpost {
130     border: $border-width solid $border-color;
131     display: block;
132     padding: 6px;
134     .header {
135         margin-bottom: 3px;
136     }
138     .picture img {
139         margin: 3px;
141         &.userpicture {
142             margin-left: 3px;
143             margin-right: 10px;
144         }
145     }
147     .content {
148         .posting.fullpost {
149             margin-top: 8px;
150         }
151     }
153     .row {
154         display: block;
155         .topic,
156         .content-mask,
157         .options {
158             margin-left: 48px;
159         }
161         &.side {
162             clear: both;
163         }
164     }
167 .forumpost .row .left {
168     width: 48px;
171 .forumpost .options .commands {
172     margin-left: 0;
175 .forumpost .subject {
176     font-weight: bold;
179 // Override hardcoded forum modules styling
180 .forumsearch input[type=text] {
181     margin-bottom: 0;
184 #page-mod-forum-view {
185     table {
186         .fit-content {
187             width: 1px;
188             white-space: nowrap;
189         }
191         .limit-width {
192             max-width: 200px;
193             white-space: nowrap;
194             text-overflow: ellipsis;
195             overflow: hidden;
197             .author-info {
198                 max-width: calc(100% - 35px - .5rem);
199             }
200         }
201     }
204 #page-mod-forum-discuss .discussioncontrols {
205     width: auto;
206     margin: 0;
208     .form-inline input {
209         margin-top: -1px;
210     }
213 $author-image-width: 70px;
214 $author-image-margin: 24px;
215 $author-image-width-sm: 30px;
216 $author-image-margin-sm: 8px;
218 /** Gently highlight the selected post by changing it's background to blue and then fading it out. */
219 @keyframes background-highlight {
220     from {
221         background-color: rgba(0, 123, 255, 0.5);
222     }
223     to {
224         background-color: inherit;
225     }
228 .path-mod-forum .nested-v2-display-mode,
229 .path-mod-forum.nested-v2-display-mode {
230     .discussionsubscription {
231         margin-top: 0;
232         text-align: inherit;
233         margin-bottom: 0;
234     }
236     .preload-subscribe,
237     .preload-unsubscribe {
238         display: none;
239     }
241     .post-message {
242         line-height: 1.6;
243     }
245     .indent {
246         margin-left: 0;
247     }
249     /** Reset the badge styling back to pill style. */
250     .badge {
251         font-size: inherit;
252         font-weight: inherit;
253         padding-left: .5rem;
254         padding-right: .5rem;
255         border-radius: 10rem;
256     }
258     .badge-light {
259         background-color: #f6f6f6;
260         color: #5b5b5b;
261     }
263     /** Style the ratings like a badge. */
264     .rating-aggregate-container {
265         background-color: #f6f6f6;
266         color: #5b5b5b;
267         padding: .25em .5em;
268         line-height: 1;
269         margin-right: .5rem;
270         vertical-align: middle;
271         border-radius: 10rem;
272         text-align: center;
273     }
275     .ratinginput {
276         padding: .25em 1.75rem 0.25em .75em;
277         line-height: 1;
278         height: auto;
279         border-radius: 10rem;
281         @include media-breakpoint-down(sm) {
282             margin-top: .5rem;
283         }
284     }
286     .group-image {
287         width: 35px;
288         height: 35px;
289         margin-right: 0;
290         float: none;
291         display: inline-block;
292     }
294     /** Don't show the discussion locked alert in this mode because it's already indicated with a badge. */
295     .alert.discussionlocked {
296         @include sr-only();
297     }
299     /** Fix muted text contrast ratios for accessibility. */
300     .text-muted,
301     .dimmed_text {
302         color: #707070 !important; /* stylelint-disable-line declaration-no-important */
303     }
305     .author-header {
306         font-style: italic;
308         .author-name {
309             font-style: normal;
310         }
311     }
313     /** Make the tag list text screen reader visible only */
314     .tag_list > b {
315         @include sr-only();
316     }
318     :target > .focus-target {
319         animation-name: background-highlight;
320         animation-duration: 1s;
321         animation-timing-function: ease-in-out;
322         animation-iteration-count: 1;
323     }
325     .forum-post-container {
326         .replies-container {
327             .forum-post-container {
328                 border-top: 1px solid #dee2e6;
329                 padding-top: 1.5rem;
331                 .replies-container .forum-post-container {
332                     border-top: none;
333                     padding-top: 0;
334                 }
335             }
337             .inline-reply-container .reply-author {
338                 display: none;
339             }
340         }
342         .post-message p:last-of-type {
343             margin-bottom: 0;
344         }
346         .author-image-container {
347             width: $author-image-width;
348             margin-right: $author-image-margin;
349             flex-shrink: 0;
350         }
352         .inline-reply-container textarea {
353             border: 0;
354             resize: none;
355         }
357         .indent {
358             /**
359              * The first post and first set of replies have a larger author image so offset the 2nd
360              * set of replies by the image width + margin to ensure they align.
361              */
362             .indent {
363                 padding-left: $author-image-width + $author-image-margin;
365                 /**
366                  * Reduce the size of the the author image for all second level replies (and below).
367                  */
368                 .author-image-container {
369                     width: $author-image-width-sm;
370                     margin-right: $author-image-margin-sm;
371                     padding-top: (36px - $author-image-width-sm) / 2;
372                 }
374                 /**
375                  * Adjust the indentation offset for all 3rd level replies and below for the smaller author image.
376                  */
377                 .indent {
378                     padding-left: $author-image-width-sm + $author-image-margin-sm;
380                     /**
381                      * Stop indenting the replies after the 5th reply.
382                      */
383                     .indent .indent .indent {
384                         padding-left: 0;
385                     }
386                 }
387             }
388         }
389     }
392 /** Extra small devices (portrait phones, less than 576px). */
393 @include media-breakpoint-down(sm) {
394     #page-mod-forum-discuss.nested-v2-display-mode {
395         .forum-post-container {
396             .author-image-container {
397                 width: $author-image-width-sm;
398                 margin-right: $author-image-margin-sm;
399             }
401             .indent {
402                 .indent {
403                     padding-left: $author-image-width-sm + $author-image-margin-sm;
405                     .indent .indent {
406                         padding-left: 0;
407                     }
408                 }
409             }
410         }
412         .group-image {
413             width: 30px;
414             height: 30px;
415         }
416     }
419 // Make filter popover content scrollable if needed.
420 .filter-scrollable {
421     overflow-y: auto;
422     max-height: 25em;
423     margin-bottom: 1em;
426 // Required to fit a date mform into a filter popover.
427 .filter-dates-popover {
428     width: 100%;
429     max-width: 41.5em;
431     .mform {
432         margin-left: -3em;
433     }
436 $grading-drawer-width: 430px !default;
437 $grading-animation-duration: .3s !default;
438 $grading-icon-button-size: 36px !default;
439 $grading-search-button-padding-left: calc(#{map-get($spacers, 2)} + 8px) !default;
440 $grading-search-input-padding-left: calc(#{map-get($spacers, 2)} + #{map-get($spacers, 2)} + #{$grading-icon-button-size - ($input-border-width * 2)}) !default; /* stylelint-disable-line max-line-length */
441 $grading-search-input-padding-right: calc(#{map-get($spacers, 2)} + #{$grading-icon-button-size}) !default;
442 $grading-nav-bar-active-drawer-button-bottom: calc(#{map-get($spacers, 2) * -1} - 1px) !default;
443 $grading-content-show-content-button-padding-left: calc(#{map-get($spacers, 2) * 2} + 45px) !default;
445 @keyframes expandSearchButton {
446     from {
447         height: $grading-icon-button-size;
448         width: $grading-icon-button-size;
449         border-radius: $grading-icon-button-size / 2;
450         background-color: $gray-200;
451     }
452     to {
453         width: 100%;
454         height: $input-height-lg;
455         border-radius: 0;
456         background-color: $input-bg;
457         border-color: $input-border-color;
458         padding-left: $grading-search-button-padding-left;
459         padding-top: $input-padding-y-lg;
460         padding-bottom: $input-padding-y-lg;
461         @include font-size($input-font-size-lg);
462         line-height: $input-line-height-lg;
463         right: 0;
464     }
467 @keyframes collapseSearchButton {
468     from {
469         width: 100%;
470         height: $input-height-lg;
471         border-radius: 0;
472         background-color: $input-bg;
473         border-color: $input-border-color;
474         padding-left: $grading-search-button-padding-left;
475         padding-top: $input-padding-y-lg;
476         padding-bottom: $input-padding-y-lg;
477         @include font-size($input-font-size-lg);
478         line-height: $input-line-height-lg;
479         right: 0;
480     }
481     to {
482         height: $grading-icon-button-size;
483         width: $grading-icon-button-size;
484         border-radius: $grading-icon-button-size / 2;
485         background-color: $gray-200;
486     }
489 .path-mod-forum .unified-grader {
490     @include media-breakpoint-up(xs) {
491         .navbar {
492             max-height: none;
493             z-index: 1;
494         }
495     }
497     .body-container {
498         overflow: auto;
499         &.hidden {
500             display: none !important; /* stylelint-disable-line declaration-no-important */
501         }
502     }
504     .userpicture {
505         height: 60px;
506         width: 60px;
507     }
509     .grader-grading-panel {
510         top: 0;
511         position: absolute;
512         height: 100%;
513         z-index: 0;
514         width: $grading-drawer-width;
516         &.hidden {
517             right: ($grading-drawer-width * -1);
518         }
520         .grading-icon {
521             width: $grading-icon-button-size;
522         }
524         .user-picker-container {
525             .user-full-name {
526                 max-width: 240px;
527             }
529             .page-link {
530                 width: $grading-icon-button-size;
531                 height: $grading-icon-button-size;
532                 display: flex;
533                 text-align: center;
534                 align-items: center;
535                 justify-content: center;
536             }
537         }
539         .header-container {
540             height: 65px;
541             position: relative;
542             overflow: hidden;
544             .info-container {
545                 position: absolute;
546                 top: 50%;
547                 left: 0;
548                 transform: translateY(-50%);
549                 width: 100%;
550                 height: 100%;
551                 padding: map-get($spacers, 2);
552                 padding-right: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)});
553                 opacity: 1;
554                 visibility: visible;
555                 transition: left $grading-animation-duration ease-in-out;
556                 z-index: 1;
557             }
559             .toggle-search-button {
560                 &.expand {
561                     animation-name: expandSearchButton;
562                     animation-duration: $grading-animation-duration;
563                     animation-timing-function: ease-in-out;
564                 }
566                 &.collapse {
567                     display: block;
568                     animation-name: collapseSearchButton;
569                     animation-duration: $grading-animation-duration;
570                 }
571             }
573             .user-search-container {
574                 overflow: hidden;
575                 position: absolute;
576                 top: 50%;
577                 right: 0;
578                 transform: translateY(-50%);
579                 z-index: 2;
580                 width: 100%;
581                 height: 100% !important; /* stylelint-disable-line declaration-no-important */
582                 padding: map-get($spacers, 2);
584                 .search-input-container {
585                     position: relative;
586                     overflow: visible;
587                     flex-wrap: nowrap;
589                     input {
590                         padding-left: $grading-search-input-padding-left;
591                         padding-right: $grading-search-input-padding-right;
592                         opacity: 1;
593                         visibility: visible;
594                         transition:
595                             opacity 0s linear $grading-animation-duration,
596                             visibility 0s linear;
597                     }
599                     .search-icon {
600                         position: absolute;
601                         top: 50%;
602                         left: map-get($spacers, 2);
603                         transform: translateY(-50%);
604                         color: $input-color;
605                         height: $grading-icon-button-size;
606                         width: $grading-icon-button-size - ($input-border-width * 2);
607                         background-color: $input-bg;
608                         opacity: 1;
609                         visibility: visible;
610                         transition:
611                             opacity 0s linear $grading-animation-duration,
612                             visibility 0s linear $grading-animation-duration;
613                     }
615                     .toggle-search-button {
616                         position: absolute;
617                         top: 50%;
618                         right: map-get($spacers, 2);
619                         transform: translateY(-50%);
620                         z-index: 1;
621                         color: inherit;
622                         text-align: left;
623                         padding-left: 9px;
624                         transition: right 0s linear $grading-animation-duration;
626                         .expanded-icon {
627                             opacity: 1;
628                             visibility: visible;
629                             max-width: 50px;
630                             max-height: 50px;
631                             transition:
632                                 opacity 0s linear $grading-animation-duration,
633                                 max-height 0s linear $grading-animation-duration,
634                                 max-width 0s linear $grading-animation-duration,
635                                 visibility 0s linear $grading-animation-duration;
636                         }
638                         .collapsed-icon {
639                             opacity: 0;
640                             visibility: hidden;
641                             max-height: 0;
642                             max-width: 0;
643                             overflow: hidden;
644                             transition:
645                                 opacity 0s linear $grading-animation-duration,
646                                 max-height 0s linear $grading-animation-duration,
647                                 max-width 0s linear $grading-animation-duration,
648                                 visibility 0s linear $grading-animation-duration;
649                         }
650                     }
651                 }
653                 &.collapsed {
654                     width: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)} + #{map-get($spacers, 2)});
655                     transition: width $grading-animation-duration ease-in-out;
657                     .search-input-container {
658                         flex-wrap: nowrap;
660                         input,
661                         .search-icon {
662                             opacity: 0;
663                             visibility: hidden;
664                             transition:
665                                 opacity 0s linear,
666                                 visibility 0s linear;
667                         }
669                         input {
670                             padding-left: 0;
671                             padding-right: 0;
672                         }
674                         .toggle-search-button {
675                             .expanded-icon {
676                                 opacity: 0;
677                                 visibility: hidden;
678                                 max-height: 0;
679                                 max-width: 0;
680                                 overflow: hidden;
681                                 transition:
682                                     opacity 0s linear,
683                                     max-height 0s linear,
684                                     max-width 0s linear,
685                                     visibility 0s linear;
686                             }
688                             .collapsed-icon {
689                                 opacity: 1;
690                                 visibility: visible;
691                                 max-width: 50px;
692                                 max-height: 50px;
693                                 transition:
694                                     opacity 0s linear,
695                                     max-height 0s linear,
696                                     max-width 0s linear,
697                                     visibility 0s linear;
698                             }
699                         }
700                     }
701                 }
702             }
704             .user-search-container:not(.collapsed) + .info-container {
705                 opacity: 0;
706                 visibility: hidden;
707                 left: calc(100% * -1);
708                 transition:
709                     left $grading-animation-duration ease-in-out,
710                     opacity 0s linear $grading-animation-duration,
711                     visibility 0s linear $grading-animation-duration,
712                     padding 0s linear $grading-animation-duration;
713             }
714         }
715     }
717     .grader-module-content {
718         overflow-y: auto;
719         margin-right: $grading-drawer-width;
720         @include transition(margin-right .2s ease-in-out);
721     }
723     .drawer-button {
724         position: relative;
726         &.active::after {
727             content: "";
728             position: absolute;
729             bottom: $grading-nav-bar-active-drawer-button-bottom;
730             left: 0;
731             width: 100%;
732             height: 3px;
733             background-color: map-get($theme-colors, 'primary');
734         }
736         .icon {
737             font-size: 20px;
738             height: 20px;
739             width: 20px;
740         }
741     }
743     .grader-module-content-display {
744         .discussion-container {
745             &:last-of-type {
746                 > hr {
747                     display: none;
748                 }
749             }
751             .posts-container {
752                 &:last-of-type {
753                     > hr {
754                         display: none;
755                     }
756                 }
758                 .parent-container {
759                     position: relative;
761                     .show-content-button {
762                         position: absolute;
763                         height: 100%;
764                         width: 100%;
765                         left: 0;
766                         top: 0;
767                         padding-left: $grading-content-show-content-button-padding-left;
768                         text-align: left;
769                         z-index: 1;
771                         &:not(.collapsed) {
772                             display: none;
773                         }
774                     }
776                     .content {
777                         display: block;
778                         height: auto !important; /* stylelint-disable-line declaration-no-important */
780                         .header {
781                             transition: margin-bottom $grading-animation-duration ease-in-out;
783                             div + div {
784                                 opacity: 1;
785                                 visibility: visible;
786                                 max-height: none;
787                                 transition:
788                                     opacity $grading-animation-duration linear,
789                                     visibility 0s linear;
790                             }
791                         }
793                         .body-content-container {
794                             opacity: 1;
795                             visibility: visible;
796                             max-height: none;
797                             transition:
798                                 opacity $grading-animation-duration linear,
799                                 visibility 0s linear;
800                         }
802                         .forum-post-core {
803                             opacity: 1;
804                             visibility: visible;
805                             max-height: none;
806                             transition:
807                                 opacity $grading-animation-duration linear,
808                                 visibility 0s linear;
809                         }
810                     }
812                     .show-content-button.collapsed + .content {
813                         opacity: .3;
815                         .header {
816                             margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
818                             div + div {
819                                 opacity: 0;
820                                 visibility: hidden;
821                                 max-height: 0;
822                             }
823                         }
825                         .body-content-container {
826                             opacity: 0;
827                             visibility: hidden;
828                             max-height: 0;
829                         }
831                         .forum-post-core {
832                             opacity: 0;
833                             visibility: hidden;
834                             max-height: 0;
835                         }
836                     }
838                     .show-content-button.collapsed:hover + .content,
839                     .show-content-button.collapsed:focus + .content {
840                         opacity: 1;
841                     }
842                 }
843             }
844         }
846         .no-post-container {
847             .icon {
848                 height: 250px;
849                 width: 250px;
850                 margin-right: 0;
851             }
852         }
854         .nested-v2-display-mode {
855             .discussion-container {
856                 .posts-container {
857                     .parent-container {
858                         .show-content-button {
859                             padding-left: $author-image-width + $author-image-margin;
860                         }
861                     }
862                 }
863             }
864         }
865     }
867     .no-search-results-container {
868         .icon {
869             height: 250px;
870             width: 250px;
871             margin-right: 0;
872         }
873     }
875     .nested-v2-display-mode {
876         .view-context-button {
877             margin-left: $author-image-width + $author-image-margin;
878             border-radius: $border-radius-lg;
879         }
881         .parent-container {
882             .author-image-container {
883                 position: relative;
885                 &:after {
886                     position: absolute;
887                     top: calc(#{$author-image-width} + #{map-get($spacers, 2)});
888                     content: "";
889                     background-color: $gray-200;
890                     width: 2px;
891                     height: calc(100% - #{$author-image-width} + #{map-get($spacers, 2)});
892                 }
893             }
894         }
896         .parent-container + .post-container {
897             .author-image-container {
898                 img {
899                     width: $author-image-width-sm !important; /* stylelint-disable-line declaration-no-important */
900                 }
901             }
902         }
903     }
906 .path-mod-forum .unified-grader .nested-v2-display-mode,
907 .path-mod-forum .modal .nested-v2-display-mode {
908     .post-subject {
909         display: none;
910     }
913 @include media-breakpoint-down(xs) {
914     .path-mod-forum .unified-grader {
915         .grader-grading-panel {
916             width: 100%;
917             position: fixed;
918             height: calc(100vh - 50px);
919             overflow: scroll;
920             top: 50px;
921         }
922         .body-container {
923             overflow: visible;
924         }
925     }
928 // End styling for mod_forum.
930 .maincalendar .calendarmonth td,
931 .maincalendar .calendarmonth th {
932     border: 1px dotted $table-border-color;
935 .path-grade-report-grader h1 {
936     text-align: inherit;
939 #page-mod-chat-gui_basic input#message {
940     max-width: 100%;
943 #page-mod-data-view #singleimage {
944     width: auto;
947 .path-mod-data form {
948     margin-top: 10px;
951 .template_heading {
952     margin-top: 10px;
955 .breadcrumb-button {
956     margin-top: 4px;
959 .breadcrumb-button .singlebutton {
960     float: left;
961     margin-left: 4px;
964 .ie .row-fluid .desktop-first-column {
965     margin-left: 0;
968 .langmenu form {
969     margin: 0;
971 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
972 canvas {
973     -ms-touch-action: auto;
976 div#dock {
977     display: none;
980 // Choice module
982 // Lesson module
984 /** General styles (scope: all of lesson) **/
985 .path-mod-lesson .invisiblefieldset.fieldsetfix {
986     display: block;
988 .path-mod-lesson .answeroption .checkbox label p {
989     display: inline;
991 .path-mod-lesson .form-inline label.form-check-label {
992     display: inline-block;
994 .path-mod-lesson .slideshow {
995     overflow: auto;
996     padding: 15px;
998 #page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
999     white-space: normal;
1001 #page-mod-lesson-view {
1002     .vertical .singlebutton {
1003         display: block;
1004         + .singlebutton {
1005             margin-left: 0;
1006             margin-top: 1rem;
1007         }
1008     }
1009     .fitem .felement .custom-select {
1010         align-self: flex-start;
1011     }
1013 .path-mod-lesson .generaltable td {
1014     vertical-align: middle;
1015     label {
1016         margin-bottom: 0;
1017     }
1018     .highlight {
1019         display: inline-block;
1020         margin-left: 0.25rem;
1021     }
1022     input[type="checkbox"] {
1023         display: block;
1024     }
1027 .path-mod-wiki .wiki_headingtitle,
1028 .path-mod-wiki .midpad,
1029 .path-mod-wiki .wiki_headingtime {
1030     text-align: inherit;
1033 .path-mod-wiki .wiki_contentbox {
1034     width: 100%;
1037 // Survey module
1039 .path-mod-survey {
1040     .surveytable {
1041         > tbody > tr:nth-of-type(odd) {
1042             background-color: $table-bg;
1043         }
1045         > tbody > tr:nth-of-type(even) {
1046             background-color: $table-bg-accent;
1047         }
1049         .rblock label {
1050             text-align: center;
1051         }
1052     }
1056 .nav .caret {
1057     margin-left: 4px;
1060 // Dividers
1061 .nav {
1062     .divider {
1063         overflow: hidden;
1064         width: 0;
1065     }
1068 // Usermenu
1069 .usermenu {
1070     .login {
1071         line-height: 2.25rem;
1072     }
1075 .userloggedinas,
1076 .userswitchedrole,
1077 .loginfailures {
1078     .usermenu {
1079         .usertext {
1080             float: left;
1081             text-align: right;
1082             margin-right: $spacer / 2;
1083             height: 35px;
1084             .meta {
1085                 display: block;
1086                 font-size: $font-size-sm;
1087             }
1088         }
1089         .avatar {
1090             img {
1091                 margin: 0;
1092             }
1093         }
1094     }
1097 .userloggedinas .usermenu {
1098     .userbutton .avatars {
1099         position: relative;
1100         display: inline-block;
1101         .avatar {
1102             &.current {
1103                 display: inline-block;
1104                 position: absolute;
1105                 bottom: 0;
1106                 right: 0;
1107                 width: 20px;
1108                 height: 20px;
1109                 border-radius: 50%;
1110                 img {
1111                     vertical-align: baseline;
1112                 }
1113             }
1114             img {
1115                 width: inherit;
1116                 height: inherit;
1117             }
1118         }
1119         .realuser {
1120             width: 35px;
1121             height: 35px;
1122             display: inline-block;
1123         }
1124     }
1127 @include media-breakpoint-down(sm) {
1128     .usertext {
1129         display: none;
1130     }
1133 // Quiz module
1134 .path-mod-quiz .mod-quiz-edit-content {
1135     // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
1136     margin-bottom: 10rem;
1139 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
1140 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
1141     width: auto;
1142     max-width: none;
1144 #page-mod-quiz-mod #id_reviewoptionshdr .form-group {
1145     float: left;
1146     width: 20rem;
1147     display: inline-block;
1148     min-height: 12rem;
1151 #page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
1152     line-height: 1.5;
1153     vertical-align: bottom;
1155 #page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
1156     float: left;
1157     clear: left;
1159 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
1160     width: 90%;
1161     height: 22px;
1162     justify-content: flex-start;
1165 // Question navigation block.
1166 .path-mod-quiz #mod_quiz_navblock {
1167     .qnbutton {
1168         text-decoration: none;
1169         font-size: 14px;
1170         line-height: 20px;
1171         font-weight: normal;
1172         background-color: $card-bg;
1173         background-image: none;
1174         height: 40px;
1175         width: 30px;
1176         border-radius: 3px;
1177         border: 0;
1178         overflow: visible;
1179         margin: 0 6px 6px 0;
1180     }
1182     span.qnbutton {
1183         cursor: default;
1184         background-color: $input-bg-disabled;
1185         color: $gray;
1186     }
1188     a.qnbutton:hover,
1189     a.qnbutton:active,
1190     a.qnbutton:focus {
1191         text-decoration: underline;
1192     }
1194     .qnbutton .thispageholder {
1195         border: 1px solid;
1196         border-radius: 3px;
1197         z-index: 1;
1198     }
1200     .qnbutton.thispage .thispageholder {
1201         border-width: 3px;
1202     }
1204     .allquestionsononepage .qnbutton.thispage .thispageholder {
1205         border-width: 1px;
1206     }
1208     .qnbutton.flagged .thispageholder {
1209         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
1210     }
1212     .qnbutton .trafficlight {
1213         border: 0;
1214         background: $card-bg none center / 10px no-repeat scroll;
1215         height: 20px;
1216         margin-top: 20px;
1217         border-radius: 0 0 3px 3px;
1218     }
1220     .qnbutton.notyetanswered .trafficlight,
1221     .qnbutton.invalidanswer .trafficlight {
1222         background-color: $card-bg;
1223     }
1225     .qnbutton.invalidanswer .trafficlight {
1226         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
1227     }
1229     .qnbutton.correct .trafficlight {
1230         background-image: url([[pix:theme|mod/quiz/checkmark]]);
1231         background-color: $state-success-text;
1232     }
1234     .qnbutton.blocked .trafficlight {
1235         background-image: url([[pix:core|t/locked]]);
1236         background-color: $input-bg-disabled;
1237     }
1239     .qnbutton.notanswered .trafficlight,
1240     .qnbutton.incorrect .trafficlight {
1241         background-color: $state-danger-text;
1242     }
1244     .qnbutton.partiallycorrect .trafficlight {
1245         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
1246         background-color: $state-warning-text;
1247     }
1249     .qnbutton.complete .trafficlight,
1250     .qnbutton.answersaved .trafficlight,
1251     .qnbutton.requiresgrading .trafficlight {
1252         background-color: $gray-light;
1253     }
1256 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
1257     height: 1.4em;
1258     vertical-align: middle;
1261 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
1262     padding: 0;
1263     margin: 0 0.4em;
1266 // Assign.
1267 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
1268     top: auto;
1271 // This section removes the responsiveness from the form in the grading panel
1272 $popout-header-font-size: 1.5 * $font-size-base;
1273 // This can't be calculated from modal-title-padding because we are mixing px and rem units.
1274 $popout-header-height: 4rem;
1276 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
1277     height: calc(100% - #{$popout-header-height});
1280 .path-mod-assign [data-region="grade-panel"] {
1281     padding-top: $spacer;
1283 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
1284 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
1285     width: 100%;
1286     padding: 0;
1287     max-width: 100%;
1288     flex: none;
1290 .path-mod-assign [data-region="grade-panel"] fieldset,
1291 .path-mod-assign [data-region="grade-panel"] .fitem.row {
1292     margin: 0;
1295 .path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
1296     width: 100%;
1299 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
1300     width: auto;
1303 // Now styles for the popout sections.
1305 .path-mod-assign [data-region="grade-panel"] .popout {
1306     background-color: $modal-content-bg;
1309 .path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
1310     background-color: $card-bg;
1311     @include border-radius($card-border-radius);
1312     border: $card-border-width solid $card-border-color;
1313     padding: $card-spacer-x;
1314     margin-bottom: $spacer;
1316 .path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
1317     border-bottom: $hr-border-width solid $hr-border-color;
1318     margin-bottom: $spacer;
1322 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
1323     display: flex;
1324     align-items: flex-start;
1325     justify-content: space-between;
1326     font-size: $popout-header-font-size;
1329 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
1330     margin-top: 0;
1333 // Now style the fixed header elements.
1335 .path-mod-assign [data-region="assignment-info"] {
1336     overflow-y: hidden;
1339 .path-mod-assign [data-region="grading-navigation"] {
1340     padding: 6px;
1343 .path-mod-assign [data-region="grade-actions"] {
1344     padding: 10px;
1347 .path-mod-assign [data-region="user-info"] .img-rounded {
1348     margin-top: 0;
1351 .path-mod-assign [data-region="grading-navigation-panel"] {
1352     height: 85px;
1355 @media (max-width: 767px) {
1356     .path-mod-assign [data-region="grading-navigation-panel"] {
1357         height: auto;
1358     }
1359     .path-mod-assign [data-region="user-info"] {
1360         margin-top: 1rem;
1361     }
1364 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
1365     width: auto;
1366     display: inline-block;
1369 /**
1370  * Assign feedback.
1371  */
1372 .assignfeedback_editpdf_widget * {
1373     box-sizing: content-box;
1376 .assignfeedback_editpdf_widget button {
1377     box-sizing: border-box;
1380 .assignfeedback_editpdf_widget .commentcolourbutton img {
1381     border-width: 0;
1384 .assignfeedback_editpdf_widget .label {
1385     position: relative;
1386     padding: $alert-padding-y $alert-padding-x;
1387     margin-bottom: $alert-margin-bottom;
1388     border: $alert-border-width solid transparent;
1389     @include border-radius($alert-border-radius);
1390     @include alert-variant(theme-color-level('info', $alert-bg-level), theme-color-level('info', $alert-border-level), theme-color-level('info', $alert-color-level)); /* stylelint-disable-line max-line-length */
1393 .assignfeedback_editpdf_menu {
1394     padding: 0;
1397 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
1398     float: none;
1400 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
1401     width: 100%;
1403 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
1404     padding-left: $spacer;
1405     padding-right: $spacer;
1407 .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
1408 .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
1409     background-color: $card-bg;
1412 /**
1413  * Mod LTI.
1414  */
1415 .path-admin-mod-lti {
1416     .btn .loader img,
1417     #tool-list-loader-container .loader img {
1418         height: auto;
1419     }