1/* Question */
2.questionbank h2 {
3    margin-top: 0;
4}
5
6.questioncategories h3 {
7    margin-top: 0;
8}
9
10#chooseqtypebox {
11    margin-top: 1em;
12}
13
14#chooseqtype h3 {
15    margin: 0 0 0.3em;
16}
17
18#chooseqtype .instruction {
19    display: none;
20}
21
22#chooseqtype .fakeqtypes {
23    border-top: 1px solid silver;
24}
25
26#chooseqtype .qtypeoption {
27    margin-bottom: 0.5em;
28}
29
30#chooseqtype label {
31    display: block;
32}
33
34#chooseqtype .qtypename img {
35    padding: 0 0.3em;
36}
37
38#chooseqtype .qtypename {
39    display: inline-table;
40    width: 16em;
41}
42
43#chooseqtype .qtypesummary {
44    display: block;
45    margin: 0 2em;
46}
47
48#chooseqtype .submitbuttons {
49    margin: 0.7em 0;
50    text-align: center;
51}
52
53#qtypechoicecontainer {
54    display: none;
55}
56
57#qtypechoicecontainer_c.yui-panel-container.shadow .underlay {
58    background: none;
59}
60
61#qtypechoicecontainer.yui-panel .hd {
62    color: #333;
63    letter-spacing: 1px;
64    text-shadow: 1px 1px 1px #fff;
65
66    @include border-top-radius(10px);
67    border: 1px solid #ccc;
68    border-bottom: 1px solid #bbb;
69
70    @include gradient-y(#fff, #ccc);
71}
72
73#qtypechoicecontainer {
74    font-size: 12px;
75    color: #333;
76    background: #f2f2f2;
77
78    @include border-radius(10px);
79    border: 1px solid #ccc;
80    border-top: 0 none;
81
82    @include box-shadow(5px 5px 20px 0 #666);
83}
84
85#qtypechoicecontainer #chooseqtype {
86    width: 40em;
87}
88
89#chooseqtypehead h3 {
90    margin: 0;
91    font-weight: normal;
92}
93
94#chooseqtype .qtypes {
95    position: relative;
96    border-bottom: 1px solid #bbb;
97    padding: 0.24em 0;
98}
99
100#chooseqtype .alloptions {
101    overflow-x: hidden;
102    overflow-y: auto;
103    max-height: calc(100vh - 15em);
104    width: 60%;
105}
106
107#chooseqtype .qtypeoption {
108    margin-bottom: 0;
109    padding: 0.3em 0.3em 0.3em 1.6em;
110}
111
112#chooseqtype .qtypeoption img {
113    vertical-align: text-bottom;
114    padding-left: 1em;
115    padding-right: 0.5em;
116}
117
118#chooseqtype .selected {
119    background-color: #fff;
120
121    @include box-shadow(0 0 10px 0 #ccc);
122}
123
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;
137}
138
139#chooseqtype .instruction,
140#chooseqtype .selected .qtypesummary {
141    display: block;
142}
143
144#categoryquestions {
145    margin: 0;
146
147    td,
148    th {
149        padding: 0 0.2em;
150    }
151
152    th {
153        text-align: left;
154        font-weight: normal;
155    }
156
157    & > tbody > tr.r1 {
158        background-color: $table-accent-bg;
159    }
160
161    & > tbody > tr.highlight {
162        border: $border-width solid $info;
163    }
164
165    .checkbox {
166        padding-left: 5px;
167    }
168
169    .checkbox input[type="checkbox"] {
170        margin-left: 0;
171        float: none;
172    }
173
174    .iconcol {
175        padding: 3px;
176        box-sizing: content-box;
177
178        .icon {
179            margin: 0;
180            width: 12px;
181            height: 12px;
182        }
183    }
184
185    label {
186        margin: 0;
187        display: block;
188    }
189
190    .header {
191        text-align: left;
192    }
193}
194
195#page-mod-quiz-edit {
196    div.questionbankwindow div.header {
197        margin: 0;
198    }
199
200    div.questionbankwindow.block {
201        padding: 0;
202    }
203}
204
205.questionbank .singleselect {
206    margin: 0;
207}
208/* Question editing form */
209#combinedfeedbackhdr div.fhtmleditor {
210    padding: 0;
211}
212
213#combinedfeedbackhdr div.fcheckbox {
214    margin-bottom: 1em;
215}
216
217#multitriesheader div.fitem_feditor {
218    margin-top: 1em;
219}
220
221#multitriesheader div.fitem_fgroup {
222    margin-bottom: 1em;
223}
224
225#multitriesheader div.fitem_fgroup fieldset.felement label {
226    margin-left: 0.3em;
227    margin-right: 0.3em;
228}
229
230body.path-question-type {
231    /* Hacks to display the labels within a form group. */
232    .form-group .sr-only:not(legend):not([for="id_category"]) {
233        position: static;
234        width: auto;
235        height: auto;
236        padding: 0;
237        margin: 0 0.5rem 0 0;
238        overflow: visible;
239        clip: auto;
240        clip-path: none;
241        border: 0;
242    }
243}
244
245.que {
246    clear: left;
247    text-align: left;
248    margin: 0 auto 1.8em auto;
249}
250
251.que .info {
252    float: left;
253    width: 7em;
254    padding: 0.5em;
255    margin-bottom: 1.8em;
256    background-color: $gray-100;
257    border: 1px solid darken($gray-300, 7%);
258
259    @include border-radius(2px);
260}
261
262.que h3.no {
263    margin: 0;
264    font-size: 0.8em;
265    line-height: 1;
266}
267
268.que span.qno {
269    font-size: 1.5em;
270    font-weight: bold;
271}
272
273.que .info > div {
274    font-size: 0.8em;
275    margin-top: 0.7em;
276}
277
278.que .info .questionflag.editable {
279    cursor: pointer;
280}
281
282.que .info .editquestion img,
283.que .info .questionflag img,
284.que .info .questionflag input {
285    vertical-align: bottom;
286}
287
288.que .content {
289    margin: 0 0 0 8.5em;
290}
291
292.que .formulation,
293.que .outcome,
294.que .comment {
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);
300}
301.que .outcome,
302.que .comment {
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    }
308}
309
310.que .formulation {
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 */
312}
313
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
321.formulation input[type="text"],
322.formulation select {
323    width: auto;
324    vertical-align: baseline;
325}
326
327.que.multianswer .formulation .yui3-widget-positioned {
328    box-sizing: content-box;
329    .feedbackspan {
330        width: inherit;
331        max-width: inherit;
332    }
333}
334
335.path-mod-quiz input[size] {
336    width: auto;
337    max-width: 100%;
338}
339
340.que .comment {
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 */
342}
343
344.que .ablock {
345    margin: 0.7em 0 0.3em 0;
346}
347
348.que .im-controls {
349    margin-top: 0.5em;
350    text-align: left;
351}
352
353.que .specificfeedback,
354.que .generalfeedback,
355.que .numpartscorrect
356.que .rightanswer,
357.que .im-feedback,
358.que .feedback,
359.que p {
360    margin: 0 0 0.5em;
361}
362
363.que .correctness {
364    &.correct {
365        @include badge-variant($success);
366    }
367    &.partiallycorrect {
368        @include badge-variant($warning);
369    }
370    &.notanswered,
371    &.incorrect {
372        @include badge-variant($danger);
373    }
374}
375
376.que .qtext {
377    margin-bottom: 1.5em;
378}
379
380.que .validationerror {
381    color: map-get($theme-colors, 'danger');
382}
383// copied from .formFieldState in mixin.less
384// and made more specific
385
386.que .grading,
387.que .comment,
388.que .commentlink,
389.que .history {
390    margin-top: 0.5em;
391}
392
393.que .history h3 {
394    margin: 0 0 0.2em;
395    font-size: 1em;
396}
397
398.que .history table {
399    width: 100%;
400    margin: 0;
401}
402
403.que .history .current {
404    font-weight: bold;
405}
406
407.que .questioncorrectnessicon {
408    vertical-align: text-bottom;
409}
410
411body.jsenabled .questionflag input[type=checkbox] {
412    display: none;
413}
414
415.que .questionflagimage {
416    padding-right: 3px;
417    height: 16px;
418    width: 16px;
419}
420
421.importerror {
422    margin-top: 10px;
423    border-bottom: 1px solid #555;
424}
425
426.mform .que.comment .fitemtitle {
427    width: 20%;
428}
429
430#page-question-preview #techinfo {
431    margin: 1em 0;
432}
433
434#page-question-preview .collapsibleregion {
435    .collapsibleregioncaption,
436    .collapsibleregionextracontent {
437        display: inline-block;
438    }
439}
440
441// imported from quiz.css
442
443#page-mod-quiz-edit ul.slots .activityinstance {
444    > a {
445        display: flex;
446        max-width: 100%;
447        align-items: center;
448        text-indent: 0;
449        padding-left: 0;
450    }
451    img.activityicon {
452        margin-left: 0;
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;
462    }
463}
464
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}
482
483#page-mod-quiz-edit .questionbankwindow div.header {
484    color: #444;
485    text-shadow: none;
486
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;
504
505    div,
506    input {
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;
539
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}
548
549#page-mod-quiz-edit div.question div.content div.points {
550    margin-top: -0.5em;
551    padding-bottom: 0;
552    border: none;
553    background-color: $body-bg;
554    position: static;
555    width: 12.1em;
556    float: right;
557    margin-right: 60px;
558}
559
560#page-mod-quiz-edit div.question div.content div.points br {
561    display: none;
562}
563
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;
579
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;
590
591    strong {
592        display: block;
593    }
594
595    hr,
596    br {
597        display: none;
598    }
599
600    strong {
601        margin-left: -0.3em;
602    }
603
604    strong label {
605        margin-left: 0.3em;
606    }
607
608    input {
609        margin-left: 0;
610    }
611
612    input + input {
613        margin-left: 5px;
614    }
615}
616
617.questionbankwindow .module {
618    width: auto;
619}
620
621.questionbankwindow .form-autocomplete-selection {
622    margin-left: 0;
623}
624
625#page-mod-quiz-edit div.editq div.question div.content {
626    background-color: $body-bg;
627    border: 1px solid #ddd;
628
629    @include border-radius(2px);
630    overflow: hidden;
631}
632
633#page-mod-quiz-edit ul.slots .activityinstance img.activityicon {
634    margin-top: 0;
635    padding-right: 4px;
636}
637
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}
663
664// Fix for accurate positioning of ddwtos drag and drop question types.
665.que.ddwtos,
666.que.ddwtos .drop {
667    box-sizing: content-box;
668}
669
670.tag-condition-container {
671    position: relative;
672}
673
674@include media-breakpoint-down(sm) {
675    .que .info {
676        float: none;
677        width: auto;
678    }
679    .que .content {
680        margin: 0;
681    }
682}
683