weekly release 3.9.1+
[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     .navbar {
491         max-height: none;
492         z-index: 1;
493     }
495     .body-container {
496         &.hidden {
497             display: none !important; /* stylelint-disable-line declaration-no-important */
498         }
499     }
501     .userpicture {
502         height: 60px;
503         width: 60px;
504     }
506     .grader-grading-panel {
507         position: absolute;
508         top: 0;
509         height: 100%;
510         z-index: 0;
511         width: $grading-drawer-width;
513         &.hidden {
514             right: ($grading-drawer-width * -1);
515         }
517         .grading-icon {
518             width: $grading-icon-button-size;
519         }
521         .user-picker-container {
522             .user-full-name {
523                 max-width: 240px;
524             }
526             .page-link {
527                 width: $grading-icon-button-size;
528                 height: $grading-icon-button-size;
529                 display: flex;
530                 text-align: center;
531                 align-items: center;
532                 justify-content: center;
533             }
534         }
536         .header-container {
537             height: 65px;
538             position: relative;
539             overflow: hidden;
541             .info-container {
542                 position: absolute;
543                 top: 50%;
544                 left: 0;
545                 transform: translateY(-50%);
546                 width: 100%;
547                 height: 100%;
548                 padding: map-get($spacers, 2);
549                 padding-right: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)});
550                 opacity: 1;
551                 visibility: visible;
552                 transition: left $grading-animation-duration ease-in-out;
553                 z-index: 1;
554             }
556             .toggle-search-button {
557                 &.expand {
558                     animation-name: expandSearchButton;
559                     animation-duration: $grading-animation-duration;
560                     animation-timing-function: ease-in-out;
561                 }
563                 &.collapse {
564                     display: block;
565                     animation-name: collapseSearchButton;
566                     animation-duration: $grading-animation-duration;
567                 }
568             }
570             .user-search-container {
571                 overflow: hidden;
572                 position: absolute;
573                 top: 50%;
574                 right: 0;
575                 transform: translateY(-50%);
576                 z-index: 2;
577                 width: 100%;
578                 height: 100% !important; /* stylelint-disable-line declaration-no-important */
579                 padding: map-get($spacers, 2);
581                 .search-input-container {
582                     position: relative;
583                     overflow: visible;
584                     flex-wrap: nowrap;
586                     input {
587                         padding-left: $grading-search-input-padding-left;
588                         padding-right: $grading-search-input-padding-right;
589                         opacity: 1;
590                         visibility: visible;
591                         transition:
592                             opacity 0s linear $grading-animation-duration,
593                             visibility 0s linear;
594                     }
596                     .search-icon {
597                         position: absolute;
598                         top: 50%;
599                         left: map-get($spacers, 2);
600                         transform: translateY(-50%);
601                         color: $input-color;
602                         height: $grading-icon-button-size;
603                         width: $grading-icon-button-size - ($input-border-width * 2);
604                         background-color: $input-bg;
605                         opacity: 1;
606                         visibility: visible;
607                         transition:
608                             opacity 0s linear $grading-animation-duration,
609                             visibility 0s linear $grading-animation-duration;
610                     }
612                     .toggle-search-button {
613                         position: absolute;
614                         top: 50%;
615                         right: map-get($spacers, 2);
616                         transform: translateY(-50%);
617                         z-index: 1;
618                         color: inherit;
619                         text-align: left;
620                         padding-left: 9px;
621                         transition: right 0s linear $grading-animation-duration;
623                         .expanded-icon {
624                             opacity: 1;
625                             visibility: visible;
626                             max-width: 50px;
627                             max-height: 50px;
628                             transition:
629                                 opacity 0s linear $grading-animation-duration,
630                                 max-height 0s linear $grading-animation-duration,
631                                 max-width 0s linear $grading-animation-duration,
632                                 visibility 0s linear $grading-animation-duration;
633                         }
635                         .collapsed-icon {
636                             opacity: 0;
637                             visibility: hidden;
638                             max-height: 0;
639                             max-width: 0;
640                             overflow: hidden;
641                             transition:
642                                 opacity 0s linear $grading-animation-duration,
643                                 max-height 0s linear $grading-animation-duration,
644                                 max-width 0s linear $grading-animation-duration,
645                                 visibility 0s linear $grading-animation-duration;
646                         }
647                     }
648                 }
650                 &.collapsed {
651                     width: calc(#{$grading-icon-button-size} + #{map-get($spacers, 2)} + #{map-get($spacers, 2)});
652                     transition: width $grading-animation-duration ease-in-out;
654                     .search-input-container {
655                         flex-wrap: nowrap;
657                         input,
658                         .search-icon {
659                             opacity: 0;
660                             visibility: hidden;
661                             transition:
662                                 opacity 0s linear,
663                                 visibility 0s linear;
664                         }
666                         input {
667                             padding-left: 0;
668                             padding-right: 0;
669                         }
671                         .toggle-search-button {
672                             .expanded-icon {
673                                 opacity: 0;
674                                 visibility: hidden;
675                                 max-height: 0;
676                                 max-width: 0;
677                                 overflow: hidden;
678                                 transition:
679                                     opacity 0s linear,
680                                     max-height 0s linear,
681                                     max-width 0s linear,
682                                     visibility 0s linear;
683                             }
685                             .collapsed-icon {
686                                 opacity: 1;
687                                 visibility: visible;
688                                 max-width: 50px;
689                                 max-height: 50px;
690                                 transition:
691                                     opacity 0s linear,
692                                     max-height 0s linear,
693                                     max-width 0s linear,
694                                     visibility 0s linear;
695                             }
696                         }
697                     }
698                 }
699             }
701             .user-search-container:not(.collapsed) + .info-container {
702                 opacity: 0;
703                 visibility: hidden;
704                 left: calc(100% * -1);
705                 transition:
706                     left $grading-animation-duration ease-in-out,
707                     opacity 0s linear $grading-animation-duration,
708                     visibility 0s linear $grading-animation-duration,
709                     padding 0s linear $grading-animation-duration;
710             }
711         }
712     }
714     .grader-module-content {
715         overflow-y: auto;
716         margin-right: $grading-drawer-width;
717         @include transition(margin-right .2s ease-in-out);
718     }
720     .drawer-button {
721         position: relative;
723         &.active::after {
724             content: "";
725             position: absolute;
726             bottom: $grading-nav-bar-active-drawer-button-bottom;
727             left: 0;
728             width: 100%;
729             height: 3px;
730             background-color: map-get($theme-colors, 'primary');
731         }
733         .icon {
734             font-size: 20px;
735             height: 20px;
736             width: 20px;
737         }
738     }
740     .grader-module-content-display {
741         .discussion-container {
742             &:last-of-type {
743                 > hr {
744                     display: none;
745                 }
746             }
748             .posts-container {
749                 &:last-of-type {
750                     > hr {
751                         display: none;
752                     }
753                 }
755                 .parent-container {
756                     position: relative;
758                     .show-content-button {
759                         position: absolute;
760                         height: 100%;
761                         width: 100%;
762                         left: 0;
763                         top: 0;
764                         padding-left: $grading-content-show-content-button-padding-left;
765                         text-align: left;
766                         z-index: 1;
768                         &:not(.collapsed) {
769                             display: none;
770                         }
771                     }
773                     .content {
774                         display: block;
775                         height: auto !important; /* stylelint-disable-line declaration-no-important */
777                         .header {
778                             transition: margin-bottom $grading-animation-duration ease-in-out;
780                             div + div {
781                                 opacity: 1;
782                                 visibility: visible;
783                                 max-height: none;
784                                 transition:
785                                     opacity $grading-animation-duration linear,
786                                     visibility 0s linear;
787                             }
788                         }
790                         .body-content-container {
791                             opacity: 1;
792                             visibility: visible;
793                             max-height: none;
794                             transition:
795                                 opacity $grading-animation-duration linear,
796                                 visibility 0s linear;
797                         }
799                         .forum-post-core {
800                             opacity: 1;
801                             visibility: visible;
802                             max-height: none;
803                             transition:
804                                 opacity $grading-animation-duration linear,
805                                 visibility 0s linear;
806                         }
807                     }
809                     .show-content-button.collapsed + .content {
810                         opacity: .3;
812                         .header {
813                             margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
815                             div + div {
816                                 opacity: 0;
817                                 visibility: hidden;
818                                 max-height: 0;
819                             }
820                         }
822                         .body-content-container {
823                             opacity: 0;
824                             visibility: hidden;
825                             max-height: 0;
826                         }
828                         .forum-post-core {
829                             opacity: 0;
830                             visibility: hidden;
831                             max-height: 0;
832                         }
833                     }
835                     .show-content-button.collapsed:hover + .content,
836                     .show-content-button.collapsed:focus + .content {
837                         opacity: 1;
838                     }
839                 }
840             }
841         }
843         .no-post-container {
844             .icon {
845                 height: 250px;
846                 width: 250px;
847                 margin-right: 0;
848             }
849         }
851         .nested-v2-display-mode {
852             .discussion-container {
853                 .posts-container {
854                     .parent-container {
855                         .show-content-button {
856                             padding-left: $author-image-width + $author-image-margin;
857                         }
858                     }
859                 }
860             }
861         }
862     }
864     .no-search-results-container {
865         .icon {
866             height: 250px;
867             width: 250px;
868             margin-right: 0;
869         }
870     }
872     .nested-v2-display-mode {
873         .view-context-button {
874             margin-left: $author-image-width + $author-image-margin;
875             border-radius: $border-radius-lg;
876         }
878         .parent-container {
879             .author-image-container {
880                 position: relative;
882                 &:after {
883                     position: absolute;
884                     top: calc(#{$author-image-width} + #{map-get($spacers, 2)});
885                     content: "";
886                     background-color: $gray-200;
887                     width: 2px;
888                     height: calc(100% - #{$author-image-width} + #{map-get($spacers, 2)});
889                 }
890             }
891         }
893         .parent-container + .post-container {
894             .author-image-container {
895                 img {
896                     width: $author-image-width-sm !important; /* stylelint-disable-line declaration-no-important */
897                 }
898             }
899         }
900     }
903 .path-mod-forum .unified-grader .nested-v2-display-mode,
904 .path-mod-forum .modal .nested-v2-display-mode {
905     .post-subject {
906         display: none;
907     }
910 @include media-breakpoint-down(xs) {
911     .path-mod-forum .unified-grader {
912         .grader-grading-panel {
913             width: 100%;
914         }
915     }
918 // End styling for mod_forum.
920 .maincalendar .calendarmonth td,
921 .maincalendar .calendarmonth th {
922     border: 1px dotted $table-border-color;
925 .path-grade-report-grader h1 {
926     text-align: inherit;
929 #page-mod-chat-gui_basic input#message {
930     max-width: 100%;
933 #page-mod-data-view #singleimage {
934     width: auto;
937 .path-mod-data form {
938     margin-top: 10px;
941 .template_heading {
942     margin-top: 10px;
945 .breadcrumb-button {
946     margin-top: 4px;
949 .breadcrumb-button .singlebutton {
950     float: left;
951     margin-left: 4px;
954 .ie .row-fluid .desktop-first-column {
955     margin-left: 0;
958 .langmenu form {
959     margin: 0;
961 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
962 canvas {
963     -ms-touch-action: auto;
966 div#dock {
967     display: none;
970 // Choice module
972 // Lesson module
974 /** General styles (scope: all of lesson) **/
975 .path-mod-lesson .invisiblefieldset.fieldsetfix {
976     display: block;
978 .path-mod-lesson .answeroption .checkbox label p {
979     display: inline;
981 .path-mod-lesson .form-inline label.form-check-label {
982     display: inline-block;
984 .path-mod-lesson .slideshow {
985     overflow: auto;
986     padding: 15px;
988 #page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
989     white-space: normal;
991 #page-mod-lesson-view {
992     .vertical .singlebutton {
993         display: block;
994         + .singlebutton {
995             margin-left: 0;
996             margin-top: 1rem;
997         }
998     }
999     .fitem .felement .custom-select {
1000         align-self: flex-start;
1001     }
1003 .path-mod-lesson .generaltable td {
1004     vertical-align: middle;
1005     label {
1006         margin-bottom: 0;
1007     }
1008     .highlight {
1009         display: inline-block;
1010         margin-left: 0.25rem;
1011     }
1012     input[type="checkbox"] {
1013         display: block;
1014     }
1017 .path-mod-wiki .wiki_headingtitle,
1018 .path-mod-wiki .midpad,
1019 .path-mod-wiki .wiki_headingtime {
1020     text-align: inherit;
1023 .path-mod-wiki .wiki_contentbox {
1024     width: 100%;
1027 // Survey module
1029 .path-mod-survey {
1030     .surveytable {
1031         > tbody > tr:nth-of-type(odd) {
1032             background-color: $table-bg;
1033         }
1035         > tbody > tr:nth-of-type(even) {
1036             background-color: $table-bg-accent;
1037         }
1039         .rblock label {
1040             text-align: center;
1041         }
1042     }
1046 .nav .caret {
1047     margin-left: 4px;
1050 // Dividers
1051 .nav {
1052     .divider {
1053         overflow: hidden;
1054         width: 0;
1055     }
1058 // Usermenu
1059 .usermenu {
1060     .login {
1061         line-height: 2.25rem;
1062     }
1065 .userloggedinas,
1066 .userswitchedrole,
1067 .loginfailures {
1068     .usermenu {
1069         .usertext {
1070             float: left;
1071             text-align: right;
1072             margin-right: $spacer / 2;
1073             height: 35px;
1074             .meta {
1075                 display: block;
1076                 font-size: $font-size-sm;
1077             }
1078         }
1079         .avatar {
1080             img {
1081                 margin: 0;
1082             }
1083         }
1084     }
1087 .userloggedinas .usermenu {
1088     .userbutton .avatars {
1089         position: relative;
1090         display: inline-block;
1091         .avatar {
1092             &.current {
1093                 display: inline-block;
1094                 position: absolute;
1095                 bottom: 0;
1096                 right: 0;
1097                 width: 20px;
1098                 height: 20px;
1099                 border-radius: 50%;
1100                 img {
1101                     vertical-align: baseline;
1102                 }
1103             }
1104             img {
1105                 width: inherit;
1106                 height: inherit;
1107             }
1108         }
1109         .realuser {
1110             width: 35px;
1111             height: 35px;
1112             display: inline-block;
1113         }
1114     }
1117 @include media-breakpoint-down(sm) {
1118     .usertext {
1119         display: none;
1120     }
1123 // Quiz module
1124 .path-mod-quiz .mod-quiz-edit-content {
1125     // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
1126     margin-bottom: 10rem;
1129 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
1130 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
1131     width: auto;
1132     max-width: none;
1134 #page-mod-quiz-mod #id_reviewoptionshdr .form-group {
1135     float: left;
1136     width: 20rem;
1137     display: inline-block;
1138     min-height: 12rem;
1141 #page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
1142     line-height: 1.5;
1143     vertical-align: bottom;
1145 #page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
1146     float: left;
1147     clear: left;
1149 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
1150     width: 90%;
1151     height: 22px;
1152     justify-content: flex-start;
1155 // Question navigation block.
1156 .path-mod-quiz #mod_quiz_navblock {
1157     .qnbutton {
1158         text-decoration: none;
1159         font-size: 14px;
1160         line-height: 20px;
1161         font-weight: normal;
1162         background-color: $card-bg;
1163         background-image: none;
1164         height: 40px;
1165         width: 30px;
1166         border-radius: 3px;
1167         border: 0;
1168         overflow: visible;
1169         margin: 0 6px 6px 0;
1170     }
1172     span.qnbutton {
1173         cursor: default;
1174         background-color: $input-bg-disabled;
1175         color: $gray;
1176     }
1178     a.qnbutton:hover,
1179     a.qnbutton:active,
1180     a.qnbutton:focus {
1181         text-decoration: underline;
1182     }
1184     .qnbutton .thispageholder {
1185         border: 1px solid;
1186         border-radius: 3px;
1187         z-index: 1;
1188     }
1190     .qnbutton.thispage .thispageholder {
1191         border-width: 3px;
1192     }
1194     .allquestionsononepage .qnbutton.thispage .thispageholder {
1195         border-width: 1px;
1196     }
1198     .qnbutton.flagged .thispageholder {
1199         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
1200     }
1202     .qnbutton .trafficlight {
1203         border: 0;
1204         background: $card-bg none center / 10px no-repeat scroll;
1205         height: 20px;
1206         margin-top: 20px;
1207         border-radius: 0 0 3px 3px;
1208     }
1210     .qnbutton.notyetanswered .trafficlight,
1211     .qnbutton.invalidanswer .trafficlight {
1212         background-color: $card-bg;
1213     }
1215     .qnbutton.invalidanswer .trafficlight {
1216         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
1217     }
1219     .qnbutton.correct .trafficlight {
1220         background-image: url([[pix:theme|mod/quiz/checkmark]]);
1221         background-color: $state-success-text;
1222     }
1224     .qnbutton.blocked .trafficlight {
1225         background-image: url([[pix:core|t/locked]]);
1226         background-color: $input-bg-disabled;
1227     }
1229     .qnbutton.notanswered .trafficlight,
1230     .qnbutton.incorrect .trafficlight {
1231         background-color: $state-danger-text;
1232     }
1234     .qnbutton.partiallycorrect .trafficlight {
1235         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
1236         background-color: $state-warning-text;
1237     }
1239     .qnbutton.complete .trafficlight,
1240     .qnbutton.answersaved .trafficlight,
1241     .qnbutton.requiresgrading .trafficlight {
1242         background-color: $gray-light;
1243     }
1246 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
1247     height: 1.4em;
1248     vertical-align: middle;
1251 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
1252     padding: 0;
1253     margin: 0 0.4em;
1256 // Assign.
1257 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
1258     top: auto;
1261 // This section removes the responsiveness from the form in the grading panel
1262 $popout-header-font-size: 1.5 * $font-size-base;
1263 // This can't be calculated from modal-title-padding because we are mixing px and rem units.
1264 $popout-header-height: 4rem;
1266 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
1267     height: calc(100% - #{$popout-header-height});
1270 .path-mod-assign [data-region="grade-panel"] {
1271     padding-top: $spacer;
1273 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
1274 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
1275     width: 100%;
1276     padding: 0;
1277     max-width: 100%;
1278     flex: none;
1280 .path-mod-assign [data-region="grade-panel"] fieldset,
1281 .path-mod-assign [data-region="grade-panel"] .fitem.row {
1282     margin: 0;
1285 .path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
1286     width: 100%;
1289 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
1290     width: auto;
1293 // Now styles for the popout sections.
1295 .path-mod-assign [data-region="grade-panel"] .popout {
1296     background-color: $modal-content-bg;
1299 .path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
1300     background-color: $card-bg;
1301     @include border-radius($card-border-radius);
1302     border: $card-border-width solid $card-border-color;
1303     padding: $card-spacer-x;
1304     margin-bottom: $spacer;
1306 .path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
1307     border-bottom: $hr-border-width solid $hr-border-color;
1308     margin-bottom: $spacer;
1312 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
1313     display: flex;
1314     align-items: flex-start;
1315     justify-content: space-between;
1316     font-size: $popout-header-font-size;
1319 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
1320     margin-top: 0;
1323 // Now style the fixed header elements.
1325 .path-mod-assign [data-region="assignment-info"] {
1326     overflow-y: hidden;
1329 .path-mod-assign [data-region="grading-navigation"] {
1330     padding: 6px;
1333 .path-mod-assign [data-region="grade-actions"] {
1334     padding: 10px;
1337 .path-mod-assign [data-region="user-info"] .img-rounded {
1338     margin-top: 0;
1341 .path-mod-assign [data-region="grading-navigation-panel"] {
1342     height: 85px;
1345 @media (max-width: 767px) {
1346     .path-mod-assign [data-region="grading-navigation-panel"] {
1347         height: auto;
1348     }
1349     .path-mod-assign [data-region="user-info"] {
1350         margin-top: 1rem;
1351     }
1354 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
1355     width: auto;
1356     display: inline-block;
1359 /**
1360  * Assign feedback.
1361  */
1362 .assignfeedback_editpdf_widget * {
1363     box-sizing: content-box;
1366 .assignfeedback_editpdf_widget button {
1367     box-sizing: border-box;
1370 .assignfeedback_editpdf_widget .commentcolourbutton img {
1371     border-width: 0;
1374 .assignfeedback_editpdf_widget .label {
1375     position: relative;
1376     padding: $alert-padding-y $alert-padding-x;
1377     margin-bottom: $alert-margin-bottom;
1378     border: $alert-border-width solid transparent;
1379     @include border-radius($alert-border-radius);
1380     @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 */
1383 .assignfeedback_editpdf_menu {
1384     padding: 0;
1387 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
1388     float: none;
1390 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
1391     width: 100%;
1393 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
1394     padding-left: $spacer;
1395     padding-right: $spacer;
1397 .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
1398 .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
1399     background-color: $card-bg;
1402 /**
1403  * Mod LTI.
1404  */
1405 .path-admin-mod-lti {
1406     .btn .loader img,
1407     #tool-list-loader-container .loader img {
1408         height: auto;
1409     }