Merge branch 'MDL-62059-master' of git://github.com/rezaies/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 .navbar-fixed-top,
214 .navbar-fixed-bottom {
215     z-index: 4030;
218 .ie .row-fluid .desktop-first-column {
219     margin-left: 0;
222 .langmenu form {
223     margin: 0;
225 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
226 canvas {
227     -ms-touch-action: auto;
230 div#dock {
231     display: none;
234 // Choice module
236 // Lesson module
238 /** General styles (scope: all of lesson) **/
239 .path-mod-lesson .invisiblefieldset.fieldsetfix {
240     display: block;
242 .path-mod-lesson .answeroption .checkbox label p {
243     display: inline;
245 #page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
246     white-space: normal;
249 .path-mod-wiki .wiki_headingtitle,
250 .path-mod-wiki .midpad,
251 .path-mod-wiki .wiki_headingtime {
252     text-align: inherit;
255 .path-mod-wiki .wiki_contentbox {
256     width: 100%;
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     .login {
293         line-height: 2.25rem;
295         a {
296             color: $link-color;
297             &:hover,
298             &:focus {
299                 color: $link-hover-color;
300                 text-decoration: underline;
301             }
302         }
303     }
306 .userloggedinas,
307 .userswitchedrole,
308 .loginfailures {
309     .usermenu {
310         .usertext {
311             float: left;
312             text-align: right;
313             margin-right: $spacer / 2;
314             height: 35px;
315             .meta {
316                 display: block;
317                 font-size: $font-size-sm;
318             }
319         }
320         .avatar {
321             img {
322                 margin: 0;
323             }
324         }
325     }
328 .userloggedinas .usermenu {
329     .userbutton .avatars {
330         position: relative;
331         display: inline-block;
332         .avatar {
333             &.current {
334                 display: inline-block;
335                 position: absolute;
336                 bottom: 0;
337                 right: 0;
338                 width: 20px;
339                 height: 20px;
340                 border-radius: 50%;
341                 img {
342                     vertical-align: baseline;
343                 }
344             }
345             img {
346                 width: inherit;
347                 height: inherit;
348             }
349         }
350         .realuser {
351             width: 35px;
352             height: 35px;
353             display: inline-block;
354         }
355     }
358 @include media-breakpoint-down(sm) {
359     .usertext {
360         display: none;
361     }
364 // Quiz module
365 .path-mod-quiz .mod-quiz-edit-content {
366     // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
367     margin-bottom: 10rem;
370 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
371 #page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
372     width: auto;
373     max-width: none;
375 #page-mod-quiz-mod #id_reviewoptionshdr .form-group {
376     float: left;
377     width: 20rem;
378     display: inline-block;
379     min-height: 12rem;
382 #page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
383     line-height: 1.5;
384     vertical-align: bottom;
386 #page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
387     float: left;
388     clear: left;
390 #page-mod-quiz-mod #id_reviewoptionshdr .form-check {
391     width: 90%;
392     height: 22px;
393     justify-content: flex-start;
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     }
487 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
488     height: 1.4em;
489     vertical-align: middle;
492 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer {
493     padding: 0;
494     margin: 0 0.4em;
497 // Assign.
498 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
499     top: auto;
501 .path-mod-assign .no-overflow {
502     overflow: initial;
505 // This section removes the responsiveness from the form in the grading panel
506 $popout-header-font-size: 1.5 * $font-size-base;
507 // This can't be calculated from modal-title-padding because we are mixing px and rem units.
508 $popout-header-height: 4rem;
510 .path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
511     height: calc(100% - #{$popout-header-height});
514 .path-mod-assign [data-region="grade-panel"] {
515     padding-top: $spacer;
517 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
518 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
519     width: 100%;
520     padding: 0;
521     max-width: 100%;
522     flex: none;
524 .path-mod-assign [data-region="grade-panel"] fieldset,
525 .path-mod-assign [data-region="grade-panel"] .fitem.row {
526     margin: 0;
529 .path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3 > .pull-xs-right {
530     float: none !important; /* stylelint-disable-line declaration-no-important */
533 .path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
534     width: 100%;
537 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
538     width: auto;
541 // Now styles for the popout sections.
543 .path-mod-assign [data-region="grade-panel"] .popout {
544     background-color: $modal-content-bg;
547 .path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
548     background-color: $card-bg;
549     @include border-radius($card-border-radius);
550     border: $card-border-width solid $card-border-color;
551     padding: $card-spacer-x;
552     margin-bottom: $spacer;
554 .path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
555     border-bottom: $hr-border-width solid $hr-border-color;
556     margin-bottom: $spacer;
560 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
561     @extend .modal-header;
562     font-size: $popout-header-font-size;
565 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
566     margin-top: 0;
569 // Now style the fixed header elements.
571 .path-mod-assign [data-region="assignment-info"] {
572     overflow-y: hidden;
575 .path-mod-assign [data-region="grading-navigation"] {
576     padding: 6px;
579 .path-mod-assign [data-region="grade-actions"] {
580     padding: 10px;
583 .path-mod-assign [data-region="user-info"] .img-rounded {
584     margin-top: 0;
587 .path-mod-assign [data-region="grading-navigation-panel"] {
588     height: 85px;
591 @media (max-width: 767px) {
592     .path-mod-assign [data-region="grading-navigation-panel"] {
593         height: auto;
594     }
595     .path-mod-assign [data-region="user-info"] {
596         margin-top: 1rem;
597     }
600 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
601     width: auto;
602     display: inline-block;
605 /**
606  * Assign feedback.
607  */
608 .assignfeedback_editpdf_widget * {
609     box-sizing: content-box;
612 .assignfeedback_editpdf_widget button {
613     box-sizing: border-box;
616 .assignfeedback_editpdf_widget .commentcolourbutton img {
617     border-width: 0;
620 .assignfeedback_editpdf_widget .label {
621     @extend .tag;
622     @extend .tag-info;
625 .assignfeedback_editpdf_menu {
626     padding: 0;
629 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
630     float: none;
632 .path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
633     width: 100%;
635 .path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
636     padding-left: $spacer;
637     padding-right: $spacer;
639 .path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
640 .path-mod-assign [data-region="grade-panel"] .showstudentdesc {
641     background-color: $card-bg;
644 /**
645  * Mod LTI.
646  */
647 .path-admin-mod-lti {
648     .btn .loader img,
649     #tool-list-loader-container .loader img {
650         height: auto;
651     }