a9fc200d6d5957859b1bb790c9434f8402a9493a
[edumed.git] / catalogue / static / catalogue / css / exercise.scss
1 $px: 0.0625em;
2 $oranji: #ed7831;
3 $ciemny: #363a3e;
4 $zielony: #16a487;
5
6
7 @mixin bubble {
8     border-radius: 11*$px;
9     padding: 8*$px 11*$px;
10 }
11 @mixin bubble-drag {
12     background-color: #d4d6d8;
13     color: #363a3e;
14     cursor: pointer;
15     z-index: 2;
16 }
17 @mixin bubble-drag-disabled {
18     background-color: #eee;
19     color: #d4d6d8;
20 }
21 @mixin un-bubble-drag {
22     background-color: inherit;
23     color: inherit;
24     cursor: inherit;
25     z-index: inherit;
26 }
27
28 @mixin bubble-inline {
29     display: inline-block;
30     margin: 5*$px;
31     z-index: 2;
32 }
33 @mixin un-bubble-inline {
34     display: inline;
35     margin: 0;
36     padding: 0;
37     z-index: inherit;
38     border-radius: 0;
39 }
40 @mixin list-plain {
41     list-style: none;
42     margin: 0;
43     padding: 0;
44 }
45
46
47 .exercise {
48     img {
49         vertical-align: top;
50     }
51
52     .question-piece {
53         @include bubble;
54     }
55     .lista.punkt {
56         @include list-plain;
57     }
58     .lista {
59         li {
60             margin: 5*$px 0;
61         }
62     }
63
64     .question-piece.correct {
65         background-color: #16a487;
66         color: white;
67     }
68     .question-piece.incorrect {
69         background-color: #f00;
70         color: white;
71     }
72     
73     .placeholder.dragover {
74          background: #ed7831 !important;
75     }
76
77     .remove {
78         float: right;
79         display: inline-block;
80         border-radius: 8*$px;
81         padding: 4*$px 8*$px;
82         margin: -4*$px -8*$px -.25em 8*$px;
83         background: #ed7831;
84         color: white;
85     }
86
87     .buttons {
88         background: #5e6165;
89         border-radius: 9*$px;
90         height: 30*$px;
91         line-height: 30*$px;
92         overflow: hidden;
93         color: white;
94         margin-top: 30*$px;
95
96         input {
97             height: 100%;
98             border: 0;
99             background: #8e9093;
100             color: white;
101             text-transform: uppercase;
102             font-weight: bold;
103         }
104         .message {
105             float: right;
106             padding: 0 20*$px;
107             background: red;
108         }
109         .maxscore {
110             background: #16a487;
111         }
112
113         input.check {
114             background: #ed7831;
115             
116         }
117     }
118 }
119
120
121 .exercise, .exercise-wtem {
122     .instruction {
123         display: block;
124         margin: .3em;
125         color: green;
126         font-size: .9em;
127     }
128     .instruction:before {
129         content: "☞ ";
130     }
131 }
132
133
134 .luki {
135     .question-piece {
136         @include bubble-drag;
137         @include bubble-inline;
138         max-width: 608*$px;
139     }
140     .question-piece.disabled {
141         @include bubble-drag-disabled;
142     }
143
144     .placeholder {
145         @include bubble;
146         @include bubble-inline;
147
148         width: 4em;
149         background-color: #eee;
150         z-index: 1;
151     }
152     .placeholder:after {
153         content: "\0000a0";
154     }
155 }
156
157
158 .zastap {
159     .question-piece {
160         @include bubble-drag;
161         @include bubble-inline;
162     }
163     .question-piece.disabled {
164         @include bubble-drag-disabled;
165     }
166     .question-piece.placeholder {
167         @include un-bubble-drag;
168         @include un-bubble-inline;
169     }
170 }
171
172 .uporzadkuj {
173     .question-piece {
174         @include bubble-drag;
175     }
176     .question-piece.disabled {
177         @include bubble-drag-disabled;
178     }
179     .lista {
180         @include list-plain;
181         counter-reset: answer;
182         li {
183             counter-increment: answer;
184             padding-right: 3em;
185             background-image: url(/static/img/ornaments/draggable.png);
186             background-repeat: no-repeat;
187             background-position: 100% 50%;
188         }
189         li:before {
190             @include bubble;
191             @include bubble-drag;
192             content: counter(answer);
193             float: left;
194             margin: -.5em 0 0 -3em;
195         }
196         li.ui-sortable-placeholder {
197             counter-increment: answer 0;
198         }
199         li.ui-sortable-helper:before {
200             content: none;
201         }
202     }
203 }
204
205 .przyporzadkuj {
206     .question-piece {
207         @include bubble-drag;
208         width: 618*$px;
209     }
210     .question-piece.short {
211         display: inline-block;
212         margin: .2em .1em;
213         width: auto;
214     }
215     span.question-piece {
216         display: inline-block;
217         margin: .1em;
218         width: auto;
219     }
220     .question-piece.disabled {
221         @include bubble-drag-disabled;
222     }
223     .predicate {
224         @include list-plain;
225
226         > li {
227             @include bubble;
228             display: inline-block;
229             background-color: #5e6165;
230             color: white;
231             width: 188*$px;
232             position: relative;
233             vertical-align: top;
234
235             .subjects {
236                 @include list-plain;
237                 min-height: 45*$px;
238                 position: relative;
239                 margin: 8*$px -11*$px -8*$px -11*$px;
240                 padding: 8*$px 11*$px;
241
242                 li {
243                     width: auto;
244                 }
245
246                 .placeholder {
247                     @include bubble;
248                     text-align: right;
249                     position:relative;
250                     padding: 8*$px 11*$px;
251                     margin: 0 -11*$px;
252                 }
253                 .multiple {
254                     position: absolute;
255                     z-index: -1;
256                     top: 0;
257                     bottom: 0;
258                     left: 0;
259                     right: 0;
260                     margin: 0;
261                 }
262                 
263                 .placeholder.dragover {
264                     z-index: 1;
265                 }
266                 .placeholder:after {
267                     content: "upuść tutaj";
268                     text-style: italic;
269                 }
270             }
271         }
272         .comment {
273         }
274     }
275     .subject {
276         @include list-plain;
277     }
278
279 }
280
281
282 .prawdafalsz .question {
283     li.question-piece {
284         position: relative;
285         padding-left: 11em;
286     }
287
288     .buttons {
289         margin-top: 0;
290         top: 0;
291         left: 0;
292         position: absolute;
293         
294         background-color: #d4d6d8;
295         color: #363a3e;
296         display: inline-block;
297
298         a {
299             color: #363a3e;
300             text-transform: uppercase;
301             font-weight: bold;
302             display: inline-block;
303             padding: 0 11*$px;
304         }
305         a.chosen {
306             background: #ed7831;
307             color: white;
308         }
309     }
310 }
311
312 .wybor .question {
313     .lista {
314         list-style: none;
315         padding: 0;
316         li {
317             margin: 0;
318         }
319     }
320 }