MDL-55167 less: remove empty blocks
[moodle.git] / theme / bootstrapbase / less / moodle / question.less
1 /* Question */
2 .questionbank h2 {
3     margin-top: 0;
4 }
5 .questioncategories h3 {
6     margin-top: 0;
7 }
8 #chooseqtypebox {
9     margin-top: 1em;
10 }
11 #chooseqtype h3 {
12     margin: 0 0 0.3em;
13 }
14 #chooseqtype .instruction {
15     display: none;
16 }
17 #chooseqtype .fakeqtypes {
18     border-top: 1px solid silver;
19 }
20 #chooseqtype .qtypeoption {
21     margin-bottom: 0.5em;
22 }
23 #chooseqtype label {
24     display: block;
25 }
26 #chooseqtype .qtypename img {
27     padding: 0 0.3em;
28 }
29 #chooseqtype .qtypename {
30     display: inline-table;
31     width: 16em;
32 }
33 #chooseqtype .qtypesummary {
34     display: block;
35     margin: 0 2em;
36 }
37 #chooseqtype .submitbuttons {
38     margin: 0.7em 0;
39     text-align: center;
40 }
41 #qtypechoicecontainer {
42     display: none;
43 }
44 #qtypechoicecontainer_c.yui-panel-container.shadow .underlay {
45     background: none;
46 }
47 #qtypechoicecontainer.yui-panel .hd {
48     color: #333;
49     letter-spacing: 1px;
50     text-shadow: 1px 1px 1px #fff;
51     .border-top-radius(10px);
52     border: 1px solid #ccc;
53     border-bottom: 1px solid #bbb;
54     #gradient > .vertical(#fff, #ccc);
55 }
56 #qtypechoicecontainer {
57     font-size: 12px;
58     color: #333;
59     background: #F2F2F2;
60     .border-radius(10px);
61     border: 1px solid #ccc;
62     border-top: 0 none;
63     .box-shadow(5px 5px 20px 0 #666);
64 }
65 #qtypechoicecontainer #chooseqtype {
66     width: 40em;
67 }
68 #chooseqtypehead h3 {
69     margin: 0;
70     font-weight: normal;
71 }
72 #chooseqtype .qtypes {
73     position: relative;
74     border-bottom: 1px solid #bbb;
75     padding: 0.24em 0;
76 }
77 #chooseqtype .alloptions {
78     overflow-x: hidden;
79     overflow-y: auto;
80     max-height: 400px;
81     max-height: calc(100vh - 15em);
82     /* The next line is a workaround because recess is crap. Delete ththe following line once
83     * https://github.com/twitter/recess/issues/59 / https://github.com/twitter/recess/issues/75
84     * is fixed. The previous line is the right one. */
85     max-height: 60vh;
86     width: 60%;
87 }
88 #chooseqtype .qtypeoption {
89     margin-bottom: 0;
90     padding: 0.3em 0.3em 0.3em 1.6em;
91 }
92 #chooseqtype .qtypeoption img {
93     vertical-align: text-bottom;
94     padding-left: 1em;
95     padding-right: 0.5em;
96 }
97 #chooseqtype .selected {
98     background-color: #fff;
99     .box-shadow(0px 0 10px 0 #ccc);
101 #chooseqtype .instruction,
102 #chooseqtype .qtypesummary {
103     display: none;
104     position: absolute;
105     top: 0;
106     right: 0;
107     bottom: 0;
108     left: 60%;
109     margin: 0;
110     overflow-x: hidden;
111     overflow-y: auto;
112     padding: 1.5em 1.6em;
113     background-color: #fff;
114     overflow-y: auto;
116 #chooseqtype .instruction,
117 #chooseqtype .selected .qtypesummary {
118     display: block;
120 #categoryquestions {
121     margin: 0;
122     td,
123     th {
124         padding: 0 0.2em;
125     }
126     th {
127         text-align: left;
128         font-weight: normal;
129     }
130     .checkbox {
131         padding-left: 5px;
132     }
133     .checkbox input[type="checkbox"] {
134         margin-left: 0px;
135         float: none;
136     }
137     img.iconsmall {
138         padding: 0;
139     }
140     .iconcol {
141         padding: 3px;
142     }
143     label {
144         margin: 0;
145     }
147 #page-mod-quiz-edit {
148     div.questionbankwindow div.header {
149         margin: 0;
150     }
151     div.questionbankwindow.block {
152         padding: 0;
153     }
155 .dir-rtl #categoryquestions th {
156     text-align: right;
158 .questionbank .singleselect {
159     margin: 0;
161 /* Question editing form */
162 #combinedfeedbackhdr div.fhtmleditor {
163     padding: 0;
165 #combinedfeedbackhdr div.fcheckbox {
166     margin-bottom: 1em;
168 #multitriesheader div.fitem_feditor {
169     margin-top: 1em;
171 #multitriesheader div.fitem_fgroup {
172     margin-bottom: 1em;
174 #multitriesheader div.fitem_fgroup fieldset.felement label {
175     margin-left: 0.3em;
176     margin-right: 0.3em;
178 body.path-question-type .fitem_fgroup .accesshide {
179     font: inherit;
180     left: 0;
181     position: static;
182     padding-right: .3em;
184 .que {
185     clear: left;
186     text-align: left;
187     margin: 0 auto 1.8em auto;
189 .dir-rtl .que {
190     text-align: right;
192 .que .info {
193     float: left;
194     width: 7em;
195     padding: 0.5em;
196     margin-bottom: 1.8em;
197     background-color: @grayLighter;
198     border: 1px solid darken(spin(@grayLighter, -10), 7%);
199     .border-radius(2px);
201 .que h3.no {
202     margin: 0;
203     font-size: 0.8em;
204     line-height: 1;
206 .que span.qno {
207     font-size: 1.5em;
208     font-weight: bold;
210 .que .info > div {
211     font-size: 0.8em;
212     margin-top: 0.7em;
214 .que .info .questionflag.editable {
215     cursor: pointer;
217 .que .info .editquestion img,
218 .que .info .questionflag img,
219 .que .info .questionflag input {
220     vertical-align: bottom;
222 .que .content {
223     margin: 0 0 0 8.5em;
225 .que .formulation,
226 .que .outcome,
227 .que .comment {
228     .alert
230 .que .formulation {
231     .alert-info;
232     color: @textColor;
234 .formulation input[type="text"],
235 .formulation select {
236     width: auto;
237     vertical-align: baseline;
239 .path-mod-quiz input[size] {
240     width: auto;
243 .que .comment {
244     .alert-success;
246 .que .history {
247     .well
249 .que .ablock {
250     margin: 0.7em 0 0.3em 0;
252 .que .im-controls {
253     margin-top: 0.5em;
254     text-align: left;
256 .dir-rtl .que .im-controls {
257     text-align: right;
259 .que .specificfeedback,
260 .que .generalfeedback,
261 .que .rightanswer,
262 .que .im-feedback,
263 .que .feedback,
264 .que p {
265     margin: 0 0 0.5em;
267 .que .qtext {
268     margin-bottom: 1.5em;
270 .que .correctness {
271     .label;
272     &.correct {
273         background-color: @successText;
274     }
275     &.partiallycorrect {
276         background-color: @orange;
277     }
278     &.notanswered,
279     &.incorrect {
280         background-color: @errorText;
281     }
283 .que .validationerror {
284     color: @errorText;
286 // copied from .formFieldState in mixin.less
287 // and made more specific
288 .answerState(@textColor, @backgroundColor) {
289     @borderColor: @textColor;
290     color: @textColor;
291     background-color: @backgroundColor;
292     border-color: @borderColor;
293     .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
294     &:focus {
295         border-color: darken(@borderColor, 10%);
296         @shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@borderColor, 20%);
297         .box-shadow(@shadow);
298     }
301 .formulation .correct {
302     background-color: @successBackground;
304 .formulation .partiallycorrect {
305     background-color: @warningBackground;
307 .formulation .incorrect {
308     background-color: @errorBackground;
310 .formulation select.correct,
311 .formulation input.correct {
312     .answerState(@successText, @successBackground);
314 .formulation select.partiallycorrect,
315 .formulation input.partiallycorrect {
316     .answerState(@warningText, @warningBackground);
318 .formulation select.incorrect,
319 .formulation input.incorrect {
320     .answerState(@errorText, @errorBackground);
323 .que .grading,
324 .que .comment,
325 .que .commentlink,
326 .que .history {
327     margin-top: 0.5em;
329 .que .history h3 {
330     margin: 0 0 0.2em;
331     font-size: 1em;
333 .que .history table {
334     width: 100%;
335     margin: 0;
337 .que .history .current {
338     font-weight: bold;
340 .que .questioncorrectnessicon {
341     vertical-align: text-bottom;
343 .que input.questionflagimage {
344     padding-right: 3px;
346 .dir-rtl .que input.questionflagimage {
347     padding-left: 3px;
348     padding-right: 0;
350 .importerror {
351     margin-top: 10px;
352     border-bottom: 1px solid #555;
354 .mform .que.comment .fitemtitle {
355     width: 20%;
357 #page-question-preview #techinfo {
358     margin: 1em 0;
360 /** Overide for RTL layout **/
361 .dir-rtl #chooseqtype .instruction,
362 .dir-rtl #chooseqtype .qtypesummary {
363     right: 60%;
364     left: 0%;
365     border-left: 0;
366     border-right: 1px solid grey;
369 // imported from quiz.css
371 #page-mod-quiz-edit .box.generalbox.questionbank {
372     padding: 0.5em;
375 #page-mod-quiz-edit .questionbank .categorypagingbarcontainer,
376 #page-mod-quiz-edit .questionbank .categoryquestionscontainer,
377 #page-mod-quiz-edit .questionbank .choosecategory {
378     padding: 0;
381 #page-mod-quiz-edit .questionbank .choosecategory select {
382     width: 100%;
385 #page-mod-quiz-edit div.questionbank .categoryquestionscontainer {
386     background: transparent;
388 #page-mod-quiz-edit #categoryquestions > thead {
389     background: #FFF;
391 #page-mod-quiz-edit #categoryquestions > tbody > tr:nth-of-type(even) {
392     background: #e4e4e4;
395 #page-mod-quiz-edit .questionbankwindow div.header {
396     color: #444;
397     text-shadow: none;
398     padding: 3px;
399     .border-top-radius(4px);
400     margin: 0 -10px 0 -10px;
401     padding: 2px 10px 2px 10px;
402     background: transparent; /* Old browsers */
405 #page-mod-quiz-edit .questionbankwindow div.header a:link,
406 #page-mod-quiz-edit .questionbankwindow div.header a:visited {
407     color: @linkColor;
410 #page-mod-quiz-edit .questionbankwindow div.header a:hover {
411     color: @linkColorHover;
414 #page-mod-quiz-edit .createnewquestion {
415     padding: 0.3em 0;
416     div,
417     input {
418         margin: 0;
419     }
422 #page-mod-quiz-edit .questionbankwindow div.header .title {
423     color: @textColor;
426 #page-mod-quiz-edit div.container div.generalbox {
427     background-color: transparent;
428     padding: 1.5em;
431 #page-mod-quiz-edit .categoryinfo {
432     background-color: transparent;
433     border-bottom: none;
436 #page-mod-quiz-edit .createnewquestion .singlebutton input {
437     margin-bottom: 0;
440 #page-mod-quiz-edit div.questionbank .categorysortopotionscontainer,
441 #page-mod-quiz-edit div.questionbank .categoryselectallcontainer {
442     padding: 0 0 1.5em 0;
445 #page-mod-quiz-edit div.questionbank .categorypagingbarcontainer {
446     background-color: transparent;
447     margin: 0;
448     border-top: 0;
449     border-bottom: 0;
450     .paging {
451         padding: 0 0.3em;
452     }
455 #page-mod-quiz-edit div.question div.content div.questioncontrols {
456     background-color: @bodyBackground;
458 #page-mod-quiz-edit div.question div.content div.points {
459     margin-top: -0.5em;
460     padding-bottom: 0em;
461     border: none;
462     background-color: @bodyBackground;
463     position: static;
464     width: 12.1em;
465     float: right;
466     margin-right: 60px;
468 #page-mod-quiz-edit.dir-rtl div.question div.content div.points {
469     float: left;
470     margin-left: 60px;
471     margin-right: 0px;
474 #page-mod-quiz-edit div.question div.content div.points br {
475     display: none;
477 #page-mod-quiz-edit div.question div.content div.points label {
478     display: inline-block;
481 #page-mod-quiz-edit div.quizpage .pagecontent .pagestatus {
482     background-color: @bodyBackground;
485 #page-mod-quiz-edit .quizpagedelete,
486 #page-mod-quiz-edit .quizpagedelete img {
487     background-color: transparent;
490 #page-mod-quiz-edit div.quizpage .pagecontent {
491     border: 1px solid #ddd;
492     .border-radius(2px);
493     overflow: hidden;
496 #page-mod-quiz-edit div.questionbank .categoryinfo {
497     padding: 0.3em 0;
500 #page-mod-quiz-edit div.questionbank .modulespecificbuttonscontainer {
501     padding: 0;
502     strong {
503         display: block;
504     }
505     hr,
506     br {
507         display: none;
508     }
509     strong {
510         margin-left: -0.3em;
511     }
512     strong label {
513         margin-left: 0.3em;
514     }
515     input {
516         margin-left: 0;
517     }
518     input + input {
519         margin-left: 5px;
520     }
523 .questionbankwindow .module {
524     width: auto;
527 #page-mod-quiz-edit div.editq div.question div.content {
528     background-color: @bodyBackground;
529     border: 1px solid #ddd;
530     .border-radius(2px);
531     overflow: hidden;
534 .path-mod-quiz .statedetails {
535     display: block;
536     font-size: 0.9em;
539 a#hidebankcmd {
540     color: @linkColor;
543 // override question plugins
545 // qtype_shortanswer
547 .que.shortanswer .answer {
548     padding: 0;
551 .que label {
552     display: inline;
555 body.path-question-type .mform fieldset.hidden {
556     padding: 0;
557     margin: 0.7em 0 0;