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