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