b95f91ded02f1275a1dac1f6d9de110e8828d6ce
[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     @extend .card;
117     padding: 6px;
119     .header {
120         margin-bottom: 3px;
121     }
123     .picture img {
124         margin: 3px;
126         &.userpicture {
127             margin-left: 3px;
128             margin-right: 10px;
129         }
130     }
132     .content {
133         .posting.fullpost {
134             margin-top: 8px;
135         }
136     }
138     .row {
139         .topic,
140         .content-mask,
141         .options {
142             margin-left: 48px;
143         }
145         &.side {
146             clear: both;
147         }
148     }
151 .forumpost .row .left {
152     width: 48px;
155 .forumpost .options .commands {
156     margin-left: 0;
159 .forumpost .subject {
160     font-weight: bold;
163 // Override hardcoded forum modules styling
164 .forumsearch input[type=text] {
165     margin-bottom: 0;
168 #page-mod-forum-discuss .discussioncontrols {
169     width: auto;
170     margin: 0;
172     .form-inline input {
173         margin-top: -1px;
174     }
177 .maincalendar .calendarmonth td,
178 .maincalendar .calendarmonth th {
179     border: 1px dotted $table-border-color;
182 .path-grade-report-grader h1 {
183     text-align: inherit;
186 #page-mod-chat-gui_basic input#message {
187     max-width: 100%;
190 #page-mod-data-view #singleimage {
191     width: auto;
194 .path-mod-data form {
195     margin-top: 10px;
198 .template_heading {
199     margin-top: 10px;
202 .breadcrumb-button {
203     margin-top: 4px;
206 .breadcrumb-button .singlebutton {
207     float: left;
208     margin-left: 4px;
211 .navbar-fixed-top,
212 .navbar-fixed-bottom {
213     z-index: 4030;
216 .ie .row-fluid .desktop-first-column {
217     margin-left: 0;
220 .langmenu form {
221     margin: 0;
223 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
224 canvas {
225     -ms-touch-action: auto;
228 div#dock {
229     display: none;
232 // Choice module
234 // Lesson module
236 /** General styles (scope: all of lesson) **/
237 .path-mod-lesson .invisiblefieldset.fieldsetfix {
238     display: block;
240 .path-mod-lesson .answeroption .checkbox label p {
241     display: inline;
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 // Dropdown styling.
255 .dropdown-menu {
256     margin-top: 11px;
259 // Survey module
261 .path-mod-survey {
262     .surveytable {
263         > tbody > tr:nth-of-type(odd) {
264             background-color: $table-bg;
265         }
267         > tbody > tr:nth-of-type(even) {
268             background-color: $table-bg-accent;
269         }
271         .rblock label {
272             text-align: center;
273         }
274     }
278 .nav .caret {
279     margin-left: 4px;
282 // Dividers
283 .nav {
284     .divider {
285         overflow: hidden;
286         width: 0;
287     }
290 // Usermenu
291 .usermenu {
292     float: right;
294     .login {
295         line-height: 2.25rem;
297         a {
298             color: $link-color;
299             &:hover,
300             &:focus {
301                 color: $link-hover-color;
302                 text-decoration: underline;
303             }
304         }
305     }
308 .userloggedinas,
309 .userswitchedrole,
310 .loginfailures {
311     .usermenu {
312         .usertext {
313             float: left;
314             text-align: right;
315             margin-right: $spacer / 2;
316             height: 35px;
317             .meta {
318                 display: block;
319                 font-size: $font-size-sm;
320             }
321         }
322         .avatar {
323             img {
324                 margin: 0;
325             }
326         }
327     }
330 .userloggedinas .usermenu {
331     .userbutton .avatars {
332         position: relative;
333         display: inline-block;
334         .avatar {
335             &.current {
336                 display: inline-block;
337                 position: absolute;
338                 bottom: 0;
339                 right: 0;
340                 width: 20px;
341                 height: 20px;
342                 border-radius: 50%;
343                 img {
344                     vertical-align: baseline;
345                 }
346             }
347             img {
348                 width: inherit;
349                 height: inherit;
350             }
351         }
352         .realuser {
353             width: 35px;
354             height: 35px;
355             display: inline-block;
356         }
357     }
360 @include media-breakpoint-down(sm) {
361     .usertext {
362         display: none;
363     }
366 // Quiz module
367 .path-mod-quiz .mod-quiz-edit-content {
368     // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
369     margin-bottom: 10rem;
372 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
373 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
374     width: auto;
376 #page-mod-quiz-mod #id_reviewoptionshdr .form-group {
377     float: left;
378     width: 20rem;
379     display: inline-block;
380     min-height: 12rem;
383 #page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
384     line-height: 1.5;
385     vertical-align: bottom;
387 #page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
388     float: left;
389     clear: left;
391 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
392     width: 90%;
393     height: 22px;
396 // Question navigation block.
397 .path-mod-quiz #mod_quiz_navblock {
398     .qnbutton {
399         text-decoration: none;
400         font-size: 14px;
401         line-height: 20px;
402         font-weight: normal;
403         background-color: $card-bg;
404         background-image: none;
405         height: 40px;
406         width: 30px;
407         border-radius: 3px;
408         border: 0;
409         overflow: visible;
410         margin: 0 6px 6px 0;
411     }
413     span.qnbutton {
414         cursor: default;
415         background-color: $input-bg-disabled;
416         color: $gray;
417     }
419     a.qnbutton:hover,
420     a.qnbutton:active,
421     a.qnbutton:focus {
422         text-decoration: underline;
423     }
425     .qnbutton .thispageholder {
426         border: 1px solid;
427         border-radius: 3px;
428         z-index: 1;
429     }
431     .qnbutton.thispage .thispageholder {
432         border-width: 3px;
433     }
435     .allquestionsononepage .qnbutton.thispage .thispageholder {
436         border-width: 1px;
437     }
439     .qnbutton.flagged .thispageholder {
440         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
441     }
443     .qnbutton .trafficlight {
444         border: 0;
445         background: $card-bg none center / 10px no-repeat scroll;
446         height: 20px;
447         margin-top: 20px;
448         border-radius: 0 0 3px 3px;
449     }
451     .qnbutton.notyetanswered .trafficlight,
452     .qnbutton.invalidanswer .trafficlight {
453         background-color: $card-bg;
454     }
456     .qnbutton.invalidanswer .trafficlight {
457         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
458     }
460     .qnbutton.correct .trafficlight {
461         background-image: url([[pix:theme|mod/quiz/checkmark]]);
462         background-color: $state-success-text;
463     }
465     .qnbutton.blocked .trafficlight {
466         background-image: url([[pix:core|t/locked]]);
467         background-color: $input-bg-disabled;
468     }
470     .qnbutton.notanswered .trafficlight,
471     .qnbutton.incorrect .trafficlight {
472         background-color: $state-danger-text;
473     }
475     .qnbutton.partiallycorrect .trafficlight {
476         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
477         background-color: $state-warning-text;
478     }
480     .qnbutton.complete .trafficlight,
481     .qnbutton.answersaved .trafficlight,
482     .qnbutton.requiresgrading .trafficlight {
483         background-color: $gray-light;
484     }
488 // Assign.
489 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
490     top: auto;
492 .path-mod-assign .no-overflow {
493     overflow: initial;
496 // This section removes the responsiveness from the form in the grading panel
497 $popout-header-font-size: 1.5 * $font-size-base;
498 // This can't be calculated from modal-title-padding because we are mixing px and rem units.
499 $popout-header-height: 4rem;
501 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
502     height: calc(100% - #{$popout-header-height});
505 .path-mod-assign [data-region="grade-panel"] {
506     padding-top: $spacer;
508 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
509 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
510     width: 100%;
511     padding: 0;
513 .path-mod-assign [data-region="grade-panel"] fieldset,
514 .path-mod-assign [data-region="grade-panel"] .fitem.row {
515     margin: 0;
518 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3 > .pull-xs-right {
519     float: none !important; /* stylelint-disable-line declaration-no-important */
522 .path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
523     width: 100%;
526 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
527     width: auto;
530 // Now styles for the popout sections.
532 .path-mod-assign [data-region="grade-panel"] .popout {
533     background-color: $modal-content-bg;
536 .path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
537     background-color: $card-bg;
538     @include border-radius($card-border-radius);
539     border: $card-border-width solid $card-border-color;
540     padding: $card-spacer-x;
541     margin-bottom: $spacer;
543 .path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
544     border-bottom: $hr-border-width solid $hr-border-color;
545     margin-bottom: $spacer;
549 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
550     @extend .modal-header;
551     font-size: $popout-header-font-size;
554 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
555     margin-top: 0;
558 // Now style the fixed header elements.
560 .path-mod-assign [data-region="assignment-info"] {
561     overflow-y: hidden;
564 .path-mod-assign [data-region="grading-navigation"] {
565     padding: 6px;
568 .path-mod-assign [data-region="grade-actions"] {
569     padding: 10px;
572 .path-mod-assign [data-region="user-info"] .img-rounded {
573     margin-top: 0;
576 .path-mod-assign [data-region="grading-navigation-panel"] {
577     height: 85px;
580 @media (max-width: 767px) {
581     .path-mod-assign [data-region="grading-navigation-panel"] {
582         height: auto;
583     }
584     .path-mod-assign [data-region="user-info"] {
585         margin-top: 1rem;
586     }
589 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
590     width: auto;
591     display: inline-block;
594 /**
595  * Assign feedback.
596  */
597 .assignfeedback_editpdf_widget * {
598     box-sizing: content-box;
601 .assignfeedback_editpdf_widget button {
602     box-sizing: border-box;
605 .assignfeedback_editpdf_widget .commentcolourbutton img {
606     border-width: 0;
609 .assignfeedback_editpdf_widget .label {
610     @extend .tag;
611     @extend .tag-info;
614 .assignfeedback_editpdf_menu {
615     padding: 0;
618 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
619     float: none;
621 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
622     width: 100%;
624 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
625     padding-left: $spacer;
626     padding-right: $spacer;
628 .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
629 .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
630     background-color: $card-bg;
633 /**
634  * Mod LTI.
635  */
636 .path-admin-mod-lti {
637     .btn .loader img,
638     #tool-list-loader-container .loader img {
639         height: auto;
640     }