MDL-55607 theme_noname: Remove icon styles - We only need .icon everywhere.
[moodle.git] / theme / noname / scss / moodle / question.scss
CommitLineData
536f0460
DW
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;
da92b738 54 @include gradient-y(#fff, #ccc);
536f0460
DW
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);
100}
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;
115}
116#chooseqtype .instruction,
117#chooseqtype .selected .qtypesummary {
118 display: block;
119}
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 }
536f0460
DW
137 .iconcol {
138 padding: 3px;
139 }
140 label {
141 margin: 0;
142 }
143}
144#page-mod-quiz-edit {
145 div.questionbankwindow div.header {
146 margin: 0;
147 }
148 div.questionbankwindow.block {
149 padding: 0;
150 }
151}
152.questionbank .singleselect {
153 margin: 0;
154}
155/* Question editing form */
156#combinedfeedbackhdr div.fhtmleditor {
157 padding: 0;
158}
159#combinedfeedbackhdr div.fcheckbox {
160 margin-bottom: 1em;
161}
162#multitriesheader div.fitem_feditor {
163 margin-top: 1em;
164}
165#multitriesheader div.fitem_fgroup {
166 margin-bottom: 1em;
167}
168#multitriesheader div.fitem_fgroup fieldset.felement label {
169 margin-left: 0.3em;
170 margin-right: 0.3em;
171}
172body.path-question-type .fitem_fgroup .accesshide {
173 font: inherit;
174 left: 0;
175 position: static;
176 padding-right: .3em;
177}
178.que {
179 clear: left;
180 text-align: left;
181 margin: 0 auto 1.8em auto;
182}
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);
191}
192.que h3.no {
193 margin: 0;
194 font-size: 0.8em;
195 line-height: 1;
196}
197.que span.qno {
198 font-size: 1.5em;
199 font-weight: bold;
200}
201.que .info > div {
202 font-size: 0.8em;
203 margin-top: 0.7em;
204}
205.que .info .questionflag.editable {
206 cursor: pointer;
207}
208.que .info .editquestion img,
209.que .info .questionflag img,
210.que .info .questionflag input {
211 vertical-align: bottom;
212}
213.que .content {
214 margin: 0 0 0 8.5em;
215}
216.que .formulation,
217.que .outcome,
218.que .comment {
219 @extend .alert;
220}
221.que .formulation {
222 @extend .alert-info;
223}
224.formulation input[type="text"],
225.formulation select {
226 width: auto;
227 vertical-align: baseline;
228}
229.path-mod-quiz input[size] {
230 width: auto;
231}
232.que .comment {
233 @extend .alert-success;
234}
235.que .history {
236 @extend .card;
237}
238.que .ablock {
239 margin: 0.7em 0 0.3em 0;
240}
241.que .im-controls {
242 margin-top: 0.5em;
243 text-align: left;
244}
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;
252}
253.que .qtext {
254 margin-bottom: 1.5em;
255}
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 }
268}
269.que .validationerror {
270 @extend .text-danger;
271}
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 }
285}
286
287.formulation .correct {
288 @extend .text-success;
289}
290.formulation .partiallycorrect {
291 @extend .text-warning;
292}
293.formulation .incorrect {
294 @extend .text-danger;
295}
296.formulation select.correct,
297.formulation input.correct {
298 @include answerState($btn-success-color, $btn-success-bg);
299}
300.formulation select.partiallycorrect,
301.formulation input.partiallycorrect {
302 @include answerState($btn-warning-color, $btn-warning-bg);
303}
304.formulation select.incorrect,
305.formulation input.incorrect {
306 @include answerState($btn-danger-color, $btn-danger-bg);
307}
308
309.que .grading,
310.que .comment,
311.que .commentlink,
312.que .history {
313 margin-top: 0.5em;
314}
315.que .history h3 {
316 margin: 0 0 0.2em;
317 font-size: 1em;
318}
319.que .history table {
320 width: 100%;
321 margin: 0;
322}
323.que .history .current {
324 font-weight: bold;
325}
326.que .questioncorrectnessicon {
327 vertical-align: text-bottom;
328}
329.que input.questionflagimage {
330 padding-right: 3px;
331}
332.importerror {
333 margin-top: 10px;
334 border-bottom: 1px solid #555;
335}
336.mform .que.comment .fitemtitle {
337 width: 20%;
338}
339#page-question-preview #techinfo {
340 margin: 1em 0;
341}
342
343// imported from quiz.css
344
345#page-mod-quiz-edit .box.generalbox.questionbank {
346 padding: 0.5em;
347}
348
349#page-mod-quiz-edit .questionbank .categorypagingbarcontainer,
350#page-mod-quiz-edit .questionbank .categoryquestionscontainer,
351#page-mod-quiz-edit .questionbank .choosecategory {
352 padding: 0;
353}
354
355#page-mod-quiz-edit .questionbank .choosecategory select {
356 width: 100%;
357}
358
359#page-mod-quiz-edit div.questionbank .categoryquestionscontainer {
360 background: transparent;
361}
362#page-mod-quiz-edit #categoryquestions>thead {
363 background: #FFF;
364}
365#page-mod-quiz-edit #categoryquestions>tbody>tr:nth-of-type(even) {
366 background: #e4e4e4;
367}
368
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 */
377}
378
379#page-mod-quiz-edit .questionbankwindow div.header a:link,
380#page-mod-quiz-edit .questionbankwindow div.header a:visited {
381 color: $link-color;
382}
383
384#page-mod-quiz-edit .questionbankwindow div.header a:hover {
385 color: $link-hover-color;
386}
387
388#page-mod-quiz-edit .createnewquestion {
389 padding: 0.3em 0;
390 div, input {
391 margin: 0;
392 }
393}
394
395#page-mod-quiz-edit .questionbankwindow div.header .title {
396 color: $body-color;
397}
398
399#page-mod-quiz-edit div.container div.generalbox {
400 background-color: transparent;
401 padding: 1.5em;
402}
403
404#page-mod-quiz-edit .categoryinfo {
405 background-color: transparent;
406 border-bottom: none;
407}
408
409#page-mod-quiz-edit .createnewquestion .singlebutton input {
410 margin-bottom: 0;
411}
412
413#page-mod-quiz-edit div.questionbank .categorysortopotionscontainer,
414#page-mod-quiz-edit div.questionbank .categoryselectallcontainer {
415 padding: 0 0 1.5em 0;
416}
417
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 }
426}
427
428#page-mod-quiz-edit div.question div.content div.questioncontrols {
429 background-color: $body-bg;
430}
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;
440}
441#page-mod-quiz-edit div.question div.content div.points br {
442 display: none;
443}
444#page-mod-quiz-edit div.question div.content div.points label {
445 display: inline-block;
446}
447
448#page-mod-quiz-edit div.quizpage .pagecontent .pagestatus {
449 background-color: $body-bg;
450}
451
452#page-mod-quiz-edit .quizpagedelete,
453#page-mod-quiz-edit .quizpagedelete img {
454 background-color: transparent;
455}
456
457#page-mod-quiz-edit div.quizpage .pagecontent {
458 border: 1px solid #ddd;
459 @include border-radius(2px);
460 overflow: hidden;
461}
462
463#page-mod-quiz-edit div.questionbank .categoryinfo {
464 padding: 0.3em 0;
465}
466
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 }
487}
488
489.questionbankwindow .module {
490 width: auto;
491}
492
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;
498}
499
500.path-mod-quiz .statedetails {
501 display: block;
502 font-size: 0.9em;
503}
504
505a#hidebankcmd {
506 color: $link-color;
507}
508
509// override question plugins
510
511// qtype_shortanswer
512
513.que.shortanswer .answer {
514 padding: 0;
515}
516
517.que label {
518 display: inline;
519}
520
521body.path-question-type .mform fieldset.hidden {
522 padding: 0;
523 margin: 0.7em 0 0;
524}