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