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