1 @-webkit-keyframes passing-through {
4 -webkit-transform: translateY(40px);
5 -moz-transform: translateY(40px);
6 -ms-transform: translateY(40px);
7 -o-transform: translateY(40px);
8 transform: translateY(40px);
12 -webkit-transform: translateY(0px);
13 -moz-transform: translateY(0px);
14 -ms-transform: translateY(0px);
15 -o-transform: translateY(0px);
16 transform: translateY(0px);
20 -webkit-transform: translateY(-40px);
21 -moz-transform: translateY(-40px);
22 -ms-transform: translateY(-40px);
23 -o-transform: translateY(-40px);
24 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);
38 -webkit-transform: translateY(0px);
39 -moz-transform: translateY(0px);
40 -ms-transform: translateY(0px);
41 -o-transform: translateY(0px);
42 transform: translateY(0px);
46 -webkit-transform: translateY(-40px);
47 -moz-transform: translateY(-40px);
48 -ms-transform: translateY(-40px);
49 -o-transform: translateY(-40px);
50 transform: translateY(-40px);
53 @keyframes passing-through {
56 -webkit-transform: translateY(40px);
57 -moz-transform: translateY(40px);
58 -ms-transform: translateY(40px);
59 -o-transform: translateY(40px);
60 transform: translateY(40px);
64 -webkit-transform: translateY(0px);
65 -moz-transform: translateY(0px);
66 -ms-transform: translateY(0px);
67 -o-transform: translateY(0px);
68 transform: translateY(0px);
72 -webkit-transform: translateY(-40px);
73 -moz-transform: translateY(-40px);
74 -ms-transform: translateY(-40px);
75 -o-transform: translateY(-40px);
76 transform: translateY(-40px);
79 @-webkit-keyframes slide-in {
82 -webkit-transform: translateY(40px);
83 -moz-transform: translateY(40px);
84 -ms-transform: translateY(40px);
85 -o-transform: translateY(40px);
86 transform: translateY(40px);
90 -webkit-transform: translateY(0px);
91 -moz-transform: translateY(0px);
92 -ms-transform: translateY(0px);
93 -o-transform: translateY(0px);
94 transform: translateY(0px);
97 @-moz-keyframes slide-in {
100 -webkit-transform: translateY(40px);
101 -moz-transform: translateY(40px);
102 -ms-transform: translateY(40px);
103 -o-transform: translateY(40px);
104 transform: translateY(40px);
108 -webkit-transform: translateY(0px);
109 -moz-transform: translateY(0px);
110 -ms-transform: translateY(0px);
111 -o-transform: translateY(0px);
112 transform: translateY(0px);
115 @keyframes slide-in {
118 -webkit-transform: translateY(40px);
119 -moz-transform: translateY(40px);
120 -ms-transform: translateY(40px);
121 -o-transform: translateY(40px);
122 transform: translateY(40px);
126 -webkit-transform: translateY(0px);
127 -moz-transform: translateY(0px);
128 -ms-transform: translateY(0px);
129 -o-transform: translateY(0px);
130 transform: translateY(0px);
133 @-webkit-keyframes pulse {
135 -webkit-transform: scale(1);
136 -moz-transform: scale(1);
137 -ms-transform: scale(1);
138 -o-transform: scale(1);
142 -webkit-transform: scale(1.1);
143 -moz-transform: scale(1.1);
144 -ms-transform: scale(1.1);
145 -o-transform: scale(1.1);
146 transform: scale(1.1);
149 -webkit-transform: scale(1);
150 -moz-transform: scale(1);
151 -ms-transform: scale(1);
152 -o-transform: scale(1);
156 @-moz-keyframes pulse {
158 -webkit-transform: scale(1);
159 -moz-transform: scale(1);
160 -ms-transform: scale(1);
161 -o-transform: scale(1);
165 -webkit-transform: scale(1.1);
166 -moz-transform: scale(1.1);
167 -ms-transform: scale(1.1);
168 -o-transform: scale(1.1);
169 transform: scale(1.1);
172 -webkit-transform: scale(1);
173 -moz-transform: scale(1);
174 -ms-transform: scale(1);
175 -o-transform: scale(1);
181 -webkit-transform: scale(1);
182 -moz-transform: scale(1);
183 -ms-transform: scale(1);
184 -o-transform: scale(1);
188 -webkit-transform: scale(1.1);
189 -moz-transform: scale(1.1);
190 -ms-transform: scale(1.1);
191 -o-transform: scale(1.1);
192 transform: scale(1.1);
195 -webkit-transform: scale(1);
196 -moz-transform: scale(1);
197 -ms-transform: scale(1);
198 -o-transform: scale(1);
202 .dropzone, .dropzone .dz-default * {
203 box-sizing: border-box;
208 .dropzone:not(textarea) {
209 border: 1px solid rgba(0, 0, 0, 0.3);
210 padding: 0px 0px 5px 0px;
213 .dropzone.dz-clickable {
216 background-color: $background_color;
219 .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
222 .dropzone.dz-started .dz-message {
225 .dropzone.dz-drag-hover {
228 .dropzone.dz-drag-hover .dz-message {
231 .dropzone .dz-message {
234 .dropzone .dz-message .dz-button {
243 .dropzone .dz-preview {
245 display: inline-block;
250 .dropzone .dz-preview:hover {
253 .dropzone .dz-preview:hover .dz-details {
256 .dropzone .dz-preview.dz-file-preview .dz-image {
259 background: linear-gradient(to bottom, #eee, #ddd);
261 .dropzone .dz-preview.dz-file-preview .dz-details {
264 .dropzone .dz-preview.dz-image-preview {
267 .dropzone .dz-preview.dz-image-preview .dz-details {
268 -webkit-transition: opacity 0.2s linear;
269 -moz-transition: opacity 0.2s linear;
270 -ms-transition: opacity 0.2s linear;
271 -o-transition: opacity 0.2s linear;
272 transition: opacity 0.2s linear;
274 .dropzone .dz-preview .dz-remove {
281 .dropzone .dz-preview .dz-remove:hover {
282 text-decoration: underline;
284 .dropzone .dz-preview:hover .dz-details {
287 .dropzone .dz-preview .dz-details {
298 color: rgba(0, 0, 0, 0.9);
301 .dropzone .dz-preview .dz-details .dz-size {
305 .dropzone .dz-preview .dz-details .dz-filename {
308 .dropzone .dz-preview .dz-details .dz-filename:hover span {
309 border: 1px solid rgba(200, 200, 200, 0.8);
310 background-color: rgba(255, 255, 255, 0.8);
312 .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
314 text-overflow: ellipsis;
316 .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
317 border: 1px solid transparent;
319 .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
320 background-color: rgba(255, 255, 255, 0.4);
324 .dropzone .dz-preview:hover .dz-image img {
325 -webkit-transform: scale(1.05, 1.05);
326 -moz-transform: scale(1.05, 1.05);
327 -ms-transform: scale(1.05, 1.05);
328 -o-transform: scale(1.05, 1.05);
329 transform: scale(1.05, 1.05);
330 -webkit-filter: blur(8px);
333 .dropzone .dz-preview .dz-image {
342 .dropzone .dz-preview .dz-image img {
345 .dropzone .dz-preview.dz-success .dz-success-mark {
346 -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
347 -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
348 -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
349 -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
350 animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
352 .dropzone .dz-preview.dz-error .dz-error-mark {
354 -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
355 -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
356 -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
357 -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
358 animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
360 .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
361 pointer-events: none;
371 .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
376 .dropzone .dz-preview.dz-processing .dz-progress {
378 -webkit-transition: all 0.2s linear;
379 -moz-transition: all 0.2s linear;
380 -ms-transition: all 0.2s linear;
381 -o-transition: all 0.2s linear;
382 transition: all 0.2s linear;
384 .dropzone .dz-preview.dz-complete .dz-progress {
386 -webkit-transition: opacity 0.4s ease-in;
387 -moz-transition: opacity 0.4s ease-in;
388 -ms-transition: opacity 0.4s ease-in;
389 -o-transition: opacity 0.4s ease-in;
390 transition: opacity 0.4s ease-in;
392 .dropzone .dz-preview:not(.dz-processing) .dz-progress {
393 -webkit-animation: pulse 6s ease infinite;
394 -moz-animation: pulse 6s ease infinite;
395 -ms-animation: pulse 6s ease infinite;
396 -o-animation: pulse 6s ease infinite;
397 animation: pulse 6s ease infinite;
399 .dropzone .dz-preview .dz-progress {
402 pointer-events: none;
410 background: rgba(255, 255, 255, 0.9);
411 -webkit-transform: scale(1);
415 .dropzone .dz-preview .dz-progress .dz-upload {
417 background: linear-gradient(to bottom, #666, #444);
423 -webkit-transition: width 300ms ease-in-out;
424 -moz-transition: width 300ms ease-in-out;
425 -ms-transition: width 300ms ease-in-out;
426 -o-transition: width 300ms ease-in-out;
427 transition: width 300ms ease-in-out;
429 .dropzone .dz-preview.dz-error .dz-error-message {
432 .dropzone .dz-preview.dz-error:hover .dz-error-message {
434 pointer-events: auto;
436 .dropzone .dz-preview .dz-error-message {
437 pointer-events: none;
443 -webkit-transition: opacity 0.3s ease;
444 -moz-transition: opacity 0.3s ease;
445 -ms-transition: opacity 0.3s ease;
446 -o-transition: opacity 0.3s ease;
447 transition: opacity 0.3s ease;
454 background: linear-gradient(to bottom, #be2626, #a92222);
455 padding: 0.5em 1.2em;
458 .dropzone .dz-preview .dz-error-message:after {
465 border-left: 6px solid transparent;
466 border-right: 6px solid transparent;
467 border-bottom: 6px solid #be2626;