e7f31416a79886dd408bf8154b7c0a56ee5e8a73
[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;
153     .form-inline input {
154         margin-top: -1px;
155     }
158 .maincalendar .calendarmonth td,
159 .maincalendar .calendarmonth th {
160     border: 1px dotted $table-border-color;
163 .path-grade-report-grader h1 {
164     text-align: inherit;
167 #page-mod-chat-gui_basic input#message {
168     max-width: 100%;
171 #page-mod-data-view #singleimage {
172     width: auto;
175 .path-mod-data form {
176     margin-top: 10px;
179 .template_heading {
180     margin-top: 10px;
183 .breadcrumb-button {
184     float: right;
185     margin-top: 4px;
188 .breadcrumb-button .singlebutton {
189     float: left;
190     margin-left: 4px;
193 .navbar-fixed-top,
194 .navbar-fixed-bottom {
195     z-index: 4030;
198 .ie .row-fluid .desktop-first-column {
199     margin-left: 0;
202 .langmenu form {
203     margin: 0;
205 // contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
206 canvas {
207     -ms-touch-action: auto;
210 div#dock {
211     display: none;
214 // Choice module
216 // Lesson module
218 /** General styles (scope: all of lesson) **/
219 .path-mod-lesson .invisiblefieldset.fieldsetfix {
220     display: block;
223 .path-mod-wiki .wiki_headingtitle,
224 .path-mod-wiki .midpad,
225 .path-mod-wiki .wiki_headingtime {
226     text-align: inherit;
229 .path-mod-wiki .wiki_contentbox {
230     width: 100%;
233 // Dropdown styling.
234 .dropdown-menu {
235     margin-top: 11px;
238 // Survey module
240 .path-mod-survey {
241     .surveytable {
242         > tbody > tr:nth-of-type(odd) {
243             background-color: $table-bg;
244         }
246         > tbody > tr:nth-of-type(even) {
247             background-color: $table-bg-accent;
248         }
250         .rblock label {
251             text-align: center;
252         }
253     }
257 .nav .caret {
258     margin-left: 4px;
261 // Dividers
262 .nav {
263     .divider {
264         overflow: hidden;
265         width: 0;
266     }
269 // Usermenu
270 .usermenu {
271     float: right;
273     .login {
274         line-height: 2.25rem;
276         a {
277             color: $link-color;
278             &:hover,
279             &:focus {
280                 color: $link-hover-color;
281                 text-decoration: underline;
282             }
283         }
284     }
287 .userloggedinas,
288 .userswitchedrole {
289     .usermenu {
290         .usertext {
291             float: left;
292             text-align: right;
293             margin-right: $spacer / 2;
294             height: 35px;
295             .meta {
296                 display: block;
297                 font-size: $font-size-sm;
298             }
299         }
300         .avatar {
301             img {
302                 margin: 0;
303             }
304         }
305     }
308 .userloggedinas .usermenu {
309     .userbutton .avatars {
310         position: relative;
311         display: inline-block;
312         .avatar {
313             &.current {
314                 display: inline-block;
315                 position: absolute;
316                 bottom: 0;
317                 right: 0;
318                 width: 20px;
319                 height: 20px;
320                 border-radius: 50%;
321                 img {
322                     vertical-align: baseline;
323                 }
324             }
325             img {
326                 width: inherit;
327                 height: inherit;
328             }
329         }
330         .realuser {
331             width: 35px;
332             height: 35px;
333             display: inline-block;
334         }
335     }
338 @include media-breakpoint-down(sm) {
339     .usertext {
340         display: none;
341     }
344 // Quiz module
346 // Question navigation block.
347 .path-mod-quiz #mod_quiz_navblock {
348     .qnbutton {
349         text-decoration: none;
350         font-size: 14px;
351         line-height: 20px;
352         font-weight: normal;
353         background-color: $body-color;
354         background-image: none;
355         height: 40px;
356         width: 30px;
357         border-radius: 3px;
358         border: 0;
359         overflow: visible;
360         margin: 0 6px 6px 0;
361     }
363     span.qnbutton {
364         cursor: default;
365         background-color: $input-bg-disabled;
366         color: $gray;
367     }
369     a.qnbutton:hover,
370     a.qnbutton:active,
371     a.qnbutton:focus {
372         text-decoration: underline;
373     }
375     .qnbutton .thispageholder {
376         border: 1px solid;
377         border-radius: 3px;
378         z-index: 1;
379     }
381     .qnbutton.thispage .thispageholder {
382         border-width: 3px;
383     }
385     .allquestionsononepage .qnbutton.thispage .thispageholder {
386         border-width: 1px;
387     }
389     .qnbutton.flagged .thispageholder {
390         background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
391     }
393     .qnbutton .trafficlight {
394         border: 0;
395         background: $body-color none center / 10px no-repeat scroll;
396         height: 20px;
397         margin-top: 20px;
398         border-radius: 0 0 3px 3px;
399     }
401     .qnbutton.notyetanswered .trafficlight,
402     .qnbutton.invalidanswer .trafficlight {
403         background-color: $body-color;
404     }
406     .qnbutton.invalidanswer .trafficlight {
407         background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
408     }
410     .qnbutton.correct .trafficlight {
411         background-image: url([[pix:theme|mod/quiz/checkmark]]);
412         background-color: $state-success-text;
413     }
415     .qnbutton.blocked .trafficlight {
416         background-image: url([[pix:core|t/locked]]);
417         background-color: $input-bg-disabled;
418     }
420     .qnbutton.notanswered .trafficlight,
421     .qnbutton.incorrect .trafficlight {
422         background-color: $state-danger-text;
423     }
425     .qnbutton.partiallycorrect .trafficlight {
426         background-image: url([[pix:theme|mod/quiz/whitecircle]]);
427         background-color: $state-warning-text;
428     }
430     .qnbutton.complete .trafficlight,
431     .qnbutton.answersaved .trafficlight,
432     .qnbutton.requiresgrading .trafficlight {
433         background-color: $gray-light;
434     }
437 /**
438  * Assign.
439  */
440 .path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
441     top: auto;
443 .path-mod-assign .no-overflow {
444     overflow: initial;
447 .path-mod-assign [data-region="grade-panel"] .has-popout {
448     background-color: $card-bg;
450     @include border-radius($card-border-radius);
451     border: $card-border-width solid $card-border-color;
454 .path-mod-assign [data-region="grade-panel"] .popout {
455     background-color: $modal-content-bg;
458 .path-mod-assign [data-region="grade-panel"] .col-md-3 {
459     width: 100%;
462 .path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
463     @extend .modal-header;
464     font-size: 1.5rem;
467 .path-mod-assign [data-region="grade-panel"] [data-region="popout-button"] {
468     margin-top: 0.5rem;
471 .path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
472     margin-top: 0;
475 .path-mod-assign [data-region="grade-panel"] h3 {
476     margin: 10px 0;
477     line-height: 40px;
480 .path-mod-assign [data-region="assignment-info"] {
481     overflow-y: hidden;
484 .path-mod-assign [data-region="grading-navigation"] {
485     padding: 6px;
488 .path-mod-assign [data-region="grade-actions"] {
489     padding: 10px;
492 .path-mod-assign [data-region="user-info"] .img-rounded {
493     margin-top: 0;
496 .path-mod-assign [data-region="grading-navigation-panel"] {
497     height: 85px;
500 .path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
501     width: auto;
502     display: inline-block;
505 /**
506  * Assign feedback.
507  */
508 .assignfeedback_editpdf_widget * {
509     box-sizing: content-box;
512 .assignfeedback_editpdf_widget button {
513     box-sizing: border-box;
516 .assignfeedback_editpdf_widget .commentcolourbutton img {
517     border-width: 0;
520 .assignfeedback_editpdf_widget .label {
521     @extend .tag;
522     @extend .tag-info;
525 .assignfeedback_editpdf_menu {
526     padding: 0;
530 /**
531  * Mod LTI.
532  */
533 .path-admin-mod-lti {
534     .btn .loader img,
535     #tool-list-loader-container .loader img {
536         height: auto;
537     }