Skip to content

Commit ba1cb05

Browse files
author
oeh-rowanwinsemius
committed
Better handling of dropzone css import
1 parent e7e2c8e commit ba1cb05

File tree

6 files changed

+9777
-5
lines changed

6 files changed

+9777
-5
lines changed

‎dist/vue2Dropzone.css‎

Lines changed: 389 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,392 @@
1-
@import url('~dropzone/dist/dropzone.css');
1+
/*
2+
* The MIT License
3+
* Copyright (c) 2012 Matias Meno <[email protected]>
4+
*/
5+
@-webkit-keyframes passing-through {
6+
0% {
7+
opacity: 0;
8+
-webkit-transform: translateY(40px);
9+
-moz-transform: translateY(40px);
10+
-ms-transform: translateY(40px);
11+
-o-transform: translateY(40px);
12+
transform: translateY(40px); }
13+
30%, 70% {
14+
opacity: 1;
15+
-webkit-transform: translateY(0px);
16+
-moz-transform: translateY(0px);
17+
-ms-transform: translateY(0px);
18+
-o-transform: translateY(0px);
19+
transform: translateY(0px); }
20+
100% {
21+
opacity: 0;
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 {
28+
0% {
29+
opacity: 0;
30+
-webkit-transform: translateY(40px);
31+
-moz-transform: translateY(40px);
32+
-ms-transform: translateY(40px);
33+
-o-transform: translateY(40px);
34+
transform: translateY(40px); }
35+
30%, 70% {
36+
opacity: 1;
37+
-webkit-transform: translateY(0px);
38+
-moz-transform: translateY(0px);
39+
-ms-transform: translateY(0px);
40+
-o-transform: translateY(0px);
41+
transform: translateY(0px); }
42+
100% {
43+
opacity: 0;
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 {
50+
0% {
51+
opacity: 0;
52+
-webkit-transform: translateY(40px);
53+
-moz-transform: translateY(40px);
54+
-ms-transform: translateY(40px);
55+
-o-transform: translateY(40px);
56+
transform: translateY(40px); }
57+
30%, 70% {
58+
opacity: 1;
59+
-webkit-transform: translateY(0px);
60+
-moz-transform: translateY(0px);
61+
-ms-transform: translateY(0px);
62+
-o-transform: translateY(0px);
63+
transform: translateY(0px); }
64+
100% {
65+
opacity: 0;
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 {
72+
0% {
73+
opacity: 0;
74+
-webkit-transform: translateY(40px);
75+
-moz-transform: translateY(40px);
76+
-ms-transform: translateY(40px);
77+
-o-transform: translateY(40px);
78+
transform: translateY(40px); }
79+
30% {
80+
opacity: 1;
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 {
87+
0% {
88+
opacity: 0;
89+
-webkit-transform: translateY(40px);
90+
-moz-transform: translateY(40px);
91+
-ms-transform: translateY(40px);
92+
-o-transform: translateY(40px);
93+
transform: translateY(40px); }
94+
30% {
95+
opacity: 1;
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 {
102+
0% {
103+
opacity: 0;
104+
-webkit-transform: translateY(40px);
105+
-moz-transform: translateY(40px);
106+
-ms-transform: translateY(40px);
107+
-o-transform: translateY(40px);
108+
transform: translateY(40px); }
109+
30% {
110+
opacity: 1;
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 {
117+
0% {
118+
-webkit-transform: scale(1);
119+
-moz-transform: scale(1);
120+
-ms-transform: scale(1);
121+
-o-transform: scale(1);
122+
transform: scale(1); }
123+
10% {
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); }
129+
20% {
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 {
136+
0% {
137+
-webkit-transform: scale(1);
138+
-moz-transform: scale(1);
139+
-ms-transform: scale(1);
140+
-o-transform: scale(1);
141+
transform: scale(1); }
142+
10% {
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); }
148+
20% {
149+
-webkit-transform: scale(1);
150+
-moz-transform: scale(1);
151+
-ms-transform: scale(1);
152+
-o-transform: scale(1);
153+
transform: scale(1); } }
154+
@keyframes pulse {
155+
0% {
156+
-webkit-transform: scale(1);
157+
-moz-transform: scale(1);
158+
-ms-transform: scale(1);
159+
-o-transform: scale(1);
160+
transform: scale(1); }
161+
10% {
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); }
167+
20% {
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; }
175+
176+
.dropzone {
177+
min-height: 150px;
178+
border: 2px solid rgba(0, 0, 0, 0.3);
179+
background: white;
180+
padding: 20px 20px; }
181+
.dropzone.dz-clickable {
182+
cursor: pointer; }
183+
.dropzone.dz-clickable * {
184+
cursor: default; }
185+
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
186+
cursor: pointer; }
187+
.dropzone.dz-started .dz-message {
188+
display: none; }
189+
.dropzone.dz-drag-hover {
190+
border-style: solid; }
191+
.dropzone.dz-drag-hover .dz-message {
192+
opacity: 0.5; }
193+
.dropzone .dz-message {
194+
text-align: center;
195+
margin: 2em 0; }
196+
.dropzone .dz-preview {
197+
position: relative;
198+
display: inline-block;
199+
vertical-align: top;
200+
margin: 16px;
201+
min-height: 100px; }
202+
.dropzone .dz-preview:hover {
203+
z-index: 1000; }
204+
.dropzone .dz-preview:hover .dz-details {
205+
opacity: 1; }
206+
.dropzone .dz-preview.dz-file-preview .dz-image {
207+
border-radius: 20px;
208+
background: #999;
209+
background: linear-gradient(to bottom, #eee, #ddd); }
210+
.dropzone .dz-preview.dz-file-preview .dz-details {
211+
opacity: 1; }
212+
.dropzone .dz-preview.dz-image-preview {
213+
background: white; }
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 {
221+
font-size: 14px;
222+
text-align: center;
223+
display: block;
224+
cursor: pointer;
225+
border: none; }
226+
.dropzone .dz-preview .dz-remove:hover {
227+
text-decoration: underline; }
228+
.dropzone .dz-preview:hover .dz-details {
229+
opacity: 1; }
230+
.dropzone .dz-preview .dz-details {
231+
z-index: 20;
232+
position: absolute;
233+
top: 0;
234+
left: 0;
235+
opacity: 0;
236+
font-size: 13px;
237+
min-width: 100%;
238+
max-width: 100%;
239+
padding: 2em 1em;
240+
text-align: center;
241+
color: rgba(0, 0, 0, 0.9);
242+
line-height: 150%; }
243+
.dropzone .dz-preview .dz-details .dz-size {
244+
margin-bottom: 1em;
245+
font-size: 16px; }
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) {
252+
overflow: hidden;
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);
258+
padding: 0 0.4em;
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);
267+
filter: blur(8px); }
268+
.dropzone .dz-preview .dz-image {
269+
border-radius: 20px;
270+
overflow: hidden;
271+
width: 120px;
272+
height: 120px;
273+
position: relative;
274+
display: block;
275+
z-index: 10; }
276+
.dropzone .dz-preview .dz-image img {
277+
display: block; }
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 {
285+
opacity: 1;
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;
293+
opacity: 0;
294+
z-index: 500;
295+
position: absolute;
296+
display: block;
297+
top: 50%;
298+
left: 50%;
299+
margin-left: -27px;
300+
margin-top: -27px; }
301+
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
302+
display: block;
303+
width: 54px;
304+
height: 54px; }
305+
.dropzone .dz-preview.dz-processing .dz-progress {
306+
opacity: 1;
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 {
313+
opacity: 0;
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 {
326+
opacity: 1;
327+
z-index: 1000;
328+
pointer-events: none;
329+
position: absolute;
330+
height: 16px;
331+
left: 50%;
332+
top: 50%;
333+
margin-top: -8px;
334+
width: 80px;
335+
margin-left: -40px;
336+
background: rgba(255, 255, 255, 0.9);
337+
-webkit-transform: scale(1);
338+
border-radius: 8px;
339+
overflow: hidden; }
340+
.dropzone .dz-preview .dz-progress .dz-upload {
341+
background: #333;
342+
background: linear-gradient(to bottom, #666, #444);
343+
position: absolute;
344+
top: 0;
345+
left: 0;
346+
bottom: 0;
347+
width: 0;
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 {
354+
display: block; }
355+
.dropzone .dz-preview.dz-error:hover .dz-error-message {
356+
opacity: 1;
357+
pointer-events: auto; }
358+
.dropzone .dz-preview .dz-error-message {
359+
pointer-events: none;
360+
z-index: 1000;
361+
position: absolute;
362+
display: block;
363+
display: none;
364+
opacity: 0;
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;
370+
border-radius: 8px;
371+
font-size: 13px;
372+
top: 130px;
373+
left: -10px;
374+
width: 140px;
375+
background: #be2626;
376+
background: linear-gradient(to bottom, #be2626, #a92222);
377+
padding: 0.5em 1.2em;
378+
color: white; }
379+
.dropzone .dz-preview .dz-error-message:after {
380+
content: '';
381+
position: absolute;
382+
top: -6px;
383+
left: 64px;
384+
width: 0;
385+
height: 0;
386+
border-left: 6px solid transparent;
387+
border-right: 6px solid transparent;
388+
border-bottom: 6px solid #be2626; }
389+
2390
.vue-dropzone {
3391
border: 2px solid #E5E5E5;
4392
font-family: 'Arial', sans-serif;

0 commit comments

Comments
 (0)