MDL-55607 theme_noname: Remove icon styles - We only need .icon everywhere.
[moodle.git] / theme / noname / scss / moodle / question.scss
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     @include border-top-radius(10px);
52     border: 1px solid #ccc;
53     border-bottom: 1px solid #bbb;
54     @include gradient-y(#fff, #ccc);
55 }
56 #qtypechoicecontainer {
57     font-size: 12px;
58     color: #333;
59     background: #F2F2F2;
60     @include border-radius(10px);
61     border: 1px solid #ccc;
62     border-top: 0 none;
63     @include 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     @include 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     .iconcol {
138         padding: 3px;
139     }
140     label {
141         margin: 0;
142     }
144 #page-mod-quiz-edit {
145     div.questionbankwindow div.header {
146         margin: 0;
147     }
148     div.questionbankwindow.block {
149         padding: 0;
150     }
152 .questionbank .singleselect {
153     margin: 0;
155 /* Question editing form */
156 #combinedfeedbackhdr div.fhtmleditor {
157     padding: 0;
159 #combinedfeedbackhdr div.fcheckbox {
160     margin-bottom: 1em;
162 #multitriesheader div.fitem_feditor {
163     margin-top: 1em;
165 #multitriesheader div.fitem_fgroup {
166     margin-bottom: 1em;
168 #multitriesheader div.fitem_fgroup fieldset.felement label {
169     margin-left: 0.3em;
170     margin-right: 0.3em;
172 body.path-question-type .fitem_fgroup .accesshide {
173     font: inherit;
174     left: 0;
175     position: static;
176     padding-right: .3em;
178 .que {
179     clear: left;
180     text-align: left;
181     margin: 0 auto 1.8em auto;
183 .que .info {
184     float: left;
185     width: 7em;
186     padding: 0.5em;
187     margin-bottom: 1.8em;
188     background-color: $gray-lighter;
189     border: 1px solid darken($gray-lighter, 7%);
190     @include border-radius(2px);
192 .que h3.no {
193     margin: 0;
194     font-size: 0.8em;
195     line-height: 1;
197 .que span.qno {
198     font-size: 1.5em;
199     font-weight: bold;
201 .que .info > div {
202     font-size: 0.8em;
203     margin-top: 0.7em;
205 .que .info .questionflag.editable {
206     cursor: pointer;
208 .que .info .editquestion img,
209 .que .info .questionflag img,
210 .que .info .questionflag input {
211     vertical-align: bottom;
213 .que .content {
214     margin: 0 0 0 8.5em;
216 .que .formulation,
217 .que .outcome,
218 .que .comment {
219     @extend .alert;
221 .que .formulation {
222     @extend .alert-info;
224 .formulation input[type="text"],
225 .formulation select {
226     width: auto;
227     vertical-align: baseline;
229 .path-mod-quiz input[size] {
230     width: auto;
232 .que .comment {
233     @extend .alert-success;
235 .que .history {
236     @extend .card;
238 .que .ablock {
239     margin: 0.7em 0 0.3em 0;
241 .que .im-controls {
242     margin-top: 0.5em;
243     text-align: left;
245 .que .specificfeedback,
246 .que .generalfeedback,
247 .que .rightanswer,
248 .que .im-feedback,
249 .que .feedback,
250 .que p {
251     margin: 0 0 0.5em;
253 .que .qtext {
254     margin-bottom: 1.5em;
256 .que .correctness {
257     @extend label;
258     &.correct {
259         @extend .text-success;
260     }
261     &.partiallycorrect {
262         @extend .text-warning;
263     }
264     &.notanswered,
265     &.incorrect {
266         @extend .text-danger;
267     }
269 .que .validationerror {
270     @extend .text-danger;
272 // copied from .formFieldState in mixin.less
273 // and made more specific
274 @mixin answerState($textColor, $backgroundColor) {
275     $borderColor: $textColor;
276     color: $textColor;
277     background-color: $backgroundColor;
278     border-color: $borderColor;
279     @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
280     &:focus {
281       border-color: darken($borderColor, 10%);
282       $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%);
283       @include box-shadow($shadow);
284     }
287 .formulation .correct {
288     @extend .text-success;
290 .formulation .partiallycorrect {
291     @extend .text-warning;
293 .formulation .incorrect {
294     @extend .text-danger;
296 .formulation select.correct,
297 .formulation input.correct {
298   @include answerState($btn-success-color, $btn-success-bg);
300 .formulation select.partiallycorrect,
301 .formulation input.partiallycorrect {
302   @include answerState($btn-warning-color, $btn-warning-bg);
304 .formulation select.incorrect,
305 .formulation input.incorrect {
306   @include answerState($btn-danger-color, $btn-danger-bg);
309 .que .grading,
310 .que .comment,
311 .que .commentlink,
312 .que .history {
313     margin-top: 0.5em;
315 .que .history h3 {
316     margin: 0 0 0.2em;
317     font-size: 1em;
319 .que .history table {
320     width: 100%;
321     margin: 0;
323 .que .history .current {
324     font-weight: bold;
326 .que .questioncorrectnessicon {
327     vertical-align: text-bottom;
329 .que input.questionflagimage {
330     padding-right: 3px;
332 .importerror {
333     margin-top: 10px;
334     border-bottom: 1px solid #555;
336 .mform .que.comment .fitemtitle {
337     width: 20%;
339 #page-question-preview #techinfo {
340     margin: 1em 0;
343 // imported from quiz.css
345 #page-mod-quiz-edit .box.generalbox.questionbank {
346     padding: 0.5em;
349 #page-mod-quiz-edit .questionbank .categorypagingbarcontainer,
350 #page-mod-quiz-edit .questionbank .categoryquestionscontainer,
351 #page-mod-quiz-edit .questionbank .choosecategory {
352     padding: 0;
355 #page-mod-quiz-edit .questionbank .choosecategory select {
356     width: 100%;
359 #page-mod-quiz-edit div.questionbank .categoryquestionscontainer {
360     background: transparent;
362 #page-mod-quiz-edit #categoryquestions>thead {
363     background: #FFF;
365 #page-mod-quiz-edit #categoryquestions>tbody>tr:nth-of-type(even) {
366     background: #e4e4e4;
369 #page-mod-quiz-edit .questionbankwindow div.header {
370     color: #444;
371     text-shadow: none;
372     padding: 3px;
373     @include border-top-radius(4px);
374     margin: 0 -10px 0 -10px;
375     padding: 2px 10px 2px 10px;
376     background: transparent; /* Old browsers */
379 #page-mod-quiz-edit .questionbankwindow div.header a:link,
380 #page-mod-quiz-edit .questionbankwindow div.header a:visited {
381     color: $link-color;
384 #page-mod-quiz-edit .questionbankwindow div.header a:hover {
385     color: $link-hover-color;
388 #page-mod-quiz-edit .createnewquestion {
389     padding: 0.3em 0;
390     div, input {
391         margin: 0;
392     }
395 #page-mod-quiz-edit .questionbankwindow div.header .title {
396     color: $body-color;
399 #page-mod-quiz-edit div.container div.generalbox {
400     background-color: transparent;
401     padding: 1.5em;
404 #page-mod-quiz-edit .categoryinfo {
405     background-color: transparent;
406     border-bottom: none;
409 #page-mod-quiz-edit .createnewquestion .singlebutton input {
410     margin-bottom: 0;
413 #page-mod-quiz-edit div.questionbank .categorysortopotionscontainer,
414 #page-mod-quiz-edit div.questionbank .categoryselectallcontainer {
415     padding: 0 0 1.5em 0;
418 #page-mod-quiz-edit div.questionbank .categorypagingbarcontainer {
419     background-color: transparent;
420     margin: 0;
421     border-top: 0;
422     border-bottom: 0;
423     .paging {
424         padding: 0 0.3em;
425     }
428 #page-mod-quiz-edit div.question div.content div.questioncontrols {
429     background-color: $body-bg;
431 #page-mod-quiz-edit div.question div.content div.points {
432     margin-top: -0.5em;
433     padding-bottom: 0em;
434     border: none;
435     background-color: $body-bg;
436     position: static;
437     width: 12.1em;
438     float: right;
439     margin-right: 60px;
441 #page-mod-quiz-edit div.question div.content div.points br {
442     display: none;
444 #page-mod-quiz-edit div.question div.content div.points label {
445     display: inline-block;
448 #page-mod-quiz-edit div.quizpage .pagecontent .pagestatus {
449     background-color: $body-bg;
452 #page-mod-quiz-edit .quizpagedelete,
453 #page-mod-quiz-edit .quizpagedelete img {
454     background-color: transparent;
457 #page-mod-quiz-edit div.quizpage .pagecontent {
458     border: 1px solid #ddd;
459     @include border-radius(2px);
460     overflow: hidden;
463 #page-mod-quiz-edit div.questionbank .categoryinfo {
464     padding: 0.3em 0;
467 #page-mod-quiz-edit div.questionbank .modulespecificbuttonscontainer {
468     padding: 0;
469     strong {
470         display: block;
471     }
472     hr, br {
473         display: none;
474     }
475     strong {
476         margin-left: -0.3em;
477     }
478     strong label {
479         margin-left: 0.3em;
480     }
481     input {
482         margin-left: 0;
483     }
484     input + input {
485         margin-left: 5px;
486     }
489 .questionbankwindow .module {
490     width: auto;
493 #page-mod-quiz-edit div.editq div.question div.content {
494     background-color: $body-bg;
495     border: 1px solid #ddd;
496     @include border-radius(2px);
497     overflow: hidden;
500 .path-mod-quiz .statedetails {
501     display: block;
502     font-size: 0.9em;
505 a#hidebankcmd {
506     color: $link-color;
509 // override question plugins
511 // qtype_shortanswer
513 .que.shortanswer .answer {
514     padding: 0;
517 .que label {
518     display: inline;
521 body.path-question-type .mform fieldset.hidden {
522     padding: 0;
523     margin: 0.7em 0 0;