MDL-55402 theme_noname: Convert bootstrapbase to bs4
[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;
54 @include gradient-vertical(#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);
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 }
137 img.iconsmall {
138 padding: 0;
139 }
140 .iconcol {
141 padding: 3px;
142 }
143 label {
144 margin: 0;
145 }
146}
147#page-mod-quiz-edit {
148 div.questionbankwindow div.header {
149 margin: 0;
150 }
151 div.questionbankwindow.block {
152 padding: 0;
153 }
154}
155.questionbank .singleselect {
156 margin: 0;
157}
158/* Question editing form */
159#combinedfeedbackhdr div.fhtmleditor {
160 padding: 0;
161}
162#combinedfeedbackhdr div.fcheckbox {
163 margin-bottom: 1em;
164}
165#multitriesheader div.fitem_feditor {
166 margin-top: 1em;
167}
168#multitriesheader div.fitem_fgroup {
169 margin-bottom: 1em;
170}
171#multitriesheader div.fitem_fgroup fieldset.felement label {
172 margin-left: 0.3em;
173 margin-right: 0.3em;
174}
175body.path-question-type .fitem_fgroup .accesshide {
176 font: inherit;
177 left: 0;
178 position: static;
179 padding-right: .3em;
180}
181.que {
182 clear: left;
183 text-align: left;
184 margin: 0 auto 1.8em auto;
185}
186.que .info {
187 float: left;
188 width: 7em;
189 padding: 0.5em;
190 margin-bottom: 1.8em;
191 background-color: $gray-lighter;
192 border: 1px solid darken($gray-lighter, 7%);
193 @include border-radius(2px);
194}
195.que h3.no {
196 margin: 0;
197 font-size: 0.8em;
198 line-height: 1;
199}
200.que span.qno {
201 font-size: 1.5em;
202 font-weight: bold;
203}
204.que .info > div {
205 font-size: 0.8em;
206 margin-top: 0.7em;
207}
208.que .info .questionflag.editable {
209 cursor: pointer;
210}
211.que .info .editquestion img,
212.que .info .questionflag img,
213.que .info .questionflag input {
214 vertical-align: bottom;
215}
216.que .content {
217 margin: 0 0 0 8.5em;
218}
219.que .formulation,
220.que .outcome,
221.que .comment {
222 @extend .alert;
223}
224.que .formulation {
225 @extend .alert-info;
226}
227.formulation input[type="text"],
228.formulation select {
229 width: auto;
230 vertical-align: baseline;
231}
232.path-mod-quiz input[size] {
233 width: auto;
234}
235.que .comment {
236 @extend .alert-success;
237}
238.que .history {
239 @extend .card;
240}
241.que .ablock {
242 margin: 0.7em 0 0.3em 0;
243}
244.que .im-controls {
245 margin-top: 0.5em;
246 text-align: left;
247}
248.que .specificfeedback,
249.que .generalfeedback,
250.que .rightanswer,
251.que .im-feedback,
252.que .feedback,
253.que p {
254 margin: 0 0 0.5em;
255}
256.que .qtext {
257 margin-bottom: 1.5em;
258}
259.que .correctness {
260 @extend label;
261 &.correct {
262 @extend .text-success;
263 }
264 &.partiallycorrect {
265 @extend .text-warning;
266 }
267 &.notanswered,
268 &.incorrect {
269 @extend .text-danger;
270 }
271}
272.que .validationerror {
273 @extend .text-danger;
274}
275// copied from .formFieldState in mixin.less
276// and made more specific
277@mixin answerState($textColor, $backgroundColor) {
278 $borderColor: $textColor;
279 color: $textColor;
280 background-color: $backgroundColor;
281 border-color: $borderColor;
282 @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
283 &:focus {
284 border-color: darken($borderColor, 10%);
285 $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($borderColor, 20%);
286 @include box-shadow($shadow);
287 }
288}
289
290.formulation .correct {
291 @extend .text-success;
292}
293.formulation .partiallycorrect {
294 @extend .text-warning;
295}
296.formulation .incorrect {
297 @extend .text-danger;
298}
299.formulation select.correct,
300.formulation input.correct {
301 @include answerState($btn-success-color, $btn-success-bg);
302}
303.formulation select.partiallycorrect,
304.formulation input.partiallycorrect {
305 @include answerState($btn-warning-color, $btn-warning-bg);
306}
307.formulation select.incorrect,
308.formulation input.incorrect {
309 @include answerState($btn-danger-color, $btn-danger-bg);
310}
311
312.que .grading,
313.que .comment,
314.que .commentlink,
315.que .history {
316 margin-top: 0.5em;
317}
318.que .history h3 {
319 margin: 0 0 0.2em;
320 font-size: 1em;
321}
322.que .history table {
323 width: 100%;
324 margin: 0;
325}
326.que .history .current {
327 font-weight: bold;
328}
329.que .questioncorrectnessicon {
330 vertical-align: text-bottom;
331}
332.que input.questionflagimage {
333 padding-right: 3px;
334}
335.importerror {
336 margin-top: 10px;
337 border-bottom: 1px solid #555;
338}
339.mform .que.comment .fitemtitle {
340 width: 20%;
341}
342#page-question-preview #techinfo {
343 margin: 1em 0;
344}
345
346// imported from quiz.css
347
348#page-mod-quiz-edit .box.generalbox.questionbank {
349 padding: 0.5em;
350}
351
352#page-mod-quiz-edit .questionbank .categorypagingbarcontainer,
353#page-mod-quiz-edit .questionbank .categoryquestionscontainer,
354#page-mod-quiz-edit .questionbank .choosecategory {
355 padding: 0;
356}
357
358#page-mod-quiz-edit .questionbank .choosecategory select {
359 width: 100%;
360}
361
362#page-mod-quiz-edit div.questionbank .categoryquestionscontainer {
363 background: transparent;
364}
365#page-mod-quiz-edit #categoryquestions>thead {
366 background: #FFF;
367}
368#page-mod-quiz-edit #categoryquestions>tbody>tr:nth-of-type(even) {
369 background: #e4e4e4;
370}
371
372#page-mod-quiz-edit .questionbankwindow div.header {
373 color: #444;
374 text-shadow: none;
375 padding: 3px;
376 @include border-top-radius(4px);
377 margin: 0 -10px 0 -10px;
378 padding: 2px 10px 2px 10px;
379 background: transparent; /* Old browsers */
380}
381
382#page-mod-quiz-edit .questionbankwindow div.header a:link,
383#page-mod-quiz-edit .questionbankwindow div.header a:visited {
384 color: $link-color;
385}
386
387#page-mod-quiz-edit .questionbankwindow div.header a:hover {
388 color: $link-hover-color;
389}
390
391#page-mod-quiz-edit .createnewquestion {
392 padding: 0.3em 0;
393 div, input {
394 margin: 0;
395 }
396}
397
398#page-mod-quiz-edit .questionbankwindow div.header .title {
399 color: $body-color;
400}
401
402#page-mod-quiz-edit div.container div.generalbox {
403 background-color: transparent;
404 padding: 1.5em;
405}
406
407#page-mod-quiz-edit .categoryinfo {
408 background-color: transparent;
409 border-bottom: none;
410}
411
412#page-mod-quiz-edit .createnewquestion .singlebutton input {
413 margin-bottom: 0;
414}
415
416#page-mod-quiz-edit div.questionbank .categorysortopotionscontainer,
417#page-mod-quiz-edit div.questionbank .categoryselectallcontainer {
418 padding: 0 0 1.5em 0;
419}
420
421#page-mod-quiz-edit div.questionbank .categorypagingbarcontainer {
422 background-color: transparent;
423 margin: 0;
424 border-top: 0;
425 border-bottom: 0;
426 .paging {
427 padding: 0 0.3em;
428 }
429}
430
431#page-mod-quiz-edit div.question div.content div.questioncontrols {
432 background-color: $body-bg;
433}
434#page-mod-quiz-edit div.question div.content div.points {
435 margin-top: -0.5em;
436 padding-bottom: 0em;
437 border: none;
438 background-color: $body-bg;
439 position: static;
440 width: 12.1em;
441 float: right;
442 margin-right: 60px;
443}
444#page-mod-quiz-edit div.question div.content div.points br {
445 display: none;
446}
447#page-mod-quiz-edit div.question div.content div.points label {
448 display: inline-block;
449}
450
451#page-mod-quiz-edit div.quizpage .pagecontent .pagestatus {
452 background-color: $body-bg;
453}
454
455#page-mod-quiz-edit .quizpagedelete,
456#page-mod-quiz-edit .quizpagedelete img {
457 background-color: transparent;
458}
459
460#page-mod-quiz-edit div.quizpage .pagecontent {
461 border: 1px solid #ddd;
462 @include border-radius(2px);
463 overflow: hidden;
464}
465
466#page-mod-quiz-edit div.questionbank .categoryinfo {
467 padding: 0.3em 0;
468}
469
470#page-mod-quiz-edit div.questionbank .modulespecificbuttonscontainer {
471 padding: 0;
472 strong {
473 display: block;
474 }
475 hr, br {
476 display: none;
477 }
478 strong {
479 margin-left: -0.3em;
480 }
481 strong label {
482 margin-left: 0.3em;
483 }
484 input {
485 margin-left: 0;
486 }
487 input + input {
488 margin-left: 5px;
489 }
490}
491
492.questionbankwindow .module {
493 width: auto;
494}
495
496#page-mod-quiz-edit div.editq div.question div.content {
497 background-color: $body-bg;
498 border: 1px solid #ddd;
499 @include border-radius(2px);
500 overflow: hidden;
501}
502
503.path-mod-quiz .statedetails {
504 display: block;
505 font-size: 0.9em;
506}
507
508a#hidebankcmd {
509 color: $link-color;
510}
511
512// override question plugins
513
514// qtype_shortanswer
515
516.que.shortanswer .answer {
517 padding: 0;
518}
519
520.que label {
521 display: inline;
522}
523
524body.path-question-type .mform fieldset.hidden {
525 padding: 0;
526 margin: 0.7em 0 0;
527}