weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / question.scss
CommitLineData
536f0460
DW
1/* Question */
2.questionbank h2 {
3 margin-top: 0;
4}
f4143537 5
536f0460
DW
6.questioncategories h3 {
7 margin-top: 0;
8}
f4143537 9
536f0460
DW
10#chooseqtypebox {
11 margin-top: 1em;
12}
f4143537 13
536f0460
DW
14#chooseqtype h3 {
15 margin: 0 0 0.3em;
16}
f4143537 17
536f0460
DW
18#chooseqtype .instruction {
19 display: none;
20}
f4143537 21
536f0460
DW
22#chooseqtype .fakeqtypes {
23 border-top: 1px solid silver;
24}
f4143537 25
536f0460
DW
26#chooseqtype .qtypeoption {
27 margin-bottom: 0.5em;
28}
f4143537 29
536f0460
DW
30#chooseqtype label {
31 display: block;
32}
f4143537 33
536f0460
DW
34#chooseqtype .qtypename img {
35 padding: 0 0.3em;
36}
f4143537 37
536f0460
DW
38#chooseqtype .qtypename {
39 display: inline-table;
40 width: 16em;
41}
f4143537 42
536f0460
DW
43#chooseqtype .qtypesummary {
44 display: block;
45 margin: 0 2em;
46}
f4143537 47
536f0460
DW
48#chooseqtype .submitbuttons {
49 margin: 0.7em 0;
50 text-align: center;
51}
f4143537 52
536f0460
DW
53#qtypechoicecontainer {
54 display: none;
55}
f4143537 56
536f0460
DW
57#qtypechoicecontainer_c.yui-panel-container.shadow .underlay {
58 background: none;
59}
f4143537 60
536f0460
DW
61#qtypechoicecontainer.yui-panel .hd {
62 color: #333;
63 letter-spacing: 1px;
64 text-shadow: 1px 1px 1px #fff;
f4143537 65
536f0460
DW
66 @include border-top-radius(10px);
67 border: 1px solid #ccc;
68 border-bottom: 1px solid #bbb;
f4143537 69
da92b738 70 @include gradient-y(#fff, #ccc);
536f0460 71}
f4143537 72
536f0460
DW
73#qtypechoicecontainer {
74 font-size: 12px;
75 color: #333;
f4143537
DP
76 background: #f2f2f2;
77
536f0460
DW
78 @include border-radius(10px);
79 border: 1px solid #ccc;
80 border-top: 0 none;
f4143537 81
536f0460
DW
82 @include box-shadow(5px 5px 20px 0 #666);
83}
f4143537 84
536f0460
DW
85#qtypechoicecontainer #chooseqtype {
86 width: 40em;
87}
f4143537 88
536f0460
DW
89#chooseqtypehead h3 {
90 margin: 0;
91 font-weight: normal;
92}
f4143537 93
536f0460
DW
94#chooseqtype .qtypes {
95 position: relative;
96 border-bottom: 1px solid #bbb;
97 padding: 0.24em 0;
98}
f4143537 99
536f0460
DW
100#chooseqtype .alloptions {
101 overflow-x: hidden;
102 overflow-y: auto;
536f0460 103 max-height: calc(100vh - 15em);
536f0460
DW
104 width: 60%;
105}
f4143537 106
536f0460
DW
107#chooseqtype .qtypeoption {
108 margin-bottom: 0;
109 padding: 0.3em 0.3em 0.3em 1.6em;
110}
f4143537 111
536f0460
DW
112#chooseqtype .qtypeoption img {
113 vertical-align: text-bottom;
114 padding-left: 1em;
115 padding-right: 0.5em;
116}
f4143537 117
536f0460
DW
118#chooseqtype .selected {
119 background-color: #fff;
f4143537 120
fde35b8f 121 @include box-shadow(0 0 10px 0 #ccc);
536f0460 122}
f4143537 123
536f0460
DW
124#chooseqtype .instruction,
125#chooseqtype .qtypesummary {
126 display: none;
127 position: absolute;
128 top: 0;
129 right: 0;
130 bottom: 0;
131 left: 60%;
132 margin: 0;
133 overflow-x: hidden;
134 overflow-y: auto;
135 padding: 1.5em 1.6em;
136 background-color: #fff;
536f0460 137}
f4143537 138
536f0460
DW
139#chooseqtype .instruction,
140#chooseqtype .selected .qtypesummary {
141 display: block;
142}
f4143537 143
536f0460
DW
144#categoryquestions {
145 margin: 0;
f4143537 146
536f0460
DW
147 td,
148 th {
149 padding: 0 0.2em;
150 }
f4143537 151
536f0460
DW
152 th {
153 text-align: left;
154 font-weight: normal;
155 }
f4143537 156
12bc6054
BB
157 & > tbody > tr.r1 {
158 background-color: $table-accent-bg;
159 }
160
161 & > tbody > tr.highlight {
162 border: $border-width solid $info;
163 }
164
536f0460
DW
165 .checkbox {
166 padding-left: 5px;
167 }
f4143537 168
536f0460 169 .checkbox input[type="checkbox"] {
fde35b8f 170 margin-left: 0;
536f0460
DW
171 float: none;
172 }
f4143537 173
536f0460
DW
174 .iconcol {
175 padding: 3px;
a5e92a41
FM
176 box-sizing: content-box;
177
178 .icon {
179 margin: 0;
180 width: 12px;
181 height: 12px;
182 }
536f0460 183 }
f4143537 184
536f0460
DW
185 label {
186 margin: 0;
f0fca20b 187 display: block;
536f0460 188 }
a0e60262
LB
189
190 .header {
191 text-align: left;
192 }
536f0460 193}
f4143537 194
536f0460
DW
195#page-mod-quiz-edit {
196 div.questionbankwindow div.header {
197 margin: 0;
198 }
f4143537 199
536f0460
DW
200 div.questionbankwindow.block {
201 padding: 0;
202 }
203}
f4143537 204
536f0460
DW
205.questionbank .singleselect {
206 margin: 0;
207}
208/* Question editing form */
209#combinedfeedbackhdr div.fhtmleditor {
210 padding: 0;
211}
f4143537 212
536f0460
DW
213#combinedfeedbackhdr div.fcheckbox {
214 margin-bottom: 1em;
215}
f4143537 216
536f0460
DW
217#multitriesheader div.fitem_feditor {
218 margin-top: 1em;
219}
f4143537 220
536f0460
DW
221#multitriesheader div.fitem_fgroup {
222 margin-bottom: 1em;
223}
f4143537 224
536f0460
DW
225#multitriesheader div.fitem_fgroup fieldset.felement label {
226 margin-left: 0.3em;
227 margin-right: 0.3em;
228}
f4143537 229
5d2f105e
FM
230body.path-question-type {
231 /* Hacks to display the labels within a form group. */
a728edcb 232 .form-group .sr-only:not(legend) {
5d2f105e
FM
233 position: static;
234 width: auto;
235 height: auto;
236 padding: 0;
5f29d191 237 margin: 0 0.5rem 0 0;
5d2f105e
FM
238 overflow: visible;
239 clip: auto;
5f29d191 240 clip-path: none;
5d2f105e
FM
241 border: 0;
242 }
536f0460 243}
f4143537 244
536f0460
DW
245.que {
246 clear: left;
247 text-align: left;
248 margin: 0 auto 1.8em auto;
249}
f4143537 250
536f0460
DW
251.que .info {
252 float: left;
253 width: 7em;
254 padding: 0.5em;
255 margin-bottom: 1.8em;
3b7f6333 256 background-color: $gray-100;
4394f9e3 257 border: 1px solid darken($gray-300, 7%);
f4143537 258
536f0460
DW
259 @include border-radius(2px);
260}
f4143537 261
536f0460
DW
262.que h3.no {
263 margin: 0;
264 font-size: 0.8em;
265 line-height: 1;
266}
f4143537 267
536f0460
DW
268.que span.qno {
269 font-size: 1.5em;
270 font-weight: bold;
271}
f4143537 272
536f0460
DW
273.que .info > div {
274 font-size: 0.8em;
275 margin-top: 0.7em;
276}
f4143537 277
536f0460
DW
278.que .info .questionflag.editable {
279 cursor: pointer;
280}
f4143537 281
536f0460
DW
282.que .info .editquestion img,
283.que .info .questionflag img,
284.que .info .questionflag input {
285 vertical-align: bottom;
286}
f4143537 287
536f0460
DW
288.que .content {
289 margin: 0 0 0 8.5em;
290}
f4143537 291
536f0460
DW
292.que .formulation,
293.que .outcome,
294.que .comment {
aa100b76
BB
295 position: relative;
296 padding: $alert-padding-y $alert-padding-x;
297 margin-bottom: $alert-margin-bottom;
298 border: $alert-border-width solid transparent;
299 @include border-radius($alert-border-radius);
536f0460 300}
12d6dfc1
DW
301.que .outcome,
302.que .comment {
3b7f6333
JP
303 @include alert-variant(theme-color-level('warning', $alert-bg-level), theme-color-level('warning', $alert-border-level), theme-color-level('warning', $alert-color-level - 0.9)); /* stylelint-disable-line max-line-length */
304 // Darken link colour inside comments for better colour contrast against regular text.
305 a {
306 color: darken($link-color, 30%);
307 }
12d6dfc1 308}
f4143537 309
536f0460 310.que .formulation {
3b7f6333 311 @include alert-variant(theme-color-level('info', $alert-bg-level - 1.30), theme-color-level('info', $alert-border-level), theme-color-level('info', $alert-color-level + 4)); /* stylelint-disable-line max-line-length */
536f0460 312}
f4143537 313
1d8d3a01
LB
314.que.multichoice .answer div.r0 .icon.fa-check,
315.que.multichoice .answer div.r1 .icon.fa-check,
316.que.multichoice .answer div.r0 .icon.fa-remove,
317.que.multichoice .answer div.r1 .icon.fa-remove {
318 text-indent: 0;
319}
320
536f0460
DW
321.formulation input[type="text"],
322.formulation select {
323 width: auto;
324 vertical-align: baseline;
325}
f4143537 326
8c00d189
LB
327.que.multianswer .formulation .yui3-widget-positioned {
328 box-sizing: content-box;
89cf38c6
AN
329 .feedbackspan {
330 width: inherit;
331 max-width: inherit;
332 }
8c00d189
LB
333}
334
536f0460
DW
335.path-mod-quiz input[size] {
336 width: auto;
3fd04d52 337 max-width: 100%;
536f0460 338}
f4143537 339
536f0460 340.que .comment {
aa100b76 341 @include alert-variant(theme-color-level('success', $alert-bg-level), theme-color-level('success', $alert-border-level), theme-color-level('success', $alert-color-level)); /* stylelint-disable-line max-line-length */
536f0460 342}
f4143537 343
536f0460
DW
344.que .ablock {
345 margin: 0.7em 0 0.3em 0;
346}
f4143537 347
536f0460
DW
348.que .im-controls {
349 margin-top: 0.5em;
350 text-align: left;
351}
f4143537 352
536f0460
DW
353.que .specificfeedback,
354.que .generalfeedback,
f0aef7ab 355.que .numpartscorrect
536f0460
DW
356.que .rightanswer,
357.que .im-feedback,
358.que .feedback,
359.que p {
360 margin: 0 0 0.5em;
361}
f4143537 362
f0aef7ab 363.que .correctness {
f0aef7ab 364 &.correct {
250ff98b 365 @include badge-variant($success);
f0aef7ab
LB
366 }
367 &.partiallycorrect {
250ff98b 368 @include badge-variant($warning);
f0aef7ab
LB
369 }
370 &.notanswered,
371 &.incorrect {
250ff98b 372 @include badge-variant($danger);
f0aef7ab
LB
373 }
374}
375
536f0460
DW
376.que .qtext {
377 margin-bottom: 1.5em;
378}
f4143537 379
536f0460 380.que .validationerror {
aa100b76 381 color: map-get($theme-colors, 'danger');
536f0460
DW
382}
383// copied from .formFieldState in mixin.less
384// and made more specific
f4143537 385
536f0460
DW
386.que .grading,
387.que .comment,
388.que .commentlink,
389.que .history {
390 margin-top: 0.5em;
391}
f4143537 392
536f0460
DW
393.que .history h3 {
394 margin: 0 0 0.2em;
395 font-size: 1em;
396}
f4143537 397
536f0460
DW
398.que .history table {
399 width: 100%;
400 margin: 0;
401}
f4143537 402
536f0460
DW
403.que .history .current {
404 font-weight: bold;
405}
f4143537 406
536f0460
DW
407.que .questioncorrectnessicon {
408 vertical-align: text-bottom;
409}
f4143537 410
76a49e4a
TH
411body.jsenabled .questionflag input[type=checkbox] {
412 display: none;
413}
414
415.que .questionflagimage {
536f0460 416 padding-right: 3px;
c233d7a2
LB
417 height: 16px;
418 width: 16px;
536f0460 419}
f4143537 420
536f0460
DW
421.importerror {
422 margin-top: 10px;
423 border-bottom: 1px solid #555;
424}
f4143537 425
536f0460
DW
426.mform .que.comment .fitemtitle {
427 width: 20%;
428}
f4143537 429
536f0460
DW
430#page-question-preview #techinfo {
431 margin: 1em 0;
432}
433
39652702 434#page-question-preview .collapsibleregion {
435 .collapsibleregioncaption,
436 .collapsibleregionextracontent {
437 display: inline-block;
438 }
439}
440
536f0460
DW
441// imported from quiz.css
442
6261200f
FM
443#page-mod-quiz-edit ul.slots .activityinstance {
444 > a {
92bc86e4 445 display: flex;
94fd778d 446 max-width: 100%;
92bc86e4 447 align-items: center;
6261200f
FM
448 text-indent: 0;
449 padding-left: 0;
450 }
451 img.activityicon {
452 margin-left: 0;
87174e0a
LB
453 width: 16px;
454 height: 16px;
455 padding-right: 4px;
456 }
457}
458
459#page-mod-quiz-edit .activity {
460 img.activityicon {
461 vertical-align: text-top;
6261200f
FM
462 }
463}
464
536f0460
DW
465#page-mod-quiz-edit .box.generalbox.questionbank {
466 padding: 0.5em;
467}
468
469#page-mod-quiz-edit .questionbank .categorypagingbarcontainer,
470#page-mod-quiz-edit .questionbank .categoryquestionscontainer,
471#page-mod-quiz-edit .questionbank .choosecategory {
472 padding: 0;
473}
474
475#page-mod-quiz-edit .questionbank .choosecategory select {
476 width: 100%;
477}
478
479#page-mod-quiz-edit div.questionbank .categoryquestionscontainer {
480 background: transparent;
481}
f4143537 482
536f0460
DW
483#page-mod-quiz-edit .questionbankwindow div.header {
484 color: #444;
485 text-shadow: none;
f4143537 486
536f0460
DW
487 @include border-top-radius(4px);
488 margin: 0 -10px 0 -10px;
489 padding: 2px 10px 2px 10px;
490 background: transparent; /* Old browsers */
491}
492
493#page-mod-quiz-edit .questionbankwindow div.header a:link,
494#page-mod-quiz-edit .questionbankwindow div.header a:visited {
495 color: $link-color;
496}
497
498#page-mod-quiz-edit .questionbankwindow div.header a:hover {
499 color: $link-hover-color;
500}
501
502#page-mod-quiz-edit .createnewquestion {
503 padding: 0.3em 0;
f4143537
DP
504
505 div,
506 input {
536f0460
DW
507 margin: 0;
508 }
509}
510
511#page-mod-quiz-edit .questionbankwindow div.header .title {
512 color: $body-color;
513}
514
515#page-mod-quiz-edit div.container div.generalbox {
516 background-color: transparent;
517 padding: 1.5em;
518}
519
520#page-mod-quiz-edit .categoryinfo {
521 background-color: transparent;
522 border-bottom: none;
523}
524
525#page-mod-quiz-edit .createnewquestion .singlebutton input {
526 margin-bottom: 0;
527}
528
529#page-mod-quiz-edit div.questionbank .categorysortopotionscontainer,
530#page-mod-quiz-edit div.questionbank .categoryselectallcontainer {
531 padding: 0 0 1.5em 0;
532}
533
534#page-mod-quiz-edit div.questionbank .categorypagingbarcontainer {
535 background-color: transparent;
536 margin: 0;
537 border-top: 0;
538 border-bottom: 0;
f4143537 539
536f0460
DW
540 .paging {
541 padding: 0 0.3em;
542 }
543}
544
545#page-mod-quiz-edit div.question div.content div.questioncontrols {
546 background-color: $body-bg;
547}
f4143537 548
536f0460
DW
549#page-mod-quiz-edit div.question div.content div.points {
550 margin-top: -0.5em;
fde35b8f 551 padding-bottom: 0;
536f0460
DW
552 border: none;
553 background-color: $body-bg;
554 position: static;
555 width: 12.1em;
556 float: right;
557 margin-right: 60px;
558}
f4143537 559
536f0460
DW
560#page-mod-quiz-edit div.question div.content div.points br {
561 display: none;
562}
f4143537 563
536f0460
DW
564#page-mod-quiz-edit div.question div.content div.points label {
565 display: inline-block;
566}
567
568#page-mod-quiz-edit div.quizpage .pagecontent .pagestatus {
569 background-color: $body-bg;
570}
571
572#page-mod-quiz-edit .quizpagedelete,
573#page-mod-quiz-edit .quizpagedelete img {
574 background-color: transparent;
575}
576
577#page-mod-quiz-edit div.quizpage .pagecontent {
578 border: 1px solid #ddd;
f4143537 579
536f0460
DW
580 @include border-radius(2px);
581 overflow: hidden;
582}
583
584#page-mod-quiz-edit div.questionbank .categoryinfo {
585 padding: 0.3em 0;
586}
587
588#page-mod-quiz-edit div.questionbank .modulespecificbuttonscontainer {
589 padding: 0;
f4143537 590
536f0460
DW
591 strong {
592 display: block;
593 }
f4143537
DP
594
595 hr,
596 br {
536f0460
DW
597 display: none;
598 }
f4143537 599
536f0460
DW
600 strong {
601 margin-left: -0.3em;
602 }
f4143537 603
536f0460
DW
604 strong label {
605 margin-left: 0.3em;
606 }
f4143537 607
536f0460
DW
608 input {
609 margin-left: 0;
610 }
f4143537 611
536f0460
DW
612 input + input {
613 margin-left: 5px;
614 }
615}
616
617.questionbankwindow .module {
618 width: auto;
619}
620
f68616d7
LB
621.questionbankwindow .form-autocomplete-selection {
622 margin-left: 0;
623}
624
536f0460
DW
625#page-mod-quiz-edit div.editq div.question div.content {
626 background-color: $body-bg;
627 border: 1px solid #ddd;
f4143537 628
536f0460
DW
629 @include border-radius(2px);
630 overflow: hidden;
631}
632
bea19e0d
SL
633#page-mod-quiz-edit ul.slots .activityinstance img.activityicon {
634 margin-top: 0;
87174e0a 635 padding-right: 4px;
bea19e0d
SL
636}
637
536f0460
DW
638.path-mod-quiz .statedetails {
639 display: block;
640 font-size: 0.9em;
641}
642
643a#hidebankcmd {
644 color: $link-color;
645}
646
647// override question plugins
648
649// qtype_shortanswer
650
651.que.shortanswer .answer {
652 padding: 0;
653}
654
655.que label {
656 display: inline;
657}
658
659body.path-question-type .mform fieldset.hidden {
660 padding: 0;
661 margin: 0.7em 0 0;
662}
12d6dfc1
DW
663
664// Fix for accurate positioning of ddwtos drag and drop question types.
5f29d191
BB
665.que.ddwtos,
666.que.ddwtos .drop {
12d6dfc1
DW
667 box-sizing: content-box;
668}
669
031a2752
RW
670.tag-condition-container {
671 position: relative;
672}
673
12d6dfc1
DW
674@include media-breakpoint-down(sm) {
675 .que .info {
676 float: none;
677 width: auto;
678 }
679 .que .content {
680 margin: 0;
681 }
682}