Merge branch 'MDL-62058-master' of git://github.com/bmbrands/moodle
[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             .author,
81             .replies,
82             .lastpost {
83                 white-space: normal;
84             }
86             .discussionsubscription,
87             .replies {
88                 text-align: center;
89             }
91             .topic,
92             .discussionsubscription,
93             .topic.starter,
94             .picture,
95             .author,
96             .replies,
97             .lastpost {
98                 vertical-align: top;
99             }
100         }
101     }
103     // Style for the forum subscription mode node.
104     .subscriptionmode {
105         color: $body-color;
106     }
108     // Style for the currently selected subscription mode.
109     .activesetting {
110         color: $body-color;
111         font-weight: bold;
112     }
115 .forumpost {
116     border: $border-width solid $border-color;
117     display: block;
118     padding: 6px;
120     .header {
121         margin-bottom: 3px;
122     }
124     .picture img {
125         margin: 3px;
127         &.userpicture {
128             margin-left: 3px;
129             margin-right: 10px;
130         }
131     }
133     .content {
134         .posting.fullpost {
135             margin-top: 8px;
136         }
137     }
139     .row {
140         display: block;
141         .topic,
142         .content-mask,
143         .options {
144             margin-left: 48px;
145         }
147         &.side {
148             clear: both;
149         }
150     }
153 .forumpost .row .left {
154     width: 48px;
157 .forumpost .options .commands {
158     margin-left: 0;
161 .forumpost .subject {
162     font-weight: bold;
165 // Override hardcoded forum modules styling
166 .forumsearch input[type=text] {
167     margin-bottom: 0;
170 #page-mod-forum-discuss .discussioncontrols {
171     width: auto;
172     margin: 0;
174     .form-inline input {
175         margin-top: -1px;
176     }
179 .maincalendar .calendarmonth td,
180 .maincalendar .calendarmonth th {
181     border: 1px dotted $table-border-color;
184 .path-grade-report-grader h1 {
185     text-align: inherit;
188 #page-mod-chat-gui_basic input#message {
189     max-width: 100%;
192 #page-mod-data-view #singleimage {
193     width: auto;
196 .path-mod-data form {
197     margin-top: 10px;
200 .template_heading {
201     margin-top: 10px;
204 .breadcrumb-button {
205     margin-top: 4px;
208 .breadcrumb-button .singlebutton {
209     float: left;
210     margin-left: 4px;
213 .ie .row-fluid .desktop-first-column {
214     margin-left: 0;
217 .langmenu form {
218     margin: 0;
220 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
221 canvas {
222     -ms-touch-action: auto;
225 div#dock {
226     display: none;
229 // Choice module
231 // Lesson module
233 /** General styles (scope: all of lesson) **/
234 .path-mod-lesson .invisiblefieldset.fieldsetfix {
235     display: block;
237 .path-mod-lesson .answeroption .checkbox label p {
238     display: inline;
240 #page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
241     white-space: normal;
244 .path-mod-wiki .wiki_headingtitle,
245 .path-mod-wiki .midpad,
246 .path-mod-wiki .wiki_headingtime {
247     text-align: inherit;
250 .path-mod-wiki .wiki_contentbox {
251     width: 100%;
254 // Survey module
256 .path-mod-survey {
257     .surveytable {
258         > tbody > tr:nth-of-type(odd) {
259             background-color: $table-bg;
260         }
262         > tbody > tr:nth-of-type(even) {
263             background-color: $table-bg-accent;
264         }
266         .rblock label {
267             text-align: center;
268         }
269     }
273 .nav .caret {
274     margin-left: 4px;
277 // Dividers
278 .nav {
279     .divider {
280         overflow: hidden;
281         width: 0;
282     }
285 // Usermenu
286 .usermenu {
287     .login {
288         line-height: 2.25rem;
290         a {
291             color: $link-color;
292             &:hover,
293             &:focus {
294                 color: $link-hover-color;
295                 text-decoration: underline;
296             }
297         }
298     }
301 .userloggedinas,
302 .userswitchedrole,
303 .loginfailures {
304     .usermenu {
305         .usertext {
306             float: left;
307             text-align: right;
308             margin-right: $spacer / 2;
309             height: 35px;
310             .meta {
311                 display: block;
312                 font-size: $font-size-sm;
313             }
314         }
315         .avatar {
316             img {
317                 margin: 0;
318             }
319         }
320     }
323 .userloggedinas .usermenu {
324     .userbutton .avatars {
325         position: relative;
326         display: inline-block;
327         .avatar {
328             &.current {
329                 display: inline-block;
330                 position: absolute;
331                 bottom: 0;
332                 right: 0;
333                 width: 20px;
334                 height: 20px;
335                 border-radius: 50%;
336                 img {
337                     vertical-align: baseline;
338                 }
339             }
340             img {
341                 width: inherit;
342                 height: inherit;
343             }
344         }
345         .realuser {
346             width: 35px;
347             height: 35px;
348             display: inline-block;
349         }
350     }
353 @include media-breakpoint-down(sm) {
354     .usertext {
355         display: none;
356     }
359 // Quiz module
360 .path-mod-quiz .mod-quiz-edit-content {
361     // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
362     margin-bottom: 10rem;
365 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
366 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
367     width: auto;
368     max-width: none;
370 #page-mod-quiz-mod #id_reviewoptionshdr .form-group {
371     float: left;
372     width: 20rem;
373     display: inline-block;
374     min-height: 12rem;
377 #page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
378     line-height: 1.5;
379     vertical-align: bottom;
381 #page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
382     float: left;
383     clear: left;
385 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
386     width: 90%;
387     height: 22px;
388     justify-content: flex-start;
391 // Question navigation block.
392 .path-mod-quiz #mod_quiz_navblock {
393     .qnbutton {
394         text-decoration: none;
395         font-size: 14px;
396         line-height: 20px;
397         font-weight: normal;
398         background-color: $card-bg;
399         background-image: none;
400         height: 40px;
401         width: 30px;
402         border-radius: 3px;
403         border: 0;
404         overflow: visible;
405         margin: 0 6px 6px 0;
406     }
408     span.qnbutton {
409         cursor: default;
410         background-color: $input-bg-disabled;
411         color: $gray;
412     }
414     a.qnbutton:hover,
415     a.qnbutton:active,
416     a.qnbutton:focus {
417         text-decoration: underline;
418     }
420     .qnbutton .thispageholder {
421         border: 1px solid;
422         border-radius: 3px;
423         z-index: 1;
424     }
426     .qnbutton.thispage .thispageholder {
427         border-width: 3px;
428     }
430     .allquestionsononepage .qnbutton.thispage .thispageholder {
431         border-width: 1px;
432     }
434     .qnbutton.flagged .thispageholder {
435         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
436     }
438     .qnbutton .trafficlight {
439         border: 0;
440         background: $card-bg none center / 10px no-repeat scroll;
441         height: 20px;
442         margin-top: 20px;
443         border-radius: 0 0 3px 3px;
444     }
446     .qnbutton.notyetanswered .trafficlight,
447     .qnbutton.invalidanswer .trafficlight {
448         background-color: $card-bg;
449     }
451     .qnbutton.invalidanswer .trafficlight {
452         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
453     }
455     .qnbutton.correct .trafficlight {
456         background-image: url([[pix:theme|mod/quiz/checkmark]]);
457         background-color: $state-success-text;
458     }
460     .qnbutton.blocked .trafficlight {
461         background-image: url([[pix:core|t/locked]]);
462         background-color: $input-bg-disabled;
463     }
465     .qnbutton.notanswered .trafficlight,
466     .qnbutton.incorrect .trafficlight {
467         background-color: $state-danger-text;
468     }
470     .qnbutton.partiallycorrect .trafficlight {
471         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
472         background-color: $state-warning-text;
473     }
475     .qnbutton.complete .trafficlight,
476     .qnbutton.answersaved .trafficlight,
477     .qnbutton.requiresgrading .trafficlight {
478         background-color: $gray-light;
479     }
482 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
483     height: 1.4em;
484     vertical-align: middle;
487 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
488     padding: 0;
489     margin: 0 0.4em;
492 // Assign.
493 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
494     top: auto;
496 .path-mod-assign .no-overflow {
497     overflow: initial;
500 // This section removes the responsiveness from the form in the grading panel
501 $popout-header-font-size: 1.5 * $font-size-base;
502 // This can't be calculated from modal-title-padding because we are mixing px and rem units.
503 $popout-header-height: 4rem;
505 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
506     height: calc(100% - #{$popout-header-height});
509 .path-mod-assign [data-region="grade-panel"] {
510     padding-top: $spacer;
512 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
513 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
514     width: 100%;
515     padding: 0;
516     max-width: 100%;
517     flex: none;
519 .path-mod-assign [data-region="grade-panel"] fieldset,
520 .path-mod-assign [data-region="grade-panel"] .fitem.row {
521     margin: 0;
524 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3 > .pull-xs-right {
525     float: none !important; /* stylelint-disable-line declaration-no-important */
528 .path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
529     width: 100%;
532 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
533     width: auto;
536 // Now styles for the popout sections.
538 .path-mod-assign [data-region="grade-panel"] .popout {
539     background-color: $modal-content-bg;
542 .path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
543     background-color: $card-bg;
544     @include border-radius($card-border-radius);
545     border: $card-border-width solid $card-border-color;
546     padding: $card-spacer-x;
547     margin-bottom: $spacer;
549 .path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
550     border-bottom: $hr-border-width solid $hr-border-color;
551     margin-bottom: $spacer;
555 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
556     @extend .modal-header;
557     font-size: $popout-header-font-size;
560 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
561     margin-top: 0;
564 // Now style the fixed header elements.
566 .path-mod-assign [data-region="assignment-info"] {
567     overflow-y: hidden;
570 .path-mod-assign [data-region="grading-navigation"] {
571     padding: 6px;
574 .path-mod-assign [data-region="grade-actions"] {
575     padding: 10px;
578 .path-mod-assign [data-region="user-info"] .img-rounded {
579     margin-top: 0;
582 .path-mod-assign [data-region="grading-navigation-panel"] {
583     height: 85px;
586 @media (max-width: 767px) {
587     .path-mod-assign [data-region="grading-navigation-panel"] {
588         height: auto;
589     }
590     .path-mod-assign [data-region="user-info"] {
591         margin-top: 1rem;
592     }
595 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
596     width: auto;
597     display: inline-block;
600 /**
601  * Assign feedback.
602  */
603 .assignfeedback_editpdf_widget * {
604     box-sizing: content-box;
607 .assignfeedback_editpdf_widget button {
608     box-sizing: border-box;
611 .assignfeedback_editpdf_widget .commentcolourbutton img {
612     border-width: 0;
615 .assignfeedback_editpdf_widget .label {
616     @extend .tag;
617     @extend .tag-info;
620 .assignfeedback_editpdf_menu {
621     padding: 0;
624 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
625     float: none;
627 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
628     width: 100%;
630 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
631     padding-left: $spacer;
632     padding-right: $spacer;
634 .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
635 .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
636     background-color: $card-bg;
639 /**
640  * Mod LTI.
641  */
642 .path-admin-mod-lti {
643     .btn .loader img,
644     #tool-list-loader-container .loader img {
645         height: auto;
646     }