MDL-66999 theme_boost: @extend remove extends for questions
[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. */
224 .fitem_fgroup .accesshide {
225 font: inherit;
226 position: static;
227 padding-right: .3em;
228 }
229 .form-group .sr-only {
230 position: static;
231 width: auto;
232 height: auto;
233 padding: 0;
5f29d191 234 margin: 0 0.5rem 0 0;
5d2f105e
FM
235 overflow: visible;
236 clip: auto;
5f29d191 237 clip-path: none;
5d2f105e
FM
238 border: 0;
239 }
536f0460 240}
f4143537 241
536f0460
DW
242.que {
243 clear: left;
244 text-align: left;
245 margin: 0 auto 1.8em auto;
246}
f4143537 247
536f0460
DW
248.que .info {
249 float: left;
250 width: 7em;
251 padding: 0.5em;
252 margin-bottom: 1.8em;
253 background-color: $gray-lighter;
254 border: 1px solid darken($gray-lighter, 7%);
f4143537 255
536f0460
DW
256 @include border-radius(2px);
257}
f4143537 258
536f0460
DW
259.que h3.no {
260 margin: 0;
261 font-size: 0.8em;
262 line-height: 1;
263}
f4143537 264
536f0460
DW
265.que span.qno {
266 font-size: 1.5em;
267 font-weight: bold;
268}
f4143537 269
536f0460
DW
270.que .info > div {
271 font-size: 0.8em;
272 margin-top: 0.7em;
273}
f4143537 274
536f0460
DW
275.que .info .questionflag.editable {
276 cursor: pointer;
277}
f4143537 278
536f0460
DW
279.que .info .editquestion img,
280.que .info .questionflag img,
281.que .info .questionflag input {
282 vertical-align: bottom;
283}
f4143537 284
536f0460
DW
285.que .content {
286 margin: 0 0 0 8.5em;
287}
f4143537 288
536f0460
DW
289.que .formulation,
290.que .outcome,
291.que .comment {
aa100b76
BB
292 position: relative;
293 padding: $alert-padding-y $alert-padding-x;
294 margin-bottom: $alert-margin-bottom;
295 border: $alert-border-width solid transparent;
296 @include border-radius($alert-border-radius);
536f0460 297}
12d6dfc1
DW
298.que .outcome,
299.que .comment {
aa100b76 300 @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 */
12d6dfc1 301}
f4143537 302
536f0460 303.que .formulation {
aa100b76 304 @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 */
536f0460 305}
f4143537 306
1d8d3a01
LB
307.que.multichoice .answer div.r0 .icon.fa-check,
308.que.multichoice .answer div.r1 .icon.fa-check,
309.que.multichoice .answer div.r0 .icon.fa-remove,
310.que.multichoice .answer div.r1 .icon.fa-remove {
311 text-indent: 0;
312}
3c1717bb
SL
313.qtype_multichoice_clearchoice {
314 padding-top: 10px;
d5e084bc 315 a {
3c1717bb
SL
316 cursor: pointer;
317 text-decoration: underline;
318 padding-left: 30px;
319 }
320}
1d8d3a01 321
536f0460
DW
322.formulation input[type="text"],
323.formulation select {
324 width: auto;
325 vertical-align: baseline;
326}
f4143537 327
8c00d189
LB
328.que.multianswer .formulation .yui3-widget-positioned {
329 box-sizing: content-box;
89cf38c6
AN
330 .feedbackspan {
331 width: inherit;
332 max-width: inherit;
333 }
8c00d189
LB
334}
335
536f0460
DW
336.path-mod-quiz input[size] {
337 width: auto;
3fd04d52 338 max-width: 100%;
536f0460 339}
f4143537 340
536f0460 341.que .comment {
aa100b76 342 @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 343}
f4143537 344
536f0460
DW
345.que .ablock {
346 margin: 0.7em 0 0.3em 0;
347}
f4143537 348
536f0460
DW
349.que .im-controls {
350 margin-top: 0.5em;
351 text-align: left;
352}
f4143537 353
536f0460
DW
354.que .specificfeedback,
355.que .generalfeedback,
f0aef7ab 356.que .numpartscorrect
536f0460
DW
357.que .rightanswer,
358.que .im-feedback,
359.que .feedback,
360.que p {
361 margin: 0 0 0.5em;
362}
f4143537 363
f0aef7ab 364.que .correctness {
f0aef7ab
LB
365 &.correct {
366 background-color: $state-success-text;
367 }
368 &.partiallycorrect {
369 background-color: $state-warning-text;
370 }
371 &.notanswered,
372 &.incorrect {
373 background-color: $state-danger-text;
374 }
375}
376
536f0460
DW
377.que .qtext {
378 margin-bottom: 1.5em;
379}
f4143537 380
536f0460 381.que .validationerror {
aa100b76 382 color: map-get($theme-colors, 'danger');
536f0460
DW
383}
384// copied from .formFieldState in mixin.less
385// and made more specific
f4143537 386
536f0460
DW
387.que .grading,
388.que .comment,
389.que .commentlink,
390.que .history {
391 margin-top: 0.5em;
392}
f4143537 393
536f0460
DW
394.que .history h3 {
395 margin: 0 0 0.2em;
396 font-size: 1em;
397}
f4143537 398
536f0460
DW
399.que .history table {
400 width: 100%;
401 margin: 0;
402}
f4143537 403
536f0460
DW
404.que .history .current {
405 font-weight: bold;
406}
f4143537 407
536f0460
DW
408.que .questioncorrectnessicon {
409 vertical-align: text-bottom;
410}
f4143537 411
536f0460
DW
412.que input.questionflagimage {
413 padding-right: 3px;
c233d7a2
LB
414 height: 16px;
415 width: 16px;
536f0460 416}
f4143537 417
536f0460
DW
418.importerror {
419 margin-top: 10px;
420 border-bottom: 1px solid #555;
421}
f4143537 422
536f0460
DW
423.mform .que.comment .fitemtitle {
424 width: 20%;
425}
f4143537 426
536f0460
DW
427#page-question-preview #techinfo {
428 margin: 1em 0;
429}
430
431// imported from quiz.css
432
6261200f
FM
433#page-mod-quiz-edit ul.slots .activityinstance {
434 > a {
435 display: inline;
436 text-indent: 0;
437 padding-left: 0;
438 }
439 img.activityicon {
440 margin-left: 0;
87174e0a
LB
441 width: 16px;
442 height: 16px;
443 padding-right: 4px;
444 }
445}
446
447#page-mod-quiz-edit .activity {
448 img.activityicon {
449 vertical-align: text-top;
6261200f
FM
450 }
451}
452
536f0460
DW
453#page-mod-quiz-edit .box.generalbox.questionbank {
454 padding: 0.5em;
455}
456
457#page-mod-quiz-edit .questionbank .categorypagingbarcontainer,
458#page-mod-quiz-edit .questionbank .categoryquestionscontainer,
459#page-mod-quiz-edit .questionbank .choosecategory {
460 padding: 0;
461}
462
463#page-mod-quiz-edit .questionbank .choosecategory select {
464 width: 100%;
465}
466
467#page-mod-quiz-edit div.questionbank .categoryquestionscontainer {
468 background: transparent;
469}
f4143537
DP
470
471#page-mod-quiz-edit #categoryquestions > thead {
472 background: #fff;
536f0460 473}
f4143537
DP
474
475#page-mod-quiz-edit #categoryquestions > tbody > tr:nth-of-type(even) {
536f0460
DW
476 background: #e4e4e4;
477}
478
479#page-mod-quiz-edit .questionbankwindow div.header {
480 color: #444;
481 text-shadow: none;
f4143537 482
536f0460
DW
483 @include border-top-radius(4px);
484 margin: 0 -10px 0 -10px;
485 padding: 2px 10px 2px 10px;
486 background: transparent; /* Old browsers */
487}
488
489#page-mod-quiz-edit .questionbankwindow div.header a:link,
490#page-mod-quiz-edit .questionbankwindow div.header a:visited {
491 color: $link-color;
492}
493
494#page-mod-quiz-edit .questionbankwindow div.header a:hover {
495 color: $link-hover-color;
496}
497
498#page-mod-quiz-edit .createnewquestion {
499 padding: 0.3em 0;
f4143537
DP
500
501 div,
502 input {
536f0460
DW
503 margin: 0;
504 }
505}
506
507#page-mod-quiz-edit .questionbankwindow div.header .title {
508 color: $body-color;
509}
510
511#page-mod-quiz-edit div.container div.generalbox {
512 background-color: transparent;
513 padding: 1.5em;
514}
515
516#page-mod-quiz-edit .categoryinfo {
517 background-color: transparent;
518 border-bottom: none;
519}
520
521#page-mod-quiz-edit .createnewquestion .singlebutton input {
522 margin-bottom: 0;
523}
524
525#page-mod-quiz-edit div.questionbank .categorysortopotionscontainer,
526#page-mod-quiz-edit div.questionbank .categoryselectallcontainer {
527 padding: 0 0 1.5em 0;
528}
529
530#page-mod-quiz-edit div.questionbank .categorypagingbarcontainer {
531 background-color: transparent;
532 margin: 0;
533 border-top: 0;
534 border-bottom: 0;
f4143537 535
536f0460
DW
536 .paging {
537 padding: 0 0.3em;
538 }
539}
540
541#page-mod-quiz-edit div.question div.content div.questioncontrols {
542 background-color: $body-bg;
543}
f4143537 544
536f0460
DW
545#page-mod-quiz-edit div.question div.content div.points {
546 margin-top: -0.5em;
fde35b8f 547 padding-bottom: 0;
536f0460
DW
548 border: none;
549 background-color: $body-bg;
550 position: static;
551 width: 12.1em;
552 float: right;
553 margin-right: 60px;
554}
f4143537 555
536f0460
DW
556#page-mod-quiz-edit div.question div.content div.points br {
557 display: none;
558}
f4143537 559
536f0460
DW
560#page-mod-quiz-edit div.question div.content div.points label {
561 display: inline-block;
562}
563
564#page-mod-quiz-edit div.quizpage .pagecontent .pagestatus {
565 background-color: $body-bg;
566}
567
568#page-mod-quiz-edit .quizpagedelete,
569#page-mod-quiz-edit .quizpagedelete img {
570 background-color: transparent;
571}
572
573#page-mod-quiz-edit div.quizpage .pagecontent {
574 border: 1px solid #ddd;
f4143537 575
536f0460
DW
576 @include border-radius(2px);
577 overflow: hidden;
578}
579
580#page-mod-quiz-edit div.questionbank .categoryinfo {
581 padding: 0.3em 0;
582}
583
584#page-mod-quiz-edit div.questionbank .modulespecificbuttonscontainer {
585 padding: 0;
f4143537 586
536f0460
DW
587 strong {
588 display: block;
589 }
f4143537
DP
590
591 hr,
592 br {
536f0460
DW
593 display: none;
594 }
f4143537 595
536f0460
DW
596 strong {
597 margin-left: -0.3em;
598 }
f4143537 599
536f0460
DW
600 strong label {
601 margin-left: 0.3em;
602 }
f4143537 603
536f0460
DW
604 input {
605 margin-left: 0;
606 }
f4143537 607
536f0460
DW
608 input + input {
609 margin-left: 5px;
610 }
611}
612
613.questionbankwindow .module {
614 width: auto;
615}
616
f68616d7
LB
617.questionbankwindow .form-autocomplete-selection {
618 margin-left: 0;
619}
620
536f0460
DW
621#page-mod-quiz-edit div.editq div.question div.content {
622 background-color: $body-bg;
623 border: 1px solid #ddd;
f4143537 624
536f0460
DW
625 @include border-radius(2px);
626 overflow: hidden;
627}
628
bea19e0d
SL
629#page-mod-quiz-edit ul.slots .activityinstance img.activityicon {
630 margin-top: 0;
87174e0a 631 padding-right: 4px;
bea19e0d
SL
632}
633
536f0460
DW
634.path-mod-quiz .statedetails {
635 display: block;
636 font-size: 0.9em;
637}
638
639a#hidebankcmd {
640 color: $link-color;
641}
642
643// override question plugins
644
645// qtype_shortanswer
646
647.que.shortanswer .answer {
648 padding: 0;
649}
650
651.que label {
652 display: inline;
653}
654
655body.path-question-type .mform fieldset.hidden {
656 padding: 0;
657 margin: 0.7em 0 0;
658}
12d6dfc1
DW
659
660// Fix for accurate positioning of ddwtos drag and drop question types.
5f29d191
BB
661.que.ddwtos,
662.que.ddwtos .drop {
12d6dfc1
DW
663 box-sizing: content-box;
664}
665
031a2752
RW
666.tag-condition-container {
667 position: relative;
668}
669
12d6dfc1
DW
670@include media-breakpoint-down(sm) {
671 .que .info {
672 float: none;
673 width: auto;
674 }
675 .que .content {
676 margin: 0;
677 }
678}