MDL-70386 theme_boost: quizes correctness badges
[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
536f0460
DW
157 .checkbox {
158 padding-left: 5px;
159 }
f4143537 160
536f0460 161 .checkbox input[type="checkbox"] {
fde35b8f 162 margin-left: 0;
536f0460
DW
163 float: none;
164 }
f4143537 165
536f0460
DW
166 .iconcol {
167 padding: 3px;
a5e92a41
FM
168 box-sizing: content-box;
169
170 .icon {
171 margin: 0;
172 width: 12px;
173 height: 12px;
174 }
536f0460 175 }
f4143537 176
536f0460
DW
177 label {
178 margin: 0;
f0fca20b 179 display: block;
536f0460 180 }
a0e60262
LB
181
182 .header {
183 text-align: left;
184 }
536f0460 185}
f4143537 186
536f0460
DW
187#page-mod-quiz-edit {
188 div.questionbankwindow div.header {
189 margin: 0;
190 }
f4143537 191
536f0460
DW
192 div.questionbankwindow.block {
193 padding: 0;
194 }
195}
f4143537 196
536f0460
DW
197.questionbank .singleselect {
198 margin: 0;
199}
200/* Question editing form */
201#combinedfeedbackhdr div.fhtmleditor {
202 padding: 0;
203}
f4143537 204
536f0460
DW
205#combinedfeedbackhdr div.fcheckbox {
206 margin-bottom: 1em;
207}
f4143537 208
536f0460
DW
209#multitriesheader div.fitem_feditor {
210 margin-top: 1em;
211}
f4143537 212
536f0460
DW
213#multitriesheader div.fitem_fgroup {
214 margin-bottom: 1em;
215}
f4143537 216
536f0460
DW
217#multitriesheader div.fitem_fgroup fieldset.felement label {
218 margin-left: 0.3em;
219 margin-right: 0.3em;
220}
f4143537 221
5d2f105e
FM
222body.path-question-type {
223 /* Hacks to display the labels within a form group. */
a728edcb 224 .form-group .sr-only:not(legend) {
5d2f105e
FM
225 position: static;
226 width: auto;
227 height: auto;
228 padding: 0;
5f29d191 229 margin: 0 0.5rem 0 0;
5d2f105e
FM
230 overflow: visible;
231 clip: auto;
5f29d191 232 clip-path: none;
5d2f105e
FM
233 border: 0;
234 }
536f0460 235}
f4143537 236
536f0460
DW
237.que {
238 clear: left;
239 text-align: left;
240 margin: 0 auto 1.8em auto;
241}
f4143537 242
536f0460
DW
243.que .info {
244 float: left;
245 width: 7em;
246 padding: 0.5em;
247 margin-bottom: 1.8em;
3b7f6333 248 background-color: $gray-100;
4394f9e3 249 border: 1px solid darken($gray-300, 7%);
f4143537 250
536f0460
DW
251 @include border-radius(2px);
252}
f4143537 253
536f0460
DW
254.que h3.no {
255 margin: 0;
256 font-size: 0.8em;
257 line-height: 1;
258}
f4143537 259
536f0460
DW
260.que span.qno {
261 font-size: 1.5em;
262 font-weight: bold;
263}
f4143537 264
536f0460
DW
265.que .info > div {
266 font-size: 0.8em;
267 margin-top: 0.7em;
268}
f4143537 269
536f0460
DW
270.que .info .questionflag.editable {
271 cursor: pointer;
272}
f4143537 273
536f0460
DW
274.que .info .editquestion img,
275.que .info .questionflag img,
276.que .info .questionflag input {
277 vertical-align: bottom;
278}
f4143537 279
536f0460
DW
280.que .content {
281 margin: 0 0 0 8.5em;
282}
f4143537 283
536f0460
DW
284.que .formulation,
285.que .outcome,
286.que .comment {
aa100b76
BB
287 position: relative;
288 padding: $alert-padding-y $alert-padding-x;
289 margin-bottom: $alert-margin-bottom;
290 border: $alert-border-width solid transparent;
291 @include border-radius($alert-border-radius);
536f0460 292}
12d6dfc1
DW
293.que .outcome,
294.que .comment {
3b7f6333
JP
295 @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 */
296 // Darken link colour inside comments for better colour contrast against regular text.
297 a {
298 color: darken($link-color, 30%);
299 }
12d6dfc1 300}
f4143537 301
536f0460 302.que .formulation {
3b7f6333 303 @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 304}
f4143537 305
1d8d3a01
LB
306.que.multichoice .answer div.r0 .icon.fa-check,
307.que.multichoice .answer div.r1 .icon.fa-check,
308.que.multichoice .answer div.r0 .icon.fa-remove,
309.que.multichoice .answer div.r1 .icon.fa-remove {
310 text-indent: 0;
311}
312
536f0460
DW
313.formulation input[type="text"],
314.formulation select {
315 width: auto;
316 vertical-align: baseline;
317}
f4143537 318
8c00d189
LB
319.que.multianswer .formulation .yui3-widget-positioned {
320 box-sizing: content-box;
89cf38c6
AN
321 .feedbackspan {
322 width: inherit;
323 max-width: inherit;
324 }
8c00d189
LB
325}
326
536f0460
DW
327.path-mod-quiz input[size] {
328 width: auto;
3fd04d52 329 max-width: 100%;
536f0460 330}
f4143537 331
536f0460 332.que .comment {
aa100b76 333 @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 334}
f4143537 335
536f0460
DW
336.que .ablock {
337 margin: 0.7em 0 0.3em 0;
338}
f4143537 339
536f0460
DW
340.que .im-controls {
341 margin-top: 0.5em;
342 text-align: left;
343}
f4143537 344
536f0460
DW
345.que .specificfeedback,
346.que .generalfeedback,
f0aef7ab 347.que .numpartscorrect
536f0460
DW
348.que .rightanswer,
349.que .im-feedback,
350.que .feedback,
351.que p {
352 margin: 0 0 0.5em;
353}
f4143537 354
f0aef7ab 355.que .correctness {
f0aef7ab 356 &.correct {
250ff98b 357 @include badge-variant($success);
f0aef7ab
LB
358 }
359 &.partiallycorrect {
250ff98b 360 @include badge-variant($warning);
f0aef7ab
LB
361 }
362 &.notanswered,
363 &.incorrect {
250ff98b 364 @include badge-variant($danger);
f0aef7ab
LB
365 }
366}
367
536f0460
DW
368.que .qtext {
369 margin-bottom: 1.5em;
370}
f4143537 371
536f0460 372.que .validationerror {
aa100b76 373 color: map-get($theme-colors, 'danger');
536f0460
DW
374}
375// copied from .formFieldState in mixin.less
376// and made more specific
f4143537 377
536f0460
DW
378.que .grading,
379.que .comment,
380.que .commentlink,
381.que .history {
382 margin-top: 0.5em;
383}
f4143537 384
536f0460
DW
385.que .history h3 {
386 margin: 0 0 0.2em;
387 font-size: 1em;
388}
f4143537 389
536f0460
DW
390.que .history table {
391 width: 100%;
392 margin: 0;
393}
f4143537 394
536f0460
DW
395.que .history .current {
396 font-weight: bold;
397}
f4143537 398
536f0460
DW
399.que .questioncorrectnessicon {
400 vertical-align: text-bottom;
401}
f4143537 402
76a49e4a
TH
403body.jsenabled .questionflag input[type=checkbox] {
404 display: none;
405}
406
407.que .questionflagimage {
536f0460 408 padding-right: 3px;
c233d7a2
LB
409 height: 16px;
410 width: 16px;
536f0460 411}
f4143537 412
536f0460
DW
413.importerror {
414 margin-top: 10px;
415 border-bottom: 1px solid #555;
416}
f4143537 417
536f0460
DW
418.mform .que.comment .fitemtitle {
419 width: 20%;
420}
f4143537 421
536f0460
DW
422#page-question-preview #techinfo {
423 margin: 1em 0;
424}
425
39652702 426#page-question-preview .collapsibleregion {
427 .collapsibleregioncaption,
428 .collapsibleregionextracontent {
429 display: inline-block;
430 }
431}
432
536f0460
DW
433// imported from quiz.css
434
6261200f
FM
435#page-mod-quiz-edit ul.slots .activityinstance {
436 > a {
92bc86e4 437 display: flex;
94fd778d 438 max-width: 100%;
92bc86e4 439 align-items: center;
6261200f
FM
440 text-indent: 0;
441 padding-left: 0;
442 }
443 img.activityicon {
444 margin-left: 0;
87174e0a
LB
445 width: 16px;
446 height: 16px;
447 padding-right: 4px;
448 }
449}
450
451#page-mod-quiz-edit .activity {
452 img.activityicon {
453 vertical-align: text-top;
6261200f
FM
454 }
455}
456
536f0460
DW
457#page-mod-quiz-edit .box.generalbox.questionbank {
458 padding: 0.5em;
459}
460
461#page-mod-quiz-edit .questionbank .categorypagingbarcontainer,
462#page-mod-quiz-edit .questionbank .categoryquestionscontainer,
463#page-mod-quiz-edit .questionbank .choosecategory {
464 padding: 0;
465}
466
467#page-mod-quiz-edit .questionbank .choosecategory select {
468 width: 100%;
469}
470
471#page-mod-quiz-edit div.questionbank .categoryquestionscontainer {
472 background: transparent;
473}
f4143537
DP
474
475#page-mod-quiz-edit #categoryquestions > thead {
476 background: #fff;
536f0460 477}
f4143537
DP
478
479#page-mod-quiz-edit #categoryquestions > tbody > tr:nth-of-type(even) {
536f0460
DW
480 background: #e4e4e4;
481}
482
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}