MDL-62624 lesson: Fix alignment in matching questions in boost
[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 .forumpost {
113     border: $border-width solid $border-color;
114     display: block;
115     padding: 6px;
117     .header {
118         margin-bottom: 3px;
119     }
121     .picture img {
122         margin: 3px;
124         &.userpicture {
125             margin-left: 3px;
126             margin-right: 10px;
127         }
128     }
130     .content {
131         .posting.fullpost {
132             margin-top: 8px;
133         }
134     }
136     .row {
137         display: block;
138         .topic,
139         .content-mask,
140         .options {
141             margin-left: 48px;
142         }
144         &.side {
145             clear: both;
146         }
147     }
150 .forumpost .row .left {
151     width: 48px;
154 .forumpost .options .commands {
155     margin-left: 0;
158 .forumpost .subject {
159     font-weight: bold;
162 // Override hardcoded forum modules styling
163 .forumsearch input[type=text] {
164     margin-bottom: 0;
167 #page-mod-forum-discuss .discussioncontrols {
168     width: auto;
169     margin: 0;
171     .form-inline input {
172         margin-top: -1px;
173     }
176 .maincalendar .calendarmonth td,
177 .maincalendar .calendarmonth th {
178     border: 1px dotted $table-border-color;
181 .path-grade-report-grader h1 {
182     text-align: inherit;
185 #page-mod-chat-gui_basic input#message {
186     max-width: 100%;
189 #page-mod-data-view #singleimage {
190     width: auto;
193 .path-mod-data form {
194     margin-top: 10px;
197 .template_heading {
198     margin-top: 10px;
201 .breadcrumb-button {
202     margin-top: 4px;
205 .breadcrumb-button .singlebutton {
206     float: left;
207     margin-left: 4px;
210 .ie .row-fluid .desktop-first-column {
211     margin-left: 0;
214 .langmenu form {
215     margin: 0;
217 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
218 canvas {
219     -ms-touch-action: auto;
222 div#dock {
223     display: none;
226 // Choice module
228 // Lesson module
230 /** General styles (scope: all of lesson) **/
231 .path-mod-lesson .invisiblefieldset.fieldsetfix {
232     display: block;
234 .path-mod-lesson .answeroption .checkbox label p {
235     display: inline;
237 .path-mod-lesson .form-inline label.form-check-label {
238     display: inline-block;
240 .path-mod-lesson .slideshow {
241     overflow: auto;
242     padding: 15px;
244 #page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
245     white-space: normal;
247 #page-mod-lesson-view {
248     .vertical .singlebutton {
249         display: block;
250         + .singlebutton {
251             margin-left: 0;
252             margin-top: 1rem;
253         }
254     }
255     .fitem .felement .custom-select {
256         align-self: flex-start;
257     }
259 .path-mod-lesson .generaltable td {
260     vertical-align: middle;
261     label {
262         margin-bottom: 0;
263     }
264     .highlight {
265         display: inline-block;
266         margin-left: 0.25rem;
267     }
268     input[type="checkbox"] {
269         display: block;
270     }
273 .path-mod-wiki .wiki_headingtitle,
274 .path-mod-wiki .midpad,
275 .path-mod-wiki .wiki_headingtime {
276     text-align: inherit;
279 .path-mod-wiki .wiki_contentbox {
280     width: 100%;
283 // Survey module
285 .path-mod-survey {
286     .surveytable {
287         > tbody > tr:nth-of-type(odd) {
288             background-color: $table-bg;
289         }
291         > tbody > tr:nth-of-type(even) {
292             background-color: $table-bg-accent;
293         }
295         .rblock label {
296             text-align: center;
297         }
298     }
302 .nav .caret {
303     margin-left: 4px;
306 // Dividers
307 .nav {
308     .divider {
309         overflow: hidden;
310         width: 0;
311     }
314 // Usermenu
315 .usermenu {
316     .login {
317         line-height: 2.25rem;
319         a {
320             color: $link-color;
321             &:hover,
322             &:focus {
323                 color: $link-hover-color;
324                 text-decoration: underline;
325             }
326         }
327     }
330 .userloggedinas,
331 .userswitchedrole,
332 .loginfailures {
333     .usermenu {
334         .usertext {
335             float: left;
336             text-align: right;
337             margin-right: $spacer / 2;
338             height: 35px;
339             .meta {
340                 display: block;
341                 font-size: $font-size-sm;
342             }
343         }
344         .avatar {
345             img {
346                 margin: 0;
347             }
348         }
349     }
352 .userloggedinas .usermenu {
353     .userbutton .avatars {
354         position: relative;
355         display: inline-block;
356         .avatar {
357             &.current {
358                 display: inline-block;
359                 position: absolute;
360                 bottom: 0;
361                 right: 0;
362                 width: 20px;
363                 height: 20px;
364                 border-radius: 50%;
365                 img {
366                     vertical-align: baseline;
367                 }
368             }
369             img {
370                 width: inherit;
371                 height: inherit;
372             }
373         }
374         .realuser {
375             width: 35px;
376             height: 35px;
377             display: inline-block;
378         }
379     }
382 @include media-breakpoint-down(sm) {
383     .usertext {
384         display: none;
385     }
388 // Quiz module
389 .path-mod-quiz .mod-quiz-edit-content {
390     // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
391     margin-bottom: 10rem;
394 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
395 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
396     width: auto;
397     max-width: none;
399 #page-mod-quiz-mod #id_reviewoptionshdr .form-group {
400     float: left;
401     width: 20rem;
402     display: inline-block;
403     min-height: 12rem;
406 #page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
407     line-height: 1.5;
408     vertical-align: bottom;
410 #page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
411     float: left;
412     clear: left;
414 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
415     width: 90%;
416     height: 22px;
417     justify-content: flex-start;
420 // Question navigation block.
421 .path-mod-quiz #mod_quiz_navblock {
422     .qnbutton {
423         text-decoration: none;
424         font-size: 14px;
425         line-height: 20px;
426         font-weight: normal;
427         background-color: $card-bg;
428         background-image: none;
429         height: 40px;
430         width: 30px;
431         border-radius: 3px;
432         border: 0;
433         overflow: visible;
434         margin: 0 6px 6px 0;
435     }
437     span.qnbutton {
438         cursor: default;
439         background-color: $input-bg-disabled;
440         color: $gray;
441     }
443     a.qnbutton:hover,
444     a.qnbutton:active,
445     a.qnbutton:focus {
446         text-decoration: underline;
447     }
449     .qnbutton .thispageholder {
450         border: 1px solid;
451         border-radius: 3px;
452         z-index: 1;
453     }
455     .qnbutton.thispage .thispageholder {
456         border-width: 3px;
457     }
459     .allquestionsononepage .qnbutton.thispage .thispageholder {
460         border-width: 1px;
461     }
463     .qnbutton.flagged .thispageholder {
464         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
465     }
467     .qnbutton .trafficlight {
468         border: 0;
469         background: $card-bg none center / 10px no-repeat scroll;
470         height: 20px;
471         margin-top: 20px;
472         border-radius: 0 0 3px 3px;
473     }
475     .qnbutton.notyetanswered .trafficlight,
476     .qnbutton.invalidanswer .trafficlight {
477         background-color: $card-bg;
478     }
480     .qnbutton.invalidanswer .trafficlight {
481         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
482     }
484     .qnbutton.correct .trafficlight {
485         background-image: url([[pix:theme|mod/quiz/checkmark]]);
486         background-color: $state-success-text;
487     }
489     .qnbutton.blocked .trafficlight {
490         background-image: url([[pix:core|t/locked]]);
491         background-color: $input-bg-disabled;
492     }
494     .qnbutton.notanswered .trafficlight,
495     .qnbutton.incorrect .trafficlight {
496         background-color: $state-danger-text;
497     }
499     .qnbutton.partiallycorrect .trafficlight {
500         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
501         background-color: $state-warning-text;
502     }
504     .qnbutton.complete .trafficlight,
505     .qnbutton.answersaved .trafficlight,
506     .qnbutton.requiresgrading .trafficlight {
507         background-color: $gray-light;
508     }
511 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
512     height: 1.4em;
513     vertical-align: middle;
516 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
517     padding: 0;
518     margin: 0 0.4em;
521 // Assign.
522 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
523     top: auto;
525 .path-mod-assign .no-overflow {
526     overflow: initial;
529 // This section removes the responsiveness from the form in the grading panel
530 $popout-header-font-size: 1.5 * $font-size-base;
531 // This can't be calculated from modal-title-padding because we are mixing px and rem units.
532 $popout-header-height: 4rem;
534 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
535     height: calc(100% - #{$popout-header-height});
538 .path-mod-assign [data-region="grade-panel"] {
539     padding-top: $spacer;
541 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
542 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
543     width: 100%;
544     padding: 0;
545     max-width: 100%;
546     flex: none;
548 .path-mod-assign [data-region="grade-panel"] fieldset,
549 .path-mod-assign [data-region="grade-panel"] .fitem.row {
550     margin: 0;
553 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3 > .pull-xs-right {
554     float: none !important; /* stylelint-disable-line declaration-no-important */
557 .path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
558     width: 100%;
561 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
562     width: auto;
565 // Now styles for the popout sections.
567 .path-mod-assign [data-region="grade-panel"] .popout {
568     background-color: $modal-content-bg;
571 .path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
572     background-color: $card-bg;
573     @include border-radius($card-border-radius);
574     border: $card-border-width solid $card-border-color;
575     padding: $card-spacer-x;
576     margin-bottom: $spacer;
578 .path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
579     border-bottom: $hr-border-width solid $hr-border-color;
580     margin-bottom: $spacer;
584 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
585     @extend .modal-header;
586     font-size: $popout-header-font-size;
589 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
590     margin-top: 0;
593 // Now style the fixed header elements.
595 .path-mod-assign [data-region="assignment-info"] {
596     overflow-y: hidden;
599 .path-mod-assign [data-region="grading-navigation"] {
600     padding: 6px;
603 .path-mod-assign [data-region="grade-actions"] {
604     padding: 10px;
607 .path-mod-assign [data-region="user-info"] .img-rounded {
608     margin-top: 0;
611 .path-mod-assign [data-region="grading-navigation-panel"] {
612     height: 85px;
615 @media (max-width: 767px) {
616     .path-mod-assign [data-region="grading-navigation-panel"] {
617         height: auto;
618     }
619     .path-mod-assign [data-region="user-info"] {
620         margin-top: 1rem;
621     }
624 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
625     width: auto;
626     display: inline-block;
629 /**
630  * Assign feedback.
631  */
632 .assignfeedback_editpdf_widget * {
633     box-sizing: content-box;
636 .assignfeedback_editpdf_widget button {
637     box-sizing: border-box;
640 .assignfeedback_editpdf_widget .commentcolourbutton img {
641     border-width: 0;
644 .assignfeedback_editpdf_widget .label {
645     @extend .tag;
646     @extend .tag-info;
649 .assignfeedback_editpdf_menu {
650     padding: 0;
653 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
654     float: none;
656 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
657     width: 100%;
659 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
660     padding-left: $spacer;
661     padding-right: $spacer;
663 .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
664 .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
665     background-color: $card-bg;
668 /**
669  * Mod LTI.
670  */
671 .path-admin-mod-lti {
672     .btn .loader img,
673     #tool-list-loader-container .loader img {
674         height: auto;
675     }