weekly release 3.4dev
[moodle.git] / theme / boost / scss / moodle / modules.scss
CommitLineData
536f0460
DW
1/* modules.less */
2
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
7
8select {
9 width: auto;
10}
11
50302c40
DW
12.path-mod-feedback .feedback_form .col-form-label {
13 display: block !important; /* stylelint-disable-line declaration-no-important */
14}
f25185d7 15
63e4df60 16// Feedback module
ba5c5083
DW
17.path-mod-feedback .itemactions {
18 float: right;
19}
a5d4b548
DW
20.path-mod-feedback .itemhandle {
21 position: absolute;
22 right: 1rem;
23}
ba5c5083 24
536f0460
DW
25// Forum module
26
27.path-mod-forum .forumsearch {
28 input,
29 .helptooltip {
30 margin: 0 3px;
31 }
32}
33
34.path-mod-forum .forumheaderlist,
35.path-mod-forum .forumheaderlist td {
36 border: none;
37}
38
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 }
48
49 thead .header {
50 white-space: normal;
51 vertical-align: top;
52 }
53
54 thead .header.replies {
55 text-align: center;
56 }
f4143537 57
536f0460
DW
58 thead .header.lastpost {
59 text-align: right;
60 }
f4143537 61
536f0460 62 thead .header th,
f4143537 63 tbody .discussion td {
536f0460
DW
64 &.discussionsubscription {
65 width: 16px;
66 padding-left: 0.5em;
67 padding-right: 0.5em;
68 }
69 }
f4143537 70
536f0460 71 .discussion {
f4143537
DP
72 .author,
73 .replies,
74 .lastpost {
536f0460
DW
75 white-space: normal;
76 }
f4143537 77
536f0460
DW
78 .discussionsubscription,
79 .replies {
80 text-align: center;
81 }
f4143537 82
536f0460
DW
83 .topic,
84 .discussionsubscription,
85 .topic.starter,
86 .picture,
87 .author,
88 .replies,
89 .lastpost {
90 vertical-align: top;
91 }
92 }
93 }
01dc1c11
JP
94
95 // Style for the forum subscription mode node.
96 .subscriptionmode {
97 color: $body-color;
98 }
99
100 // Style for the currently selected subscription mode.
101 .activesetting {
102 color: $body-color;
103 font-weight: bold;
104 }
536f0460
DW
105}
106
107.forumpost {
108 @extend .card;
109 padding: 6px;
f4143537 110
536f0460
DW
111 .header {
112 margin-bottom: 3px;
113 }
f4143537 114
536f0460
DW
115 .picture img {
116 margin: 3px;
f4143537 117
536f0460
DW
118 &.userpicture {
119 margin-left: 3px;
120 margin-right: 10px;
121 }
122 }
f4143537 123
536f0460
DW
124 .content {
125 .posting.fullpost {
126 margin-top: 8px;
127 }
128 }
f4143537 129
536f0460
DW
130 .row {
131 .topic,
132 .content-mask,
133 .options {
134 margin-left: 48px;
135 }
f4143537 136
536f0460
DW
137 &.side {
138 clear: both;
139 }
140 }
141}
142
143.forumpost .row .left {
144 width: 48px;
145}
146
147.forumpost .options .commands {
148 margin-left: 0;
149}
150
151.forumpost .subject {
152 font-weight: bold;
153}
154
155// Override hardcoded forum modules styling
156.forumsearch input[type=text] {
5142f564 157 margin-bottom: 0;
536f0460
DW
158}
159
160#page-mod-forum-discuss .discussioncontrols {
161 width: auto;
162 margin: 0;
7d41ccf0
DW
163
164 .form-inline input {
165 margin-top: -1px;
166 }
536f0460
DW
167}
168
f4143537
DP
169.maincalendar .calendarmonth td,
170.maincalendar .calendarmonth th {
536f0460
DW
171 border: 1px dotted $table-border-color;
172}
173
174.path-grade-report-grader h1 {
175 text-align: inherit;
176}
177
178#page-mod-chat-gui_basic input#message {
179 max-width: 100%;
180}
181
182#page-mod-data-view #singleimage {
183 width: auto;
184}
185
186.path-mod-data form {
187 margin-top: 10px;
188}
189
190.template_heading {
191 margin-top: 10px;
192}
193
194.breadcrumb-button {
536f0460
DW
195 margin-top: 4px;
196}
197
198.breadcrumb-button .singlebutton {
199 float: left;
200 margin-left: 4px;
201}
202
203.navbar-fixed-top,
204.navbar-fixed-bottom {
205 z-index: 4030;
206}
207
208.ie .row-fluid .desktop-first-column {
209 margin-left: 0;
210}
f4143537 211
536f0460
DW
212.langmenu form {
213 margin: 0;
214}
536f0460
DW
215// contributed by Paul Hibbitts, see http://msdn.microsoft@mixin com/en-us/library/ie/jj583807(v=vs.85).aspx
216canvas {
217 -ms-touch-action: auto;
218}
219
220div#dock {
221 display: none;
222}
223
224// Choice module
225
536f0460
DW
226// Lesson module
227
63e4df60 228/** General styles (scope: all of lesson) **/
f4143537
DP
229.path-mod-lesson .invisiblefieldset.fieldsetfix {
230 display: block;
231}
536f0460
DW
232
233.path-mod-wiki .wiki_headingtitle,
234.path-mod-wiki .midpad,
235.path-mod-wiki .wiki_headingtime {
236 text-align: inherit;
237}
238
239.path-mod-wiki .wiki_contentbox {
240 width: 100%;
241}
242
137c289a
FM
243// Dropdown styling.
244.dropdown-menu {
245 margin-top: 11px;
246}
247
536f0460
DW
248// Survey module
249
250.path-mod-survey {
251 .surveytable {
f4143537
DP
252 > tbody > tr:nth-of-type(odd) {
253 background-color: $table-bg;
254 }
255
256 > tbody > tr:nth-of-type(even) {
257 background-color: $table-bg-accent;
258 }
259
260 .rblock label {
261 text-align: center;
262 }
536f0460 263 }
f4143537 264
536f0460
DW
265}
266
267.nav .caret {
268 margin-left: 4px;
269}
270
271// Dividers
272.nav {
273 .divider {
274 overflow: hidden;
275 width: 0;
536f0460
DW
276 }
277}
536f0460
DW
278
279// Usermenu
280.usermenu {
7001a3b2
FM
281 float: right;
282
536f0460 283 .login {
5f18da12 284 line-height: 2.25rem;
f4143537 285
536f0460 286 a {
5f18da12 287 color: $link-color;
536f0460
DW
288 &:hover,
289 &:focus {
5f18da12 290 color: $link-hover-color;
536f0460
DW
291 text-decoration: underline;
292 }
293 }
294 }
3313fdd6 295}
f4143537 296
7001a3b2 297.userloggedinas,
45cd101f
SL
298.userswitchedrole,
299.loginfailures {
536f0460 300 .usermenu {
7001a3b2
FM
301 .usertext {
302 float: left;
303 text-align: right;
304 margin-right: $spacer / 2;
305 height: 35px;
306 .meta {
536f0460 307 display: block;
7001a3b2 308 font-size: $font-size-sm;
536f0460 309 }
7001a3b2
FM
310 }
311 .avatar {
312 img {
fde35b8f 313 margin: 0;
536f0460 314 }
536f0460
DW
315 }
316 }
317}
318
7001a3b2
FM
319.userloggedinas .usermenu {
320 .userbutton .avatars {
321 position: relative;
322 display: inline-block;
323 .avatar {
324 &.current {
325 display: inline-block;
326 position: absolute;
327 bottom: 0;
328 right: 0;
329 width: 20px;
330 height: 20px;
331 border-radius: 50%;
332 img {
333 vertical-align: baseline;
334 }
536f0460 335 }
7001a3b2
FM
336 img {
337 width: inherit;
338 height: inherit;
536f0460
DW
339 }
340 }
7001a3b2
FM
341 .realuser {
342 width: 35px;
343 height: 35px;
344 display: inline-block;
536f0460
DW
345 }
346 }
347}
348
7001a3b2
FM
349@include media-breakpoint-down(sm) {
350 .usertext {
351 display: none;
536f0460
DW
352 }
353}
354
355// Quiz module
12d6dfc1
DW
356.path-mod-quiz .mod-quiz-edit-content {
357 // Force the quiz edit page to always be large enough to prevent scrolling when accessing the menu.
358 margin-bottom: 10rem;
359}
360
361#page-mod-quiz-mod #id_reviewoptionshdr .col-md-3,
362#page-mod-quiz-mod #id_reviewoptionshdr .col-md-9 {
363 width: auto;
364}
365#page-mod-quiz-mod #id_reviewoptionshdr .form-group {
366 float: left;
367 width: 20rem;
368 display: inline-block;
e283c6ca 369 min-height: 12rem;
12d6dfc1
DW
370}
371
372#page-mod-quiz-mod #id_reviewoptionshdr .btn-link {
373 line-height: 1.5;
374 vertical-align: bottom;
375}
376#page-mod-quiz-mod #id_reviewoptionshdr .form-inline {
377 float: left;
378 clear: left;
379}
e283c6ca 380#page-mod-quiz-mod #id_reviewoptionshdr .form-check {
12d6dfc1
DW
381 width: 90%;
382 height: 22px;
383}
536f0460
DW
384
385// Question navigation block.
386.path-mod-quiz #mod_quiz_navblock {
387 .qnbutton {
388 text-decoration: none;
389 font-size: 14px;
390 line-height: 20px;
391 font-weight: normal;
12d6dfc1 392 background-color: $card-bg;
536f0460
DW
393 background-image: none;
394 height: 40px;
395 width: 30px;
396 border-radius: 3px;
397 border: 0;
398 overflow: visible;
399 margin: 0 6px 6px 0;
400 }
f4143537 401
536f0460
DW
402 span.qnbutton {
403 cursor: default;
404 background-color: $input-bg-disabled;
405 color: $gray;
406 }
f4143537 407
536f0460
DW
408 a.qnbutton:hover,
409 a.qnbutton:active,
410 a.qnbutton:focus {
411 text-decoration: underline;
412 }
413
414 .qnbutton .thispageholder {
415 border: 1px solid;
416 border-radius: 3px;
417 z-index: 1;
418 }
f4143537 419
536f0460
DW
420 .qnbutton.thispage .thispageholder {
421 border-width: 3px;
422 }
f4143537 423
536f0460
DW
424 .allquestionsononepage .qnbutton.thispage .thispageholder {
425 border-width: 1px;
426 }
427
428 .qnbutton.flagged .thispageholder {
fde35b8f 429 background: transparent url([[pix:theme|mod/quiz/flag-on]]) 15px 0 no-repeat;
536f0460
DW
430 }
431
432 .qnbutton .trafficlight {
433 border: 0;
12d6dfc1 434 background: $card-bg none center / 10px no-repeat scroll;
536f0460
DW
435 height: 20px;
436 margin-top: 20px;
437 border-radius: 0 0 3px 3px;
438 }
439
440 .qnbutton.notyetanswered .trafficlight,
441 .qnbutton.invalidanswer .trafficlight {
12d6dfc1 442 background-color: $card-bg;
536f0460 443 }
f4143537 444
536f0460
DW
445 .qnbutton.invalidanswer .trafficlight {
446 background-image: url([[pix:theme|mod/quiz/warningtriangle]]);
447 }
f4143537 448
536f0460
DW
449 .qnbutton.correct .trafficlight {
450 background-image: url([[pix:theme|mod/quiz/checkmark]]);
451 background-color: $state-success-text;
452 }
f4143537 453
536f0460
DW
454 .qnbutton.blocked .trafficlight {
455 background-image: url([[pix:core|t/locked]]);
456 background-color: $input-bg-disabled;
457 }
f4143537 458
536f0460
DW
459 .qnbutton.notanswered .trafficlight,
460 .qnbutton.incorrect .trafficlight {
461 background-color: $state-danger-text;
462 }
f4143537 463
536f0460
DW
464 .qnbutton.partiallycorrect .trafficlight {
465 background-image: url([[pix:theme|mod/quiz/whitecircle]]);
466 background-color: $state-warning-text;
467 }
f4143537 468
536f0460
DW
469 .qnbutton.complete .trafficlight,
470 .qnbutton.answersaved .trafficlight,
471 .qnbutton.requiresgrading .trafficlight {
472 background-color: $gray-light;
473 }
474}
bffc0ef1 475
21a5c3c4
DW
476
477// Assign.
bffc0ef1
FM
478.path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
479 top: auto;
480}
ba5c5083
DW
481.path-mod-assign .no-overflow {
482 overflow: initial;
483}
f4143537 484
21a5c3c4
DW
485// This section removes the responsiveness from the form in the grading panel
486$popout-header-font-size: 1.5 * $font-size-base;
487// This can't be calculated from modal-title-padding because we are mixing px and rem units.
488$popout-header-height: 4rem;
f4143537 489
21a5c3c4
DW
490.path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
491 height: calc(100% - #{$popout-header-height});
492}
493
494.path-mod-assign [data-region="grade-panel"] {
495 padding-top: $spacer;
496}
497.path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3,
498.path-mod-assign [data-region="grade-panel"] .fitem > .col-md-9 {
499 width: 100%;
500 padding: 0;
501}
502.path-mod-assign [data-region="grade-panel"] fieldset,
503.path-mod-assign [data-region="grade-panel"] .fitem.row {
504 margin: 0;
505}
506
507.path-mod-assign [data-region="grade-panel"] .fitem > .col-md-3 > .pull-xs-right {
508 float: none !important; /* stylelint-disable-line declaration-no-important */
509}
510
511.path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
512 width: 100%;
63e4df60 513}
f4143537 514
21a5c3c4
DW
515.path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
516 width: auto;
517}
518
519// Now styles for the popout sections.
520
63e4df60
DW
521.path-mod-assign [data-region="grade-panel"] .popout {
522 background-color: $modal-content-bg;
523}
f4143537 524
21a5c3c4
DW
525.path-mod-assign [data-region="grade-panel"] .fitem.has-popout {
526 background-color: $card-bg;
527 @include border-radius($card-border-radius);
528 border: $card-border-width solid $card-border-color;
529 padding: $card-spacer-x;
530 margin-bottom: $spacer;
531}
532.path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
533 border-bottom: $hr-border-width solid $hr-border-color;
534 margin-bottom: $spacer;
63e4df60 535}
f4143537 536
21a5c3c4 537
63e4df60
DW
538.path-mod-assign [data-region="grade-panel"] .popout > .col-md-3 {
539 @extend .modal-header;
21a5c3c4 540 font-size: $popout-header-font-size;
63e4df60 541}
f4143537 542
63e4df60
DW
543.path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
544 margin-top: 0;
545}
f4143537 546
21a5c3c4 547// Now style the fixed header elements.
f4143537 548
ba5c5083
DW
549.path-mod-assign [data-region="assignment-info"] {
550 overflow-y: hidden;
551}
552
bffc0ef1
FM
553.path-mod-assign [data-region="grading-navigation"] {
554 padding: 6px;
555}
f4143537 556
bffc0ef1
FM
557.path-mod-assign [data-region="grade-actions"] {
558 padding: 10px;
559}
f4143537 560
bffc0ef1
FM
561.path-mod-assign [data-region="user-info"] .img-rounded {
562 margin-top: 0;
563}
f4143537 564
bffc0ef1
FM
565.path-mod-assign [data-region="grading-navigation-panel"] {
566 height: 85px;
567}
f4143537 568
21a5c3c4
DW
569@media (max-width: 767px) {
570 .path-mod-assign [data-region="grading-navigation-panel"] {
571 height: auto;
572 }
573 .path-mod-assign [data-region="user-info"] {
574 margin-top: 1rem;
575 }
576}
577
bffc0ef1
FM
578.path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
579 width: auto;
580 display: inline-block;
581}
582
583/**
584 * Assign feedback.
585 */
586.assignfeedback_editpdf_widget * {
587 box-sizing: content-box;
588}
f4143537 589
bffc0ef1
FM
590.assignfeedback_editpdf_widget button {
591 box-sizing: border-box;
592}
f4143537 593
bffc0ef1
FM
594.assignfeedback_editpdf_widget .commentcolourbutton img {
595 border-width: 0;
596}
f4143537 597
bffc0ef1
FM
598.assignfeedback_editpdf_widget .label {
599 @extend .tag;
600 @extend .tag-info;
601}
602
603.assignfeedback_editpdf_menu {
604 padding: 0;
605}
63e4df60 606
a5112298
DW
607.path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
608 float: none;
609}
610.path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
611 width: 100%;
612}
613.path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
614 padding-left: $spacer;
615 padding-right: $spacer;
616}
617.path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
618.path-mod-assign [data-region="grade-panel"] .showstudentdesc {
619 background-color: $card-bg;
620}
3d979f96
FM
621
622/**
623 * Mod LTI.
624 */
625.path-admin-mod-lti {
626 .btn .loader img,
627 #tool-list-loader-container .loader img {
628 height: auto;
629 }
630}