weekly release 4.0dev
[moodle.git] / theme / boost / scss / moodle / question.scss
1 /* Question */
2 .questionbank h2 {
3     margin-top: 0;
4 }
6 .questioncategories h3 {
7     margin-top: 0;
8 }
10 #chooseqtypebox {
11     margin-top: 1em;
12 }
14 #chooseqtype h3 {
15     margin: 0 0 0.3em;
16 }
18 #chooseqtype .instruction {
19     display: none;
20 }
22 #chooseqtype .fakeqtypes {
23     border-top: 1px solid silver;
24 }
26 #chooseqtype .qtypeoption {
27     margin-bottom: 0.5em;
28 }
30 #chooseqtype label {
31     display: block;
32 }
34 #chooseqtype .qtypename img {
35     padding: 0 0.3em;
36 }
38 #chooseqtype .qtypename {
39     display: inline-table;
40     width: 16em;
41 }
43 #chooseqtype .qtypesummary {
44     display: block;
45     margin: 0 2em;
46 }
48 #chooseqtype .submitbuttons {
49     margin: 0.7em 0;
50     text-align: center;
51 }
53 #qtypechoicecontainer {
54     display: none;
55 }
57 #qtypechoicecontainer_c.yui-panel-container.shadow .underlay {
58     background: none;
59 }
61 #qtypechoicecontainer.yui-panel .hd {
62     color: #333;
63     letter-spacing: 1px;
64     text-shadow: 1px 1px 1px #fff;
66     @include border-top-radius(10px);
67     border: 1px solid #ccc;
68     border-bottom: 1px solid #bbb;
70     @include gradient-y(#fff, #ccc);
71 }
73 #qtypechoicecontainer {
74     font-size: 12px;
75     color: #333;
76     background: #f2f2f2;
78     @include border-radius(10px);
79     border: 1px solid #ccc;
80     border-top: 0 none;
82     @include box-shadow(5px 5px 20px 0 #666);
83 }
85 #qtypechoicecontainer #chooseqtype {
86     width: 40em;
87 }
89 #chooseqtypehead h3 {
90     margin: 0;
91     font-weight: normal;
92 }
94 #chooseqtype .qtypes {
95     position: relative;
96     border-bottom: 1px solid #bbb;
97     padding: 0.24em 0;
98 }
100 #chooseqtype .alloptions {
101     overflow-x: hidden;
102     overflow-y: auto;
103     max-height: calc(100vh - 15em);
104     width: 60%;
107 #chooseqtype .qtypeoption {
108     margin-bottom: 0;
109     padding: 0.3em 0.3em 0.3em 1.6em;
112 #chooseqtype .qtypeoption img {
113     vertical-align: text-bottom;
114     padding-left: 1em;
115     padding-right: 0.5em;
118 #chooseqtype .selected {
119     background-color: #fff;
121     @include box-shadow(0 0 10px 0 #ccc);
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;
139 #chooseqtype .instruction,
140 #chooseqtype .selected .qtypesummary {
141     display: block;
144 #categoryquestions {
145     margin: 0;
147     td,
148     th {
149         padding: 0 0.2em;
150     }
152     th {
153         text-align: left;
154         font-weight: normal;
155     }
157     & > tbody > tr.r1 {
158         background-color: $table-accent-bg;
159     }
161     & > tbody > tr.highlight {
162         border: $border-width solid $info;
163     }
165     .checkbox {
166         padding-left: 5px;
167     }
169     .checkbox input[type="checkbox"] {
170         margin-left: 0;
171         float: none;
172     }
174     .iconcol {
175         padding: 3px;
176         box-sizing: content-box;
178         .icon {
179             margin: 0;
180             width: 12px;
181             height: 12px;
182         }
183     }
185     label {
186         margin: 0;
187         display: block;
188     }
190     .header {
191         text-align: left;
192     }
195 #page-mod-quiz-edit {
196     div.questionbankwindow div.header {
197         margin: 0;
198     }
200     div.questionbankwindow.block {
201         padding: 0;
202     }
205 .questionbank .singleselect {
206     margin: 0;
208 /* Question editing form */
209 #combinedfeedbackhdr div.fhtmleditor {
210     padding: 0;
213 #combinedfeedbackhdr div.fcheckbox {
214     margin-bottom: 1em;
217 #multitriesheader div.fitem_feditor {
218     margin-top: 1em;
221 #multitriesheader div.fitem_fgroup {
222     margin-bottom: 1em;
225 #multitriesheader div.fitem_fgroup fieldset.felement label {
226     margin-left: 0.3em;
227     margin-right: 0.3em;
230 body.path-question-type {
231     /* Hacks to display the labels within a form group. */
232     .form-group .sr-only:not(legend) {
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     }
245 .que {
246     clear: left;
247     text-align: left;
248     margin: 0 auto 1.8em auto;
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%);
259     @include border-radius(2px);
262 .que h3.no {
263     margin: 0;
264     font-size: 0.8em;
265     line-height: 1;
268 .que span.qno {
269     font-size: 1.5em;
270     font-weight: bold;
273 .que .info > div {
274     font-size: 0.8em;
275     margin-top: 0.7em;
278 .que .info .questionflag.editable {
279     cursor: pointer;
282 .que .info .editquestion img,
283 .que .info .questionflag img,
284 .que .info .questionflag input {
285     vertical-align: bottom;
288 .que .content {
289     margin: 0 0 0 8.5em;
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);
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     }
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 */
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;
321 .formulation input[type="text"],
322 .formulation select {
323     width: auto;
324     vertical-align: baseline;
327 .que.multianswer .formulation .yui3-widget-positioned {
328     box-sizing: content-box;
329     .feedbackspan {
330         width: inherit;
331         max-width: inherit;
332     }
335 .path-mod-quiz input[size] {
336     width: auto;
337     max-width: 100%;
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 */
344 .que .ablock {
345     margin: 0.7em 0 0.3em 0;
348 .que .im-controls {
349     margin-top: 0.5em;
350     text-align: left;
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;
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     }
376 .que .qtext {
377     margin-bottom: 1.5em;
380 .que .validationerror {
381     color: map-get($theme-colors, 'danger');
383 // copied from .formFieldState in mixin.less
384 // and made more specific
386 .que .grading,
387 .que .comment,
388 .que .commentlink,
389 .que .history {
390     margin-top: 0.5em;
393 .que .history h3 {
394     margin: 0 0 0.2em;
395     font-size: 1em;
398 .que .history table {
399     width: 100%;
400     margin: 0;
403 .que .history .current {
404     font-weight: bold;
407 .que .questioncorrectnessicon {
408     vertical-align: text-bottom;
411 body.jsenabled .questionflag input[type=checkbox] {
412     display: none;
415 .que .questionflagimage {
416     padding-right: 3px;
417     height: 16px;
418     width: 16px;
421 .importerror {
422     margin-top: 10px;
423     border-bottom: 1px solid #555;
426 .mform .que.comment .fitemtitle {
427     width: 20%;
430 #page-question-preview #techinfo {
431     margin: 1em 0;
434 #page-question-preview .collapsibleregion {
435     .collapsibleregioncaption,
436     .collapsibleregionextracontent {
437         display: inline-block;
438     }
441 // imported from quiz.css
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     }
459 #page-mod-quiz-edit .activity {
460     img.activityicon {
461         vertical-align: text-top;
462     }
465 #page-mod-quiz-edit .box.generalbox.questionbank {
466     padding: 0.5em;
469 #page-mod-quiz-edit .questionbank .categorypagingbarcontainer,
470 #page-mod-quiz-edit .questionbank .categoryquestionscontainer,
471 #page-mod-quiz-edit .questionbank .choosecategory {
472     padding: 0;
475 #page-mod-quiz-edit .questionbank .choosecategory select {
476     width: 100%;
479 #page-mod-quiz-edit div.questionbank .categoryquestionscontainer {
480     background: transparent;
483 #page-mod-quiz-edit .questionbankwindow div.header {
484     color: #444;
485     text-shadow: none;
487     @include border-top-radius(4px);
488     margin: 0 -10px 0 -10px;
489     padding: 2px 10px 2px 10px;
490     background: transparent; /* Old browsers */
493 #page-mod-quiz-edit .questionbankwindow div.header a:link,
494 #page-mod-quiz-edit .questionbankwindow div.header a:visited {
495     color: $link-color;
498 #page-mod-quiz-edit .questionbankwindow div.header a:hover {
499     color: $link-hover-color;
502 #page-mod-quiz-edit .createnewquestion {
503     padding: 0.3em 0;
505     div,
506     input {
507         margin: 0;
508     }
511 #page-mod-quiz-edit .questionbankwindow div.header .title {
512     color: $body-color;
515 #page-mod-quiz-edit div.container div.generalbox {
516     background-color: transparent;
517     padding: 1.5em;
520 #page-mod-quiz-edit .categoryinfo {
521     background-color: transparent;
522     border-bottom: none;
525 #page-mod-quiz-edit .createnewquestion .singlebutton input {
526     margin-bottom: 0;
529 #page-mod-quiz-edit div.questionbank .categorysortopotionscontainer,
530 #page-mod-quiz-edit div.questionbank .categoryselectallcontainer {
531     padding: 0 0 1.5em 0;
534 #page-mod-quiz-edit div.questionbank .categorypagingbarcontainer {
535     background-color: transparent;
536     margin: 0;
537     border-top: 0;
538     border-bottom: 0;
540     .paging {
541         padding: 0 0.3em;
542     }
545 #page-mod-quiz-edit div.question div.content div.questioncontrols {
546     background-color: $body-bg;
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;
560 #page-mod-quiz-edit div.question div.content div.points br {
561     display: none;
564 #page-mod-quiz-edit div.question div.content div.points label {
565     display: inline-block;
568 #page-mod-quiz-edit div.quizpage .pagecontent .pagestatus {
569     background-color: $body-bg;
572 #page-mod-quiz-edit .quizpagedelete,
573 #page-mod-quiz-edit .quizpagedelete img {
574     background-color: transparent;
577 #page-mod-quiz-edit div.quizpage .pagecontent {
578     border: 1px solid #ddd;
580     @include border-radius(2px);
581     overflow: hidden;
584 #page-mod-quiz-edit div.questionbank .categoryinfo {
585     padding: 0.3em 0;
588 #page-mod-quiz-edit div.questionbank .modulespecificbuttonscontainer {
589     padding: 0;
591     strong {
592         display: block;
593     }
595     hr,
596     br {
597         display: none;
598     }
600     strong {
601         margin-left: -0.3em;
602     }
604     strong label {
605         margin-left: 0.3em;
606     }
608     input {
609         margin-left: 0;
610     }
612     input + input {
613         margin-left: 5px;
614     }
617 .questionbankwindow .module {
618     width: auto;
621 .questionbankwindow .form-autocomplete-selection {
622     margin-left: 0;
625 #page-mod-quiz-edit div.editq div.question div.content {
626     background-color: $body-bg;
627     border: 1px solid #ddd;
629     @include border-radius(2px);
630     overflow: hidden;
633 #page-mod-quiz-edit ul.slots .activityinstance img.activityicon {
634     margin-top: 0;
635     padding-right: 4px;
638 .path-mod-quiz .statedetails {
639     display: block;
640     font-size: 0.9em;
643 a#hidebankcmd {
644     color: $link-color;
647 // override question plugins
649 // qtype_shortanswer
651 .que.shortanswer .answer {
652     padding: 0;
655 .que label {
656     display: inline;
659 body.path-question-type .mform fieldset.hidden {
660     padding: 0;
661     margin: 0.7em 0 0;
664 // Fix for accurate positioning of ddwtos drag and drop question types.
665 .que.ddwtos,
666 .que.ddwtos .drop {
667     box-sizing: content-box;
670 .tag-condition-container {
671     position: relative;
674 @include media-breakpoint-down(sm) {
675     .que .info {
676         float: none;
677         width: auto;
678     }
679     .que .content {
680         margin: 0;
681     }