3 * Copyright (c) 2012 Matias Meno <m@tias.me>
5 @-webkit-keyframes passing-through {
8 -webkit-transform: translateY(40px);
9 -moz-transform: translateY(40px);
10 -ms-transform: translateY(40px);
11 -o-transform: translateY(40px);
12 transform: translateY(40px); }
15 -webkit-transform: translateY(0px);
16 -moz-transform: translateY(0px);
17 -ms-transform: translateY(0px);
18 -o-transform: translateY(0px);
19 transform: translateY(0px); }
22 -webkit-transform: translateY(-40px);
23 -moz-transform: translateY(-40px);
24 -ms-transform: translateY(-40px);
25 -o-transform: translateY(-40px);
26 transform: translateY(-40px); } }
27 @-moz-keyframes passing-through {
30 -webkit-transform: translateY(40px);
31 -moz-transform: translateY(40px);
32 -ms-transform: translateY(40px);
33 -o-transform: translateY(40px);
34 transform: translateY(40px); }
37 -webkit-transform: translateY(0px);
38 -moz-transform: translateY(0px);
39 -ms-transform: translateY(0px);
40 -o-transform: translateY(0px);
41 transform: translateY(0px); }
44 -webkit-transform: translateY(-40px);
45 -moz-transform: translateY(-40px);
46 -ms-transform: translateY(-40px);
47 -o-transform: translateY(-40px);
48 transform: translateY(-40px); } }
49 @keyframes passing-through {
52 -webkit-transform: translateY(40px);
53 -moz-transform: translateY(40px);
54 -ms-transform: translateY(40px);
55 -o-transform: translateY(40px);
56 transform: translateY(40px); }
59 -webkit-transform: translateY(0px);
60 -moz-transform: translateY(0px);
61 -ms-transform: translateY(0px);
62 -o-transform: translateY(0px);
63 transform: translateY(0px); }
66 -webkit-transform: translateY(-40px);
67 -moz-transform: translateY(-40px);
68 -ms-transform: translateY(-40px);
69 -o-transform: translateY(-40px);
70 transform: translateY(-40px); } }
71 @-webkit-keyframes slide-in {
74 -webkit-transform: translateY(40px);
75 -moz-transform: translateY(40px);
76 -ms-transform: translateY(40px);
77 -o-transform: translateY(40px);
78 transform: translateY(40px); }
81 -webkit-transform: translateY(0px);
82 -moz-transform: translateY(0px);
83 -ms-transform: translateY(0px);
84 -o-transform: translateY(0px);
85 transform: translateY(0px); } }
86 @-moz-keyframes slide-in {
89 -webkit-transform: translateY(40px);
90 -moz-transform: translateY(40px);
91 -ms-transform: translateY(40px);
92 -o-transform: translateY(40px);
93 transform: translateY(40px); }
96 -webkit-transform: translateY(0px);
97 -moz-transform: translateY(0px);
98 -ms-transform: translateY(0px);
99 -o-transform: translateY(0px);
100 transform: translateY(0px); } }
101 @keyframes slide-in {
104 -webkit-transform: translateY(40px);
105 -moz-transform: translateY(40px);
106 -ms-transform: translateY(40px);
107 -o-transform: translateY(40px);
108 transform: translateY(40px); }
111 -webkit-transform: translateY(0px);
112 -moz-transform: translateY(0px);
113 -ms-transform: translateY(0px);
114 -o-transform: translateY(0px);
115 transform: translateY(0px); } }
116 @-webkit-keyframes pulse {
118 -webkit-transform: scale(1);
119 -moz-transform: scale(1);
120 -ms-transform: scale(1);
121 -o-transform: scale(1);
122 transform: scale(1); }
124 -webkit-transform: scale(1.1);
125 -moz-transform: scale(1.1);
126 -ms-transform: scale(1.1);
127 -o-transform: scale(1.1);
128 transform: scale(1.1); }
130 -webkit-transform: scale(1);
131 -moz-transform: scale(1);
132 -ms-transform: scale(1);
133 -o-transform: scale(1);
134 transform: scale(1); } }
135 @-moz-keyframes pulse {
137 -webkit-transform: scale(1);
138 -moz-transform: scale(1);
139 -ms-transform: scale(1);
140 -o-transform: scale(1);
141 transform: scale(1); }
143 -webkit-transform: scale(1.1);
144 -moz-transform: scale(1.1);
145 -ms-transform: scale(1.1);
146 -o-transform: scale(1.1);
147 transform: scale(1.1); }
149 -webkit-transform: scale(1);
150 -moz-transform: scale(1);
151 -ms-transform: scale(1);
152 -o-transform: scale(1);
153 transform: scale(1); } }
156 -webkit-transform: scale(1);
157 -moz-transform: scale(1);
158 -ms-transform: scale(1);
159 -o-transform: scale(1);
160 transform: scale(1); }
162 -webkit-transform: scale(1.1);
163 -moz-transform: scale(1.1);
164 -ms-transform: scale(1.1);
165 -o-transform: scale(1.1);
166 transform: scale(1.1); }
168 -webkit-transform: scale(1);
169 -moz-transform: scale(1);
170 -ms-transform: scale(1);
171 -o-transform: scale(1);
172 transform: scale(1); } }
173 .dropzone, .dropzone * {
174 box-sizing: border-box; }
178 border: 2px solid rgba(0, 0, 0, 0.3);
180 padding: 20px 20px; }
181 .dropzone.dz-clickable {
183 .dropzone.dz-clickable * {
185 .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
187 .dropzone.dz-started .dz-message {
189 .dropzone.dz-drag-hover {
190 border-style: solid; }
191 .dropzone.dz-drag-hover .dz-message {
193 .dropzone .dz-message {
196 .dropzone .dz-preview {
198 display: inline-block;
202 .dropzone .dz-preview:hover {
204 .dropzone .dz-preview:hover .dz-details {
206 .dropzone .dz-preview.dz-file-preview .dz-image {
209 background: linear-gradient(to bottom, #eee, #ddd); }
210 .dropzone .dz-preview.dz-file-preview .dz-details {
212 .dropzone .dz-preview.dz-image-preview {
214 .dropzone .dz-preview.dz-image-preview .dz-details {
215 -webkit-transition: opacity 0.2s linear;
216 -moz-transition: opacity 0.2s linear;
217 -ms-transition: opacity 0.2s linear;
218 -o-transition: opacity 0.2s linear;
219 transition: opacity 0.2s linear; }
220 .dropzone .dz-preview .dz-remove {
226 .dropzone .dz-preview .dz-remove:hover {
227 text-decoration: underline; }
228 .dropzone .dz-preview:hover .dz-details {
230 .dropzone .dz-preview .dz-details {
241 color: rgba(0, 0, 0, 0.9);
243 .dropzone .dz-preview .dz-details .dz-size {
246 .dropzone .dz-preview .dz-details .dz-filename {
247 white-space: nowrap; }
248 .dropzone .dz-preview .dz-details .dz-filename:hover span {
249 border: 1px solid rgba(200, 200, 200, 0.8);
250 background-color: rgba(255, 255, 255, 0.8); }
251 .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
253 text-overflow: ellipsis; }
254 .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
255 border: 1px solid transparent; }
256 .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
257 background-color: rgba(255, 255, 255, 0.4);
259 border-radius: 3px; }
260 .dropzone .dz-preview:hover .dz-image img {
261 -webkit-transform: scale(1.05, 1.05);
262 -moz-transform: scale(1.05, 1.05);
263 -ms-transform: scale(1.05, 1.05);
264 -o-transform: scale(1.05, 1.05);
265 transform: scale(1.05, 1.05);
266 -webkit-filter: blur(8px);
268 .dropzone .dz-preview .dz-image {
276 .dropzone .dz-preview .dz-image img {
278 .dropzone .dz-preview.dz-success .dz-success-mark {
279 -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
280 -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
281 -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
282 -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
283 animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
284 .dropzone .dz-preview.dz-error .dz-error-mark {
286 -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
287 -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
288 -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
289 -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
290 animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
291 .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
292 pointer-events: none;
301 .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
305 .dropzone .dz-preview.dz-processing .dz-progress {
307 -webkit-transition: all 0.2s linear;
308 -moz-transition: all 0.2s linear;
309 -ms-transition: all 0.2s linear;
310 -o-transition: all 0.2s linear;
311 transition: all 0.2s linear; }
312 .dropzone .dz-preview.dz-complete .dz-progress {
314 -webkit-transition: opacity 0.4s ease-in;
315 -moz-transition: opacity 0.4s ease-in;
316 -ms-transition: opacity 0.4s ease-in;
317 -o-transition: opacity 0.4s ease-in;
318 transition: opacity 0.4s ease-in; }
319 .dropzone .dz-preview:not(.dz-processing) .dz-progress {
320 -webkit-animation: pulse 6s ease infinite;
321 -moz-animation: pulse 6s ease infinite;
322 -ms-animation: pulse 6s ease infinite;
323 -o-animation: pulse 6s ease infinite;
324 animation: pulse 6s ease infinite; }
325 .dropzone .dz-preview .dz-progress {
328 pointer-events: none;
336 background: rgba(255, 255, 255, 0.9);
337 -webkit-transform: scale(1);
340 .dropzone .dz-preview .dz-progress .dz-upload {
342 background: linear-gradient(to bottom, #666, #444);
348 -webkit-transition: width 300ms ease-in-out;
349 -moz-transition: width 300ms ease-in-out;
350 -ms-transition: width 300ms ease-in-out;
351 -o-transition: width 300ms ease-in-out;
352 transition: width 300ms ease-in-out; }
353 .dropzone .dz-preview.dz-error .dz-error-message {
355 .dropzone .dz-preview.dz-error:hover .dz-error-message {
357 pointer-events: auto; }
358 .dropzone .dz-preview .dz-error-message {
359 pointer-events: none;
365 -webkit-transition: opacity 0.3s ease;
366 -moz-transition: opacity 0.3s ease;
367 -ms-transition: opacity 0.3s ease;
368 -o-transition: opacity 0.3s ease;
369 transition: opacity 0.3s ease;
376 background: linear-gradient(to bottom, #be2626, #a92222);
377 padding: 0.5em 1.2em;
379 .dropzone .dz-preview .dz-error-message:after {
386 border-left: 6px solid transparent;
387 border-right: 6px solid transparent;
388 border-bottom: 6px solid #be2626; }