a96f62a12656389e609123498c230858e22fd9e1
[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 }
16 // Feedback module
17 .path-mod-feedback .itemactions {
18     float: right;
19 }
20 .path-mod-feedback .itemhandle {
21     position: absolute;
22     right: 1rem;
23 }
25 // Forum module
27 .path-mod-forum .forumsearch {
28     input,
29     .helptooltip {
30         margin: 0 3px;
31     }
32 }
34 .path-mod-forum .forumheaderlist,
35 .path-mod-forum .forumheaderlist td {
36     border: none;
37 }
39 .path-mod-forum {
40     .forumheaderlist {
41         thead .header,
42         tbody .discussion td {
43             white-space: normal;
44             vertical-align: top;
45             padding-left: 0.5em;
46             padding-right: 0.5em;
47         }
49         thead .header {
50             white-space: normal;
51             vertical-align: top;
52         }
54         thead .header.replies {
55             text-align: center;
56         }
58         thead .header.lastpost {
59             text-align: right;
60         }
62         thead .header th,
63         tbody .discussion td {
64             &.discussionsubscription {
65                 width: 16px;
66                 padding-left: 0.5em;
67                 padding-right: 0.5em;
68             }
69         }
71         .discussion {
72             .author,
73             .replies,
74             .lastpost {
75                 white-space: normal;
76             }
78             .discussionsubscription,
79             .replies {
80                 text-align: center;
81             }
83             .topic,
84             .discussionsubscription,
85             .topic.starter,
86             .picture,
87             .author,
88             .replies,
89             .lastpost {
90                 vertical-align: top;
91             }
92         }
93     }
94 }
96 .forumpost {
97     @extend .card;
98     padding: 6px;
100     .header {
101         margin-bottom: 3px;
102     }
104     .picture img {
105         margin: 3px;
107         &.userpicture {
108             margin-left: 3px;
109             margin-right: 10px;
110         }
111     }
113     .content {
114         .posting.fullpost {
115             margin-top: 8px;
116         }
117     }
119     .row {
120         .topic,
121         .content-mask,
122         .options {
123             margin-left: 48px;
124         }
126         &.side {
127             clear: both;
128         }
129     }
132 .forumpost .row .left {
133     width: 48px;
136 .forumpost .options .commands {
137     margin-left: 0;
140 .forumpost .subject {
141     font-weight: bold;
144 // Override hardcoded forum modules styling
145 .forumsearch input[type=text] {
146     margin-bottom: 0;
149 #page-mod-forum-discuss .discussioncontrols {
150     width: auto;
151     margin: 0;
154 .maincalendar .calendarmonth td,
155 .maincalendar .calendarmonth th {
156     border: 1px dotted $table-border-color;
159 .path-grade-report-grader h1 {
160     text-align: inherit;
163 #page-mod-chat-gui_basic input#message {
164     max-width: 100%;
167 #page-mod-data-view #singleimage {
168     width: auto;
171 .path-mod-data form {
172     margin-top: 10px;
175 .template_heading {
176     margin-top: 10px;
179 .breadcrumb-button {
180     float: right;
181     margin-top: 4px;
184 .breadcrumb-button .singlebutton {
185     float: left;
186     margin-left: 4px;
189 .navbar-fixed-top,
190 .navbar-fixed-bottom {
191     z-index: 4030;
194 .ie .row-fluid .desktop-first-column {
195     margin-left: 0;
198 .langmenu form {
199     margin: 0;
201 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
202 canvas {
203     -ms-touch-action: auto;
206 div#dock {
207     display: none;
210 // Choice module
212 .path-mod-choice {
213     .horizontal  .choices {
214         margin: 0;
216         .option {
217             display: inline-block;
218             padding: 10px;
219         }
220     }
222     .results .data {
223         white-space: normal;
224     }
227 // Lesson module
229 /** General styles (scope: all of lesson) **/
230 .path-mod-lesson .invisiblefieldset.fieldsetfix {
231     display: block;
234 .path-mod-wiki .wiki_headingtitle,
235 .path-mod-wiki .midpad,
236 .path-mod-wiki .wiki_headingtime {
237     text-align: inherit;
240 .path-mod-wiki .wiki_contentbox {
241     width: 100%;
244 // Dropdown styling.
245 .dropdown-menu {
246     margin-top: 11px;
249 // Survey module
251 .path-mod-survey {
252     .surveytable {
253         > tbody > tr:nth-of-type(odd) {
254             background-color: $table-bg;
255         }
257         > tbody > tr:nth-of-type(even) {
258             background-color: $table-bg-accent;
259         }
261         .rblock label {
262             text-align: center;
263         }
264     }
266     .resultgraph,
267     .reportsummary,
268     .studentreport,
269     .reportbuttons,
270     .centerpara {
271         text-align: center;
272     }
275 .nav .caret {
276     margin-left: 4px;
279 // Dividers
280 .nav {
281     .divider {
282         overflow: hidden;
283         width: 0;
284     }
287 // Usermenu
288 .usermenu {
289     float: right;
291     .login {
292         line-height: 2.25rem;
294         a {
295             color: $link-color;
296             &:hover,
297             &:focus {
298                 color: $link-hover-color;
299                 text-decoration: underline;
300             }
301         }
302     }
305 .userloggedinas,
306 .userswitchedrole {
307     .usermenu {
308         .usertext {
309             float: left;
310             text-align: right;
311             margin-right: $spacer / 2;
312             height: 35px;
313             .meta {
314                 display: block;
315                 font-size: $font-size-sm;
316             }
317         }
318         .avatar {
319             img {
320                 margin: 0;
321             }
322         }
323     }
326 .userloggedinas .usermenu {
327     .userbutton .avatars {
328         position: relative;
329         display: inline-block;
330         .avatar {
331             &.current {
332                 display: inline-block;
333                 position: absolute;
334                 bottom: 0;
335                 right: 0;
336                 width: 20px;
337                 height: 20px;
338                 border-radius: 50%;
339                 img {
340                     vertical-align: baseline;
341                 }
342             }
343             img {
344                 width: inherit;
345                 height: inherit;
346             }
347         }
348         .realuser {
349             width: 35px;
350             height: 35px;
351             display: inline-block;
352         }
353     }
356 @include media-breakpoint-down(sm) {
357     .usertext {
358         display: none;
359     }
362 // Quiz module
364 // Question navigation block.
365 .path-mod-quiz #mod_quiz_navblock {
366     .qnbutton {
367         text-decoration: none;
368         font-size: 14px;
369         line-height: 20px;
370         font-weight: normal;
371         background-color: $body-color;
372         background-image: none;
373         height: 40px;
374         width: 30px;
375         border-radius: 3px;
376         border: 0;
377         overflow: visible;
378         margin: 0 6px 6px 0;
379     }
381     span.qnbutton {
382         cursor: default;
383         background-color: $input-bg-disabled;
384         color: $gray;
385     }
387     a.qnbutton:hover,
388     a.qnbutton:active,
389     a.qnbutton:focus {
390         text-decoration: underline;
391     }
393     .qnbutton .thispageholder {
394         border: 1px solid;
395         border-radius: 3px;
396         z-index: 1;
397     }
399     .qnbutton.thispage .thispageholder {
400         border-width: 3px;
401     }
403     .allquestionsononepage .qnbutton.thispage .thispageholder {
404         border-width: 1px;
405     }
407     .qnbutton.flagged .thispageholder {
408         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
409     }
411     .qnbutton .trafficlight {
412         border: 0;
413         background: $body-color none center / 10px no-repeat scroll;
414         height: 20px;
415         margin-top: 20px;
416         border-radius: 0 0 3px 3px;
417     }
419     .qnbutton.notyetanswered .trafficlight,
420     .qnbutton.invalidanswer .trafficlight {
421         background-color: $body-color;
422     }
424     .qnbutton.invalidanswer .trafficlight {
425         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
426     }
428     .qnbutton.correct .trafficlight {
429         background-image: url([[pix:theme|mod/quiz/checkmark]]);
430         background-color: $state-success-text;
431     }
433     .qnbutton.blocked .trafficlight {
434         background-image: url([[pix:core|t/locked]]);
435         background-color: $input-bg-disabled;
436     }
438     .qnbutton.notanswered .trafficlight,
439     .qnbutton.incorrect .trafficlight {
440         background-color: $state-danger-text;
441     }
443     .qnbutton.partiallycorrect .trafficlight {
444         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
445         background-color: $state-warning-text;
446     }
448     .qnbutton.complete .trafficlight,
449     .qnbutton.answersaved .trafficlight,
450     .qnbutton.requiresgrading .trafficlight {
451         background-color: $gray-light;
452     }
455 /**
456  * Assign.
457  */
458 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
459     top: auto;
461 .path-mod-assign .no-overflow {
462     overflow: initial;
465 .path-mod-assign [data-region="grade-panel"] .has-popout {
466     background-color: $card-bg;
468     @include border-radius($card-border-radius);
469     border: $card-border-width solid $card-border-color;
472 .path-mod-assign [data-region="grade-panel"] .popout {
473     background-color: $modal-content-bg;
476 .path-mod-assign [data-region="grade-panel"] .col-md-3 {
477     width: 100%;
480 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
481     @extend .modal-header;
482     font-size: 1.5rem;
485 .path-mod-assign [data-region="grade-panel"] [data-region="popout-button"] {
486     margin-top: 0.5rem;
489 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
490     margin-top: 0;
493 .path-mod-assign [data-region="grade-panel"] h3 {
494     margin: 10px 0;
495     line-height: 40px;
498 .path-mod-assign [data-region="assignment-info"] {
499     overflow-y: hidden;
502 .path-mod-assign [data-region="grading-navigation"] {
503     padding: 6px;
506 .path-mod-assign [data-region="grade-actions"] {
507     padding: 10px;
510 .path-mod-assign [data-region="user-info"] .img-rounded {
511     margin-top: 0;
514 .path-mod-assign [data-region="grading-navigation-panel"] {
515     height: 85px;
518 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
519     width: auto;
520     display: inline-block;
523 /**
524  * Assign feedback.
525  */
526 .assignfeedback_editpdf_widget * {
527     box-sizing: content-box;
530 .assignfeedback_editpdf_widget button {
531     box-sizing: border-box;
534 .assignfeedback_editpdf_widget .commentcolourbutton img {
535     border-width: 0;
538 .assignfeedback_editpdf_widget .label {
539     @extend .tag;
540     @extend .tag-info;
543 .assignfeedback_editpdf_menu {
544     padding: 0;
548 /**
549  * Mod LTI.
550  */
551 .path-admin-mod-lti {
552     .btn .loader img,
553     #tool-list-loader-container .loader img {
554         height: auto;
555     }