Merge branch 'MDL-54871' of https://github.com/bostelm/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 .path-mod-feedback .feedback_form .col-form-label {
13     display: block !important; /* stylelint-disable-line declaration-no-important */
14 }
15 // Feedback module
16 .path-mod-feedback .itemactions {
17     float: right;
18 }
19 .path-mod-feedback .itemhandle {
20     position: absolute;
21     right: 1rem;
22 }
24 // Forum module
26 .path-mod-forum .forumsearch {
27     input,
28     .helptooltip {
29         margin: 0 3px;
30     }
31 }
33 .path-mod-forum .forumheaderlist,
34 .path-mod-forum .forumheaderlist td {
35     border: none;
36 }
38 .path-mod-forum {
39     .forumheaderlist {
40         thead .header,
41         tbody .discussion td {
42             white-space: normal;
43             vertical-align: top;
44             padding-left: 0.5em;
45             padding-right: 0.5em;
46         }
48         thead .header {
49             white-space: normal;
50             vertical-align: top;
51         }
53         thead .header.replies {
54             text-align: center;
55         }
57         thead .header.lastpost {
58             text-align: right;
59         }
61         thead .header th,
62         tbody .discussion td {
63             &.discussionsubscription {
64                 width: 16px;
65                 padding-left: 0.5em;
66                 padding-right: 0.5em;
67             }
68         }
70         .discussion {
71             .author,
72             .replies,
73             .lastpost {
74                 white-space: normal;
75             }
77             .discussionsubscription,
78             .replies {
79                 text-align: center;
80             }
82             .topic,
83             .discussionsubscription,
84             .topic.starter,
85             .picture,
86             .author,
87             .replies,
88             .lastpost {
89                 vertical-align: top;
90             }
91         }
92     }
93 }
95 .forumpost {
96     @extend .card;
97     padding: 6px;
99     .header {
100         margin-bottom: 3px;
101     }
103     .picture img {
104         margin: 3px;
106         &.userpicture {
107             margin-left: 3px;
108             margin-right: 10px;
109         }
110     }
112     .content {
113         .posting.fullpost {
114             margin-top: 8px;
115         }
116     }
118     .row {
119         .topic,
120         .content-mask,
121         .options {
122             margin-left: 48px;
123         }
125         &.side {
126             clear: both;
127         }
128     }
131 .forumpost .row .left {
132     width: 48px;
135 .forumpost .options .commands {
136     margin-left: 0;
139 .forumpost .subject {
140     font-weight: bold;
143 // Override hardcoded forum modules styling
144 .forumsearch input[type=text] {
145     margin-bottom: 0;
148 #page-mod-forum-discuss .discussioncontrols {
149     width: auto;
150     margin: 0;
152     .form-inline input {
153         margin-top: -1px;
154     }
157 .maincalendar .calendarmonth td,
158 .maincalendar .calendarmonth th {
159     border: 1px dotted $table-border-color;
162 .path-grade-report-grader h1 {
163     text-align: inherit;
166 #page-mod-chat-gui_basic input#message {
167     max-width: 100%;
170 #page-mod-data-view #singleimage {
171     width: auto;
174 .path-mod-data form {
175     margin-top: 10px;
178 .template_heading {
179     margin-top: 10px;
182 .breadcrumb-button {
183     float: right;
184     margin-top: 4px;
187 .breadcrumb-button .singlebutton {
188     float: left;
189     margin-left: 4px;
192 .navbar-fixed-top,
193 .navbar-fixed-bottom {
194     z-index: 4030;
197 .ie .row-fluid .desktop-first-column {
198     margin-left: 0;
201 .langmenu form {
202     margin: 0;
204 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
205 canvas {
206     -ms-touch-action: auto;
209 div#dock {
210     display: none;
213 // Choice module
215 .path-mod-choice {
216     .horizontal  .choices {
217         margin: 0;
219         .option {
220             display: inline-block;
221             padding: 10px;
222         }
223     }
225     .results .data {
226         white-space: normal;
227     }
230 // Lesson module
232 /** General styles (scope: all of lesson) **/
233 .path-mod-lesson .invisiblefieldset.fieldsetfix {
234     display: block;
237 .path-mod-wiki .wiki_headingtitle,
238 .path-mod-wiki .midpad,
239 .path-mod-wiki .wiki_headingtime {
240     text-align: inherit;
243 .path-mod-wiki .wiki_contentbox {
244     width: 100%;
247 // Dropdown styling.
248 .dropdown-menu {
249     margin-top: 11px;
252 // Survey module
254 .path-mod-survey {
255     .surveytable {
256         > tbody > tr:nth-of-type(odd) {
257             background-color: $table-bg;
258         }
260         > tbody > tr:nth-of-type(even) {
261             background-color: $table-bg-accent;
262         }
264         .rblock label {
265             text-align: center;
266         }
267     }
269     .resultgraph,
270     .reportsummary,
271     .studentreport,
272     .reportbuttons,
273     .centerpara {
274         text-align: center;
275     }
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     .usermenu {
311         .usertext {
312             float: left;
313             text-align: right;
314             margin-right: $spacer / 2;
315             height: 35px;
316             .meta {
317                 display: block;
318                 font-size: $font-size-sm;
319             }
320         }
321         .avatar {
322             img {
323                 margin: 0;
324             }
325         }
326     }
329 .userloggedinas .usermenu {
330     .userbutton .avatars {
331         position: relative;
332         display: inline-block;
333         .avatar {
334             &.current {
335                 display: inline-block;
336                 position: absolute;
337                 bottom: 0;
338                 right: 0;
339                 width: 20px;
340                 height: 20px;
341                 border-radius: 50%;
342                 img {
343                     vertical-align: baseline;
344                 }
345             }
346             img {
347                 width: inherit;
348                 height: inherit;
349             }
350         }
351         .realuser {
352             width: 35px;
353             height: 35px;
354             display: inline-block;
355         }
356     }
359 @include media-breakpoint-down(sm) {
360     .usertext {
361         display: none;
362     }
365 // Quiz module
367 // Question navigation block.
368 .path-mod-quiz #mod_quiz_navblock {
369     .qnbutton {
370         text-decoration: none;
371         font-size: 14px;
372         line-height: 20px;
373         font-weight: normal;
374         background-color: $body-color;
375         background-image: none;
376         height: 40px;
377         width: 30px;
378         border-radius: 3px;
379         border: 0;
380         overflow: visible;
381         margin: 0 6px 6px 0;
382     }
384     span.qnbutton {
385         cursor: default;
386         background-color: $input-bg-disabled;
387         color: $gray;
388     }
390     a.qnbutton:hover,
391     a.qnbutton:active,
392     a.qnbutton:focus {
393         text-decoration: underline;
394     }
396     .qnbutton .thispageholder {
397         border: 1px solid;
398         border-radius: 3px;
399         z-index: 1;
400     }
402     .qnbutton.thispage .thispageholder {
403         border-width: 3px;
404     }
406     .allquestionsononepage .qnbutton.thispage .thispageholder {
407         border-width: 1px;
408     }
410     .qnbutton.flagged .thispageholder {
411         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
412     }
414     .qnbutton .trafficlight {
415         border: 0;
416         background: $body-color none center / 10px no-repeat scroll;
417         height: 20px;
418         margin-top: 20px;
419         border-radius: 0 0 3px 3px;
420     }
422     .qnbutton.notyetanswered .trafficlight,
423     .qnbutton.invalidanswer .trafficlight {
424         background-color: $body-color;
425     }
427     .qnbutton.invalidanswer .trafficlight {
428         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
429     }
431     .qnbutton.correct .trafficlight {
432         background-image: url([[pix:theme|mod/quiz/checkmark]]);
433         background-color: $state-success-text;
434     }
436     .qnbutton.blocked .trafficlight {
437         background-image: url([[pix:core|t/locked]]);
438         background-color: $input-bg-disabled;
439     }
441     .qnbutton.notanswered .trafficlight,
442     .qnbutton.incorrect .trafficlight {
443         background-color: $state-danger-text;
444     }
446     .qnbutton.partiallycorrect .trafficlight {
447         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
448         background-color: $state-warning-text;
449     }
451     .qnbutton.complete .trafficlight,
452     .qnbutton.answersaved .trafficlight,
453     .qnbutton.requiresgrading .trafficlight {
454         background-color: $gray-light;
455     }
458 /**
459  * Assign.
460  */
461 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
462     top: auto;
464 .path-mod-assign .no-overflow {
465     overflow: initial;
468 .path-mod-assign [data-region="grade-panel"] .has-popout {
469     background-color: $card-bg;
471     @include border-radius($card-border-radius);
472     border: $card-border-width solid $card-border-color;
475 .path-mod-assign [data-region="grade-panel"] .popout {
476     background-color: $modal-content-bg;
479 .path-mod-assign [data-region="grade-panel"] .col-md-3 {
480     width: 100%;
483 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
484     @extend .modal-header;
485     font-size: 1.5rem;
488 .path-mod-assign [data-region="grade-panel"] [data-region="popout-button"] {
489     margin-top: 0.5rem;
492 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
493     margin-top: 0;
496 .path-mod-assign [data-region="grade-panel"] h3 {
497     margin: 10px 0;
498     line-height: 40px;
501 .path-mod-assign [data-region="assignment-info"] {
502     overflow-y: hidden;
505 .path-mod-assign [data-region="grading-navigation"] {
506     padding: 6px;
509 .path-mod-assign [data-region="grade-actions"] {
510     padding: 10px;
513 .path-mod-assign [data-region="user-info"] .img-rounded {
514     margin-top: 0;
517 .path-mod-assign [data-region="grading-navigation-panel"] {
518     height: 85px;
521 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
522     width: auto;
523     display: inline-block;
526 /**
527  * Assign feedback.
528  */
529 .assignfeedback_editpdf_widget * {
530     box-sizing: content-box;
533 .assignfeedback_editpdf_widget button {
534     box-sizing: border-box;
537 .assignfeedback_editpdf_widget .commentcolourbutton img {
538     border-width: 0;
541 .assignfeedback_editpdf_widget .label {
542     @extend .tag;
543     @extend .tag-info;
546 .assignfeedback_editpdf_menu {
547     padding: 0;
551 /**
552  * Mod LTI.
553  */
554 .path-admin-mod-lti {
555     .btn .loader img,
556     #tool-list-loader-container .loader img {
557         height: auto;
558     }