6fe8c9a4df82991b27bcd6be4f4e2d4e3d79ab04
[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 -1em 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     }
158 }
159
160 .przyporzadkuj {
161     .question-piece {
162         @include bubble-drag;
163     }
164     .question-piece.disabled {
165         @include bubble-drag-disabled;
166     }
167     .predicate {
168         @include list-plain;
169         white-space: nowrap;
170
171         > li {
172             white-space: normal;
173             @include bubble;
174             display: inline-block;
175             background-color: #5e6165;
176             color: white;
177             width: 180*$px;
178             position: relative;
179             vertical-align: top;
180
181             .subjects {
182                 @include list-plain;
183                 min-height: 45*$px;
184                 position: relative;
185                 margin: 8*$px -11*$px -8*$px -11*$px;
186                 padding: 8*$px 11*$px;
187
188                 .placeholder {
189                     @include bubble;
190                     position: absolute;
191                     top: 0;
192                     bottom: 0;
193                     left: 0;
194                     right: 0;
195                     margin: 0;
196                     z-index: -1;
197                     text-align: right;
198                 }
199                 .placeholder.dragover {
200                     z-index: 1;
201                 }
202                 .placeholder:after {
203                     content: "upuść tutaj";
204                     text-style: italic;
205                 }
206             }
207         }
208         .comment {
209             white-space: normal;
210         }
211     }
212     .subject {
213         @include list-plain;
214     }
215
216 }
217
218
219 .prawdafalsz .question {
220     li.question-piece {
221         position: relative;
222         padding-left: 11em;
223     }
224
225     .buttons {
226         margin-top: 0;
227         top: 0;
228         left: 0;
229         position: absolute;
230         
231         background-color: #d4d6d8;
232         color: #363a3e;
233         display: inline-block;
234
235         a {
236             color: #363a3e;
237             text-transform: uppercase;
238             font-weight: bold;
239             display: inline-block;
240             padding: 0 11*$px;
241         }
242         a.chosen {
243             background: #ed7831;
244             color: white;
245         }
246     }
247 }