d4d19a0b6268e2d2c0b4f6c9b778c044576aaf11
[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     .checkbox {
158         padding-left: 5px;
159     }
161     .checkbox input[type="checkbox"] {
162         margin-left: 0;
163         float: none;
164     }
166     .iconcol {
167         padding: 3px;
168         box-sizing: content-box;
170         .icon {
171             margin: 0;
172             width: 12px;
173             height: 12px;
174         }
175     }
177     label {
178         margin: 0;
179         display: block;
180     }
182     .header {
183         text-align: left;
184     }
187 #page-mod-quiz-edit {
188     div.questionbankwindow div.header {
189         margin: 0;
190     }
192     div.questionbankwindow.block {
193         padding: 0;
194     }
197 .questionbank .singleselect {
198     margin: 0;
200 /* Question editing form */
201 #combinedfeedbackhdr div.fhtmleditor {
202     padding: 0;
205 #combinedfeedbackhdr div.fcheckbox {
206     margin-bottom: 1em;
209 #multitriesheader div.fitem_feditor {
210     margin-top: 1em;
213 #multitriesheader div.fitem_fgroup {
214     margin-bottom: 1em;
217 #multitriesheader div.fitem_fgroup fieldset.felement label {
218     margin-left: 0.3em;
219     margin-right: 0.3em;
222 body.path-question-type {
223     /* Hacks to display the labels within a form group. */
224     .form-group .sr-only:not(legend) {
225         position: static;
226         width: auto;
227         height: auto;
228         padding: 0;
229         margin: 0 0.5rem 0 0;
230         overflow: visible;
231         clip: auto;
232         clip-path: none;
233         border: 0;
234     }
237 .que {
238     clear: left;
239     text-align: left;
240     margin: 0 auto 1.8em auto;
243 .que .info {
244     float: left;
245     width: 7em;
246     padding: 0.5em;
247     margin-bottom: 1.8em;
248     background-color: $gray-lighter;
249     border: 1px solid darken($gray-lighter, 7%);
251     @include border-radius(2px);
254 .que h3.no {
255     margin: 0;
256     font-size: 0.8em;
257     line-height: 1;
260 .que span.qno {
261     font-size: 1.5em;
262     font-weight: bold;
265 .que .info > div {
266     font-size: 0.8em;
267     margin-top: 0.7em;
270 .que .info .questionflag.editable {
271     cursor: pointer;
274 .que .info .editquestion img,
275 .que .info .questionflag img,
276 .que .info .questionflag input {
277     vertical-align: bottom;
280 .que .content {
281     margin: 0 0 0 8.5em;
284 .que .formulation,
285 .que .outcome,
286 .que .comment {
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);
293 .que .outcome,
294 .que .comment {
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)); /* stylelint-disable-line max-line-length */
298 .que .formulation {
299     @include alert-variant(theme-color-level('info', $alert-bg-level), theme-color-level('info', $alert-border-level), theme-color-level('info', $alert-color-level)); /* stylelint-disable-line max-line-length */
302 .que.multichoice .answer div.r0 .icon.fa-check,
303 .que.multichoice .answer div.r1 .icon.fa-check,
304 .que.multichoice .answer div.r0 .icon.fa-remove,
305 .que.multichoice .answer div.r1 .icon.fa-remove {
306     text-indent: 0;
308 .qtype_multichoice_clearchoice {
309     padding-top: 10px;
310     a {
311         cursor: pointer;
312         text-decoration: underline;
313         padding-left: 30px;
314     }
317 .formulation input[type="text"],
318 .formulation select {
319     width: auto;
320     vertical-align: baseline;
323 .que.multianswer .formulation .yui3-widget-positioned {
324     box-sizing: content-box;
325     .feedbackspan {
326         width: inherit;
327         max-width: inherit;
328     }
331 .path-mod-quiz input[size] {
332     width: auto;
333     max-width: 100%;
336 .que .comment {
337     @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 */
340 .que .ablock {
341     margin: 0.7em 0 0.3em 0;
344 .que .im-controls {
345     margin-top: 0.5em;
346     text-align: left;
349 .que .specificfeedback,
350 .que .generalfeedback,
351 .que .numpartscorrect
352 .que .rightanswer,
353 .que .im-feedback,
354 .que .feedback,
355 .que p {
356     margin: 0 0 0.5em;
359 .que .correctness {
360     &.correct {
361         background-color: $state-success-text;
362     }
363     &.partiallycorrect {
364         background-color: $state-warning-text;
365     }
366     &.notanswered,
367     &.incorrect {
368         background-color: $state-danger-text;
369     }
372 .que .qtext {
373     margin-bottom: 1.5em;
376 .que .validationerror {
377     color: map-get($theme-colors, 'danger');
379 // copied from .formFieldState in mixin.less
380 // and made more specific
382 .que .grading,
383 .que .comment,
384 .que .commentlink,
385 .que .history {
386     margin-top: 0.5em;
389 .que .history h3 {
390     margin: 0 0 0.2em;
391     font-size: 1em;
394 .que .history table {
395     width: 100%;
396     margin: 0;
399 .que .history .current {
400     font-weight: bold;
403 .que .questioncorrectnessicon {
404     vertical-align: text-bottom;
407 body.jsenabled .questionflag input[type=checkbox] {
408     display: none;
411 .que .questionflagimage {
412     padding-right: 3px;
413     height: 16px;
414     width: 16px;
417 .importerror {
418     margin-top: 10px;
419     border-bottom: 1px solid #555;
422 .mform .que.comment .fitemtitle {
423     width: 20%;
426 #page-question-preview #techinfo {
427     margin: 1em 0;
430 // imported from quiz.css
432 #page-mod-quiz-edit ul.slots .activityinstance {
433     > a {
434         display: flex;
435         max-width: 100%;
436         align-items: center;
437         text-indent: 0;
438         padding-left: 0;
439     }
440     img.activityicon {
441         margin-left: 0;
442         width: 16px;
443         height: 16px;
444         padding-right: 4px;
445     }
448 #page-mod-quiz-edit .activity {
449     img.activityicon {
450         vertical-align: text-top;
451     }
454 #page-mod-quiz-edit .box.generalbox.questionbank {
455     padding: 0.5em;
458 #page-mod-quiz-edit .questionbank .categorypagingbarcontainer,
459 #page-mod-quiz-edit .questionbank .categoryquestionscontainer,
460 #page-mod-quiz-edit .questionbank .choosecategory {
461     padding: 0;
464 #page-mod-quiz-edit .questionbank .choosecategory select {
465     width: 100%;
468 #page-mod-quiz-edit div.questionbank .categoryquestionscontainer {
469     background: transparent;
472 #page-mod-quiz-edit #categoryquestions > thead {
473     background: #fff;
476 #page-mod-quiz-edit #categoryquestions > tbody > tr:nth-of-type(even) {
477     background: #e4e4e4;
480 #page-mod-quiz-edit .questionbankwindow div.header {
481     color: #444;
482     text-shadow: none;
484     @include border-top-radius(4px);
485     margin: 0 -10px 0 -10px;
486     padding: 2px 10px 2px 10px;
487     background: transparent; /* Old browsers */
490 #page-mod-quiz-edit .questionbankwindow div.header a:link,
491 #page-mod-quiz-edit .questionbankwindow div.header a:visited {
492     color: $link-color;
495 #page-mod-quiz-edit .questionbankwindow div.header a:hover {
496     color: $link-hover-color;
499 #page-mod-quiz-edit .createnewquestion {
500     padding: 0.3em 0;
502     div,
503     input {
504         margin: 0;
505     }
508 #page-mod-quiz-edit .questionbankwindow div.header .title {
509     color: $body-color;
512 #page-mod-quiz-edit div.container div.generalbox {
513     background-color: transparent;
514     padding: 1.5em;
517 #page-mod-quiz-edit .categoryinfo {
518     background-color: transparent;
519     border-bottom: none;
522 #page-mod-quiz-edit .createnewquestion .singlebutton input {
523     margin-bottom: 0;
526 #page-mod-quiz-edit div.questionbank .categorysortopotionscontainer,
527 #page-mod-quiz-edit div.questionbank .categoryselectallcontainer {
528     padding: 0 0 1.5em 0;
531 #page-mod-quiz-edit div.questionbank .categorypagingbarcontainer {
532     background-color: transparent;
533     margin: 0;
534     border-top: 0;
535     border-bottom: 0;
537     .paging {
538         padding: 0 0.3em;
539     }
542 #page-mod-quiz-edit div.question div.content div.questioncontrols {
543     background-color: $body-bg;
546 #page-mod-quiz-edit div.question div.content div.points {
547     margin-top: -0.5em;
548     padding-bottom: 0;
549     border: none;
550     background-color: $body-bg;
551     position: static;
552     width: 12.1em;
553     float: right;
554     margin-right: 60px;
557 #page-mod-quiz-edit div.question div.content div.points br {
558     display: none;
561 #page-mod-quiz-edit div.question div.content div.points label {
562     display: inline-block;
565 #page-mod-quiz-edit div.quizpage .pagecontent .pagestatus {
566     background-color: $body-bg;
569 #page-mod-quiz-edit .quizpagedelete,
570 #page-mod-quiz-edit .quizpagedelete img {
571     background-color: transparent;
574 #page-mod-quiz-edit div.quizpage .pagecontent {
575     border: 1px solid #ddd;
577     @include border-radius(2px);
578     overflow: hidden;
581 #page-mod-quiz-edit div.questionbank .categoryinfo {
582     padding: 0.3em 0;
585 #page-mod-quiz-edit div.questionbank .modulespecificbuttonscontainer {
586     padding: 0;
588     strong {
589         display: block;
590     }
592     hr,
593     br {
594         display: none;
595     }
597     strong {
598         margin-left: -0.3em;
599     }
601     strong label {
602         margin-left: 0.3em;
603     }
605     input {
606         margin-left: 0;
607     }
609     input + input {
610         margin-left: 5px;
611     }
614 .questionbankwindow .module {
615     width: auto;
618 .questionbankwindow .form-autocomplete-selection {
619     margin-left: 0;
622 #page-mod-quiz-edit div.editq div.question div.content {
623     background-color: $body-bg;
624     border: 1px solid #ddd;
626     @include border-radius(2px);
627     overflow: hidden;
630 #page-mod-quiz-edit ul.slots .activityinstance img.activityicon {
631     margin-top: 0;
632     padding-right: 4px;
635 .path-mod-quiz .statedetails {
636     display: block;
637     font-size: 0.9em;
640 a#hidebankcmd {
641     color: $link-color;
644 // override question plugins
646 // qtype_shortanswer
648 .que.shortanswer .answer {
649     padding: 0;
652 .que label {
653     display: inline;
656 body.path-question-type .mform fieldset.hidden {
657     padding: 0;
658     margin: 0.7em 0 0;
661 // Fix for accurate positioning of ddwtos drag and drop question types.
662 .que.ddwtos,
663 .que.ddwtos .drop {
664     box-sizing: content-box;
667 .tag-condition-container {
668     position: relative;
671 @include media-breakpoint-down(sm) {
672     .que .info {
673         float: none;
674         width: auto;
675     }
676     .que .content {
677         margin: 0;
678     }