6b10ff70a6d73471cef6b147d07f56e69eb0da8b
[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     }
256 .path-mod-lesson .generaltable td {
257     vertical-align: middle;
258     label {
259         margin-bottom: 0;
260     }
261     .highlight {
262         display: inline-block;
263         margin-left: 0.25rem;
264     }
265     input[type="checkbox"] {
266         display: block;
267     }
270 .path-mod-wiki .wiki_headingtitle,
271 .path-mod-wiki .midpad,
272 .path-mod-wiki .wiki_headingtime {
273     text-align: inherit;
276 .path-mod-wiki .wiki_contentbox {
277     width: 100%;
280 // Survey module
282 .path-mod-survey {
283     .surveytable {
284         > tbody > tr:nth-of-type(odd) {
285             background-color: $table-bg;
286         }
288         > tbody > tr:nth-of-type(even) {
289             background-color: $table-bg-accent;
290         }
292         .rblock label {
293             text-align: center;
294         }
295     }
299 .nav .caret {
300     margin-left: 4px;
303 // Dividers
304 .nav {
305     .divider {
306         overflow: hidden;
307         width: 0;
308     }
311 // Usermenu
312 .usermenu {
313     .login {
314         line-height: 2.25rem;
316         a {
317             color: $link-color;
318             &:hover,
319             &:focus {
320                 color: $link-hover-color;
321                 text-decoration: underline;
322             }
323         }
324     }
327 .userloggedinas,
328 .userswitchedrole,
329 .loginfailures {
330     .usermenu {
331         .usertext {
332             float: left;
333             text-align: right;
334             margin-right: $spacer / 2;
335             height: 35px;
336             .meta {
337                 display: block;
338                 font-size: $font-size-sm;
339             }
340         }
341         .avatar {
342             img {
343                 margin: 0;
344             }
345         }
346     }
349 .userloggedinas .usermenu {
350     .userbutton .avatars {
351         position: relative;
352         display: inline-block;
353         .avatar {
354             &.current {
355                 display: inline-block;
356                 position: absolute;
357                 bottom: 0;
358                 right: 0;
359                 width: 20px;
360                 height: 20px;
361                 border-radius: 50%;
362                 img {
363                     vertical-align: baseline;
364                 }
365             }
366             img {
367                 width: inherit;
368                 height: inherit;
369             }
370         }
371         .realuser {
372             width: 35px;
373             height: 35px;
374             display: inline-block;
375         }
376     }
379 @include media-breakpoint-down(sm) {
380     .usertext {
381         display: none;
382     }
385 // Quiz module
386 .path-mod-quiz .mod-quiz-edit-content {
387     // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
388     margin-bottom: 10rem;
391 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
392 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
393     width: auto;
394     max-width: none;
396 #page-mod-quiz-mod #id_reviewoptionshdr .form-group {
397     float: left;
398     width: 20rem;
399     display: inline-block;
400     min-height: 12rem;
403 #page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
404     line-height: 1.5;
405     vertical-align: bottom;
407 #page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
408     float: left;
409     clear: left;
411 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
412     width: 90%;
413     height: 22px;
414     justify-content: flex-start;
417 // Question navigation block.
418 .path-mod-quiz #mod_quiz_navblock {
419     .qnbutton {
420         text-decoration: none;
421         font-size: 14px;
422         line-height: 20px;
423         font-weight: normal;
424         background-color: $card-bg;
425         background-image: none;
426         height: 40px;
427         width: 30px;
428         border-radius: 3px;
429         border: 0;
430         overflow: visible;
431         margin: 0 6px 6px 0;
432     }
434     span.qnbutton {
435         cursor: default;
436         background-color: $input-bg-disabled;
437         color: $gray;
438     }
440     a.qnbutton:hover,
441     a.qnbutton:active,
442     a.qnbutton:focus {
443         text-decoration: underline;
444     }
446     .qnbutton .thispageholder {
447         border: 1px solid;
448         border-radius: 3px;
449         z-index: 1;
450     }
452     .qnbutton.thispage .thispageholder {
453         border-width: 3px;
454     }
456     .allquestionsononepage .qnbutton.thispage .thispageholder {
457         border-width: 1px;
458     }
460     .qnbutton.flagged .thispageholder {
461         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
462     }
464     .qnbutton .trafficlight {
465         border: 0;
466         background: $card-bg none center / 10px no-repeat scroll;
467         height: 20px;
468         margin-top: 20px;
469         border-radius: 0 0 3px 3px;
470     }
472     .qnbutton.notyetanswered .trafficlight,
473     .qnbutton.invalidanswer .trafficlight {
474         background-color: $card-bg;
475     }
477     .qnbutton.invalidanswer .trafficlight {
478         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
479     }
481     .qnbutton.correct .trafficlight {
482         background-image: url([[pix:theme|mod/quiz/checkmark]]);
483         background-color: $state-success-text;
484     }
486     .qnbutton.blocked .trafficlight {
487         background-image: url([[pix:core|t/locked]]);
488         background-color: $input-bg-disabled;
489     }
491     .qnbutton.notanswered .trafficlight,
492     .qnbutton.incorrect .trafficlight {
493         background-color: $state-danger-text;
494     }
496     .qnbutton.partiallycorrect .trafficlight {
497         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
498         background-color: $state-warning-text;
499     }
501     .qnbutton.complete .trafficlight,
502     .qnbutton.answersaved .trafficlight,
503     .qnbutton.requiresgrading .trafficlight {
504         background-color: $gray-light;
505     }
508 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
509     height: 1.4em;
510     vertical-align: middle;
513 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
514     padding: 0;
515     margin: 0 0.4em;
518 // Assign.
519 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
520     top: auto;
522 .path-mod-assign .no-overflow {
523     overflow: initial;
526 // This section removes the responsiveness from the form in the grading panel
527 $popout-header-font-size: 1.5 * $font-size-base;
528 // This can't be calculated from modal-title-padding because we are mixing px and rem units.
529 $popout-header-height: 4rem;
531 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
532     height: calc(100% - #{$popout-header-height});
535 .path-mod-assign [data-region="grade-panel"] {
536     padding-top: $spacer;
538 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
539 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
540     width: 100%;
541     padding: 0;
542     max-width: 100%;
543     flex: none;
545 .path-mod-assign [data-region="grade-panel"] fieldset,
546 .path-mod-assign [data-region="grade-panel"] .fitem.row {
547     margin: 0;
550 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3 > .pull-xs-right {
551     float: none !important; /* stylelint-disable-line declaration-no-important */
554 .path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
555     width: 100%;
558 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
559     width: auto;
562 // Now styles for the popout sections.
564 .path-mod-assign [data-region="grade-panel"] .popout {
565     background-color: $modal-content-bg;
568 .path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
569     background-color: $card-bg;
570     @include border-radius($card-border-radius);
571     border: $card-border-width solid $card-border-color;
572     padding: $card-spacer-x;
573     margin-bottom: $spacer;
575 .path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
576     border-bottom: $hr-border-width solid $hr-border-color;
577     margin-bottom: $spacer;
581 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
582     @extend .modal-header;
583     font-size: $popout-header-font-size;
586 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
587     margin-top: 0;
590 // Now style the fixed header elements.
592 .path-mod-assign [data-region="assignment-info"] {
593     overflow-y: hidden;
596 .path-mod-assign [data-region="grading-navigation"] {
597     padding: 6px;
600 .path-mod-assign [data-region="grade-actions"] {
601     padding: 10px;
604 .path-mod-assign [data-region="user-info"] .img-rounded {
605     margin-top: 0;
608 .path-mod-assign [data-region="grading-navigation-panel"] {
609     height: 85px;
612 @media (max-width: 767px) {
613     .path-mod-assign [data-region="grading-navigation-panel"] {
614         height: auto;
615     }
616     .path-mod-assign [data-region="user-info"] {
617         margin-top: 1rem;
618     }
621 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
622     width: auto;
623     display: inline-block;
626 /**
627  * Assign feedback.
628  */
629 .assignfeedback_editpdf_widget * {
630     box-sizing: content-box;
633 .assignfeedback_editpdf_widget button {
634     box-sizing: border-box;
637 .assignfeedback_editpdf_widget .commentcolourbutton img {
638     border-width: 0;
641 .assignfeedback_editpdf_widget .label {
642     @extend .tag;
643     @extend .tag-info;
646 .assignfeedback_editpdf_menu {
647     padding: 0;
650 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
651     float: none;
653 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
654     width: 100%;
656 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
657     padding-left: $spacer;
658     padding-right: $spacer;
660 .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
661 .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
662     background-color: $card-bg;
665 /**
666  * Mod LTI.
667  */
668 .path-admin-mod-lti {
669     .btn .loader img,
670     #tool-list-loader-container .loader img {
671         height: auto;
672     }