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