dropzonejs-rails4 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,154 @@
1
+ /* The MIT License */
2
+ .dropzone,
3
+ .dropzone *,
4
+ .dropzone-previews,
5
+ .dropzone-previews * {
6
+ -webkit-box-sizing: border-box;
7
+ -moz-box-sizing: border-box;
8
+ box-sizing: border-box;
9
+ }
10
+ .dropzone {
11
+ position: relative;
12
+ border: 1px solid rgba(0,0,0,0.08);
13
+ background: rgba(0,0,0,0.02);
14
+ padding: 1em;
15
+ }
16
+ .dropzone.dz-clickable {
17
+ cursor: pointer;
18
+ }
19
+ .dropzone.dz-clickable .dz-message,
20
+ .dropzone.dz-clickable .dz-message span {
21
+ cursor: pointer;
22
+ }
23
+ .dropzone.dz-clickable * {
24
+ cursor: default;
25
+ }
26
+ .dropzone .dz-message {
27
+ opacity: 1;
28
+ -ms-filter: none;
29
+ filter: none;
30
+ }
31
+ .dropzone.dz-drag-hover {
32
+ border-color: rgba(0,0,0,0.15);
33
+ background: rgba(0,0,0,0.04);
34
+ }
35
+ .dropzone.dz-started .dz-message {
36
+ display: none;
37
+ }
38
+ .dropzone .dz-preview,
39
+ .dropzone-previews .dz-preview {
40
+ background: rgba(255,255,255,0.8);
41
+ position: relative;
42
+ display: inline-block;
43
+ margin: 17px;
44
+ vertical-align: top;
45
+ border: 1px solid #acacac;
46
+ padding: 6px 6px 6px 6px;
47
+ }
48
+ .dropzone .dz-preview.dz-file-preview [data-dz-thumbnail],
49
+ .dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail] {
50
+ display: none;
51
+ }
52
+ .dropzone .dz-preview .dz-details,
53
+ .dropzone-previews .dz-preview .dz-details {
54
+ width: 100px;
55
+ height: 100px;
56
+ position: relative;
57
+ background: #ebebeb;
58
+ padding: 5px;
59
+ margin-bottom: 22px;
60
+ }
61
+ .dropzone .dz-preview .dz-details .dz-filename,
62
+ .dropzone-previews .dz-preview .dz-details .dz-filename {
63
+ overflow: hidden;
64
+ height: 100%;
65
+ }
66
+ .dropzone .dz-preview .dz-details img,
67
+ .dropzone-previews .dz-preview .dz-details img {
68
+ position: absolute;
69
+ top: 0;
70
+ left: 0;
71
+ width: 100px;
72
+ height: 100px;
73
+ }
74
+ .dropzone .dz-preview .dz-details .dz-size,
75
+ .dropzone-previews .dz-preview .dz-details .dz-size {
76
+ position: absolute;
77
+ bottom: -28px;
78
+ left: 3px;
79
+ height: 28px;
80
+ line-height: 28px;
81
+ }
82
+ .dropzone .dz-preview.dz-error .dz-error-mark,
83
+ .dropzone-previews .dz-preview.dz-error .dz-error-mark {
84
+ display: block;
85
+ }
86
+ .dropzone .dz-preview.dz-success .dz-success-mark,
87
+ .dropzone-previews .dz-preview.dz-success .dz-success-mark {
88
+ display: block;
89
+ }
90
+ .dropzone .dz-preview:hover .dz-details img,
91
+ .dropzone-previews .dz-preview:hover .dz-details img {
92
+ display: none;
93
+ }
94
+ .dropzone .dz-preview .dz-success-mark,
95
+ .dropzone-previews .dz-preview .dz-success-mark,
96
+ .dropzone .dz-preview .dz-error-mark,
97
+ .dropzone-previews .dz-preview .dz-error-mark {
98
+ display: none;
99
+ position: absolute;
100
+ width: 40px;
101
+ height: 40px;
102
+ font-size: 30px;
103
+ text-align: center;
104
+ right: -10px;
105
+ top: -10px;
106
+ }
107
+ .dropzone .dz-preview .dz-success-mark,
108
+ .dropzone-previews .dz-preview .dz-success-mark {
109
+ color: #8cc657;
110
+ }
111
+ .dropzone .dz-preview .dz-error-mark,
112
+ .dropzone-previews .dz-preview .dz-error-mark {
113
+ color: #ee162d;
114
+ }
115
+ .dropzone .dz-preview .dz-progress,
116
+ .dropzone-previews .dz-preview .dz-progress {
117
+ position: absolute;
118
+ top: 100px;
119
+ left: 6px;
120
+ right: 6px;
121
+ height: 6px;
122
+ background: #d7d7d7;
123
+ display: none;
124
+ }
125
+ .dropzone .dz-preview .dz-progress .dz-upload,
126
+ .dropzone-previews .dz-preview .dz-progress .dz-upload {
127
+ position: absolute;
128
+ top: 0;
129
+ bottom: 0;
130
+ left: 0;
131
+ width: 0%;
132
+ background-color: #8cc657;
133
+ }
134
+ .dropzone .dz-preview.dz-processing .dz-progress,
135
+ .dropzone-previews .dz-preview.dz-processing .dz-progress {
136
+ display: block;
137
+ }
138
+ .dropzone .dz-preview .dz-error-message,
139
+ .dropzone-previews .dz-preview .dz-error-message {
140
+ display: none;
141
+ position: absolute;
142
+ top: -5px;
143
+ left: -20px;
144
+ background: rgba(245,245,245,0.8);
145
+ padding: 8px 10px;
146
+ color: #800;
147
+ min-width: 140px;
148
+ max-width: 500px;
149
+ z-index: 500;
150
+ }
151
+ .dropzone .dz-preview:hover.dz-error .dz-error-message,
152
+ .dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
153
+ display: block;
154
+ }
@@ -0,0 +1,410 @@
1
+ /* The MIT License */
2
+ .dropzone,
3
+ .dropzone *,
4
+ .dropzone-previews,
5
+ .dropzone-previews * {
6
+ -webkit-box-sizing: border-box;
7
+ -moz-box-sizing: border-box;
8
+ box-sizing: border-box;
9
+ }
10
+ .dropzone {
11
+ position: relative;
12
+ border: 1px solid rgba(0,0,0,0.08);
13
+ background: rgba(0,0,0,0.02);
14
+ padding: 1em;
15
+ }
16
+ .dropzone.dz-clickable {
17
+ cursor: pointer;
18
+ }
19
+ .dropzone.dz-clickable .dz-message,
20
+ .dropzone.dz-clickable .dz-message span {
21
+ cursor: pointer;
22
+ }
23
+ .dropzone.dz-clickable * {
24
+ cursor: default;
25
+ }
26
+ .dropzone .dz-message {
27
+ opacity: 1;
28
+ -ms-filter: none;
29
+ filter: none;
30
+ }
31
+ .dropzone.dz-drag-hover {
32
+ border-color: rgba(0,0,0,0.15);
33
+ background: rgba(0,0,0,0.04);
34
+ }
35
+ .dropzone.dz-started .dz-message {
36
+ display: none;
37
+ }
38
+ .dropzone .dz-preview,
39
+ .dropzone-previews .dz-preview {
40
+ background: rgba(255,255,255,0.8);
41
+ position: relative;
42
+ display: inline-block;
43
+ margin: 17px;
44
+ vertical-align: top;
45
+ border: 1px solid #acacac;
46
+ padding: 6px 6px 6px 6px;
47
+ }
48
+ .dropzone .dz-preview.dz-file-preview [data-dz-thumbnail],
49
+ .dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail] {
50
+ display: none;
51
+ }
52
+ .dropzone .dz-preview .dz-details,
53
+ .dropzone-previews .dz-preview .dz-details {
54
+ width: 100px;
55
+ height: 100px;
56
+ position: relative;
57
+ background: #ebebeb;
58
+ padding: 5px;
59
+ margin-bottom: 22px;
60
+ }
61
+ .dropzone .dz-preview .dz-details .dz-filename,
62
+ .dropzone-previews .dz-preview .dz-details .dz-filename {
63
+ overflow: hidden;
64
+ height: 100%;
65
+ }
66
+ .dropzone .dz-preview .dz-details img,
67
+ .dropzone-previews .dz-preview .dz-details img {
68
+ position: absolute;
69
+ top: 0;
70
+ left: 0;
71
+ width: 100px;
72
+ height: 100px;
73
+ }
74
+ .dropzone .dz-preview .dz-details .dz-size,
75
+ .dropzone-previews .dz-preview .dz-details .dz-size {
76
+ position: absolute;
77
+ bottom: -28px;
78
+ left: 3px;
79
+ height: 28px;
80
+ line-height: 28px;
81
+ }
82
+ .dropzone .dz-preview.dz-error .dz-error-mark,
83
+ .dropzone-previews .dz-preview.dz-error .dz-error-mark {
84
+ display: block;
85
+ }
86
+ .dropzone .dz-preview.dz-success .dz-success-mark,
87
+ .dropzone-previews .dz-preview.dz-success .dz-success-mark {
88
+ display: block;
89
+ }
90
+ .dropzone .dz-preview:hover .dz-details img,
91
+ .dropzone-previews .dz-preview:hover .dz-details img {
92
+ display: none;
93
+ }
94
+ .dropzone .dz-preview .dz-success-mark,
95
+ .dropzone-previews .dz-preview .dz-success-mark,
96
+ .dropzone .dz-preview .dz-error-mark,
97
+ .dropzone-previews .dz-preview .dz-error-mark {
98
+ display: none;
99
+ position: absolute;
100
+ width: 40px;
101
+ height: 40px;
102
+ font-size: 30px;
103
+ text-align: center;
104
+ right: -10px;
105
+ top: -10px;
106
+ }
107
+ .dropzone .dz-preview .dz-success-mark,
108
+ .dropzone-previews .dz-preview .dz-success-mark {
109
+ color: #8cc657;
110
+ }
111
+ .dropzone .dz-preview .dz-error-mark,
112
+ .dropzone-previews .dz-preview .dz-error-mark {
113
+ color: #ee162d;
114
+ }
115
+ .dropzone .dz-preview .dz-progress,
116
+ .dropzone-previews .dz-preview .dz-progress {
117
+ position: absolute;
118
+ top: 100px;
119
+ left: 6px;
120
+ right: 6px;
121
+ height: 6px;
122
+ background: #d7d7d7;
123
+ display: none;
124
+ }
125
+ .dropzone .dz-preview .dz-progress .dz-upload,
126
+ .dropzone-previews .dz-preview .dz-progress .dz-upload {
127
+ position: absolute;
128
+ top: 0;
129
+ bottom: 0;
130
+ left: 0;
131
+ width: 0%;
132
+ background-color: #8cc657;
133
+ }
134
+ .dropzone .dz-preview.dz-processing .dz-progress,
135
+ .dropzone-previews .dz-preview.dz-processing .dz-progress {
136
+ display: block;
137
+ }
138
+ .dropzone .dz-preview .dz-error-message,
139
+ .dropzone-previews .dz-preview .dz-error-message {
140
+ display: none;
141
+ position: absolute;
142
+ top: -5px;
143
+ left: -20px;
144
+ background: rgba(245,245,245,0.8);
145
+ padding: 8px 10px;
146
+ color: #800;
147
+ min-width: 140px;
148
+ max-width: 500px;
149
+ z-index: 500;
150
+ }
151
+ .dropzone .dz-preview:hover.dz-error .dz-error-message,
152
+ .dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
153
+ display: block;
154
+ }
155
+ .dropzone {
156
+ border: 1px solid rgba(0,0,0,0.03);
157
+ min-height: 360px;
158
+ -webkit-border-radius: 3px;
159
+ border-radius: 3px;
160
+ background: rgba(0,0,0,0.03);
161
+ padding: 23px;
162
+ }
163
+ .dropzone .dz-default.dz-message {
164
+ opacity: 1;
165
+ -ms-filter: none;
166
+ filter: none;
167
+ -webkit-transition: opacity 0.3s ease-in-out;
168
+ -moz-transition: opacity 0.3s ease-in-out;
169
+ -o-transition: opacity 0.3s ease-in-out;
170
+ -ms-transition: opacity 0.3s ease-in-out;
171
+ transition: opacity 0.3s ease-in-out;
172
+ background-image: image-url("dropzonejs/spritemap.png");
173
+ background-repeat: no-repeat;
174
+ background-position: 0 0;
175
+ position: absolute;
176
+ width: 428px;
177
+ height: 123px;
178
+ margin-left: -214px;
179
+ margin-top: -61.5px;
180
+ top: 50%;
181
+ left: 50%;
182
+ }
183
+ @media all and (-webkit-min-device-pixel-ratio: 1.5) {
184
+ .dropzone .dz-default.dz-message {
185
+ background-image: image-url("dropzonejs/spritemap@2x.png");
186
+ -webkit-background-size: 428px 406px;
187
+ -moz-background-size: 428px 406px;
188
+ background-size: 428px 406px;
189
+ }
190
+ }
191
+ .dropzone .dz-default.dz-message span {
192
+ display: none;
193
+ }
194
+ .dropzone.dz-square .dz-default.dz-message {
195
+ background-position: 0 -123px;
196
+ width: 268px;
197
+ margin-left: -134px;
198
+ height: 174px;
199
+ margin-top: -87px;
200
+ }
201
+ .dropzone.dz-drag-hover .dz-message {
202
+ opacity: 0.15;
203
+ filter: alpha(opacity=15);
204
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
205
+ }
206
+ .dropzone.dz-started .dz-message {
207
+ display: block;
208
+ opacity: 0;
209
+ filter: alpha(opacity=0);
210
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
211
+ }
212
+ .dropzone .dz-preview,
213
+ .dropzone-previews .dz-preview {
214
+ -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
215
+ box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
216
+ font-size: 14px;
217
+ }
218
+ .dropzone .dz-preview.dz-image-preview:hover .dz-details img,
219
+ .dropzone-previews .dz-preview.dz-image-preview:hover .dz-details img {
220
+ display: block;
221
+ opacity: 0.1;
222
+ filter: alpha(opacity=10);
223
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
224
+ }
225
+ .dropzone .dz-preview.dz-success .dz-success-mark,
226
+ .dropzone-previews .dz-preview.dz-success .dz-success-mark {
227
+ opacity: 1;
228
+ -ms-filter: none;
229
+ filter: none;
230
+ }
231
+ .dropzone .dz-preview.dz-error .dz-error-mark,
232
+ .dropzone-previews .dz-preview.dz-error .dz-error-mark {
233
+ opacity: 1;
234
+ -ms-filter: none;
235
+ filter: none;
236
+ }
237
+ .dropzone .dz-preview.dz-error .dz-progress .dz-upload,
238
+ .dropzone-previews .dz-preview.dz-error .dz-progress .dz-upload {
239
+ background: #ee1e2d;
240
+ }
241
+ .dropzone .dz-preview .dz-error-mark,
242
+ .dropzone-previews .dz-preview .dz-error-mark,
243
+ .dropzone .dz-preview .dz-success-mark,
244
+ .dropzone-previews .dz-preview .dz-success-mark {
245
+ display: block;
246
+ opacity: 0;
247
+ filter: alpha(opacity=0);
248
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
249
+ -webkit-transition: opacity 0.4s ease-in-out;
250
+ -moz-transition: opacity 0.4s ease-in-out;
251
+ -o-transition: opacity 0.4s ease-in-out;
252
+ -ms-transition: opacity 0.4s ease-in-out;
253
+ transition: opacity 0.4s ease-in-out;
254
+ background-image: image-url("dropzonejs/spritemap.png");
255
+ background-repeat: no-repeat;
256
+ }
257
+ @media all and (-webkit-min-device-pixel-ratio: 1.5) {
258
+ .dropzone .dz-preview .dz-error-mark,
259
+ .dropzone-previews .dz-preview .dz-error-mark,
260
+ .dropzone .dz-preview .dz-success-mark,
261
+ .dropzone-previews .dz-preview .dz-success-mark {
262
+ background-image: image-url("dropzonejs/spritemap@2x.png");
263
+ -webkit-background-size: 428px 406px;
264
+ -moz-background-size: 428px 406px;
265
+ background-size: 428px 406px;
266
+ }
267
+ }
268
+ .dropzone .dz-preview .dz-error-mark span,
269
+ .dropzone-previews .dz-preview .dz-error-mark span,
270
+ .dropzone .dz-preview .dz-success-mark span,
271
+ .dropzone-previews .dz-preview .dz-success-mark span {
272
+ display: none;
273
+ }
274
+ .dropzone .dz-preview .dz-error-mark,
275
+ .dropzone-previews .dz-preview .dz-error-mark {
276
+ background-position: -268px -123px;
277
+ }
278
+ .dropzone .dz-preview .dz-success-mark,
279
+ .dropzone-previews .dz-preview .dz-success-mark {
280
+ background-position: -268px -163px;
281
+ }
282
+ .dropzone .dz-preview .dz-progress .dz-upload,
283
+ .dropzone-previews .dz-preview .dz-progress .dz-upload {
284
+ -webkit-animation: loading 0.4s linear infinite;
285
+ -moz-animation: loading 0.4s linear infinite;
286
+ -o-animation: loading 0.4s linear infinite;
287
+ -ms-animation: loading 0.4s linear infinite;
288
+ animation: loading 0.4s linear infinite;
289
+ -webkit-transition: width 0.3s ease-in-out;
290
+ -moz-transition: width 0.3s ease-in-out;
291
+ -o-transition: width 0.3s ease-in-out;
292
+ -ms-transition: width 0.3s ease-in-out;
293
+ transition: width 0.3s ease-in-out;
294
+ -webkit-border-radius: 2px;
295
+ border-radius: 2px;
296
+ position: absolute;
297
+ top: 0;
298
+ left: 0;
299
+ width: 0%;
300
+ height: 100%;
301
+ background-image: image-url("dropzonejs/spritemap.png");
302
+ background-repeat: repeat-x;
303
+ background-position: 0px -400px;
304
+ }
305
+ @media all and (-webkit-min-device-pixel-ratio: 1.5) {
306
+ .dropzone .dz-preview .dz-progress .dz-upload,
307
+ .dropzone-previews .dz-preview .dz-progress .dz-upload {
308
+ background-image: image-url("dropzonejs/spritemap@2x.png");
309
+ -webkit-background-size: 428px 406px;
310
+ -moz-background-size: 428px 406px;
311
+ background-size: 428px 406px;
312
+ }
313
+ }
314
+ .dropzone .dz-preview.dz-success .dz-progress,
315
+ .dropzone-previews .dz-preview.dz-success .dz-progress {
316
+ display: block;
317
+ opacity: 0;
318
+ filter: alpha(opacity=0);
319
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
320
+ -webkit-transition: opacity 0.4s ease-in-out;
321
+ -moz-transition: opacity 0.4s ease-in-out;
322
+ -o-transition: opacity 0.4s ease-in-out;
323
+ -ms-transition: opacity 0.4s ease-in-out;
324
+ transition: opacity 0.4s ease-in-out;
325
+ }
326
+ .dropzone .dz-preview .dz-error-message,
327
+ .dropzone-previews .dz-preview .dz-error-message {
328
+ display: block;
329
+ opacity: 0;
330
+ filter: alpha(opacity=0);
331
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
332
+ -webkit-transition: opacity 0.3s ease-in-out;
333
+ -moz-transition: opacity 0.3s ease-in-out;
334
+ -o-transition: opacity 0.3s ease-in-out;
335
+ -ms-transition: opacity 0.3s ease-in-out;
336
+ transition: opacity 0.3s ease-in-out;
337
+ }
338
+ .dropzone .dz-preview:hover.dz-error .dz-error-message,
339
+ .dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
340
+ opacity: 1;
341
+ -ms-filter: none;
342
+ filter: none;
343
+ }
344
+ .dropzone a.dz-remove,
345
+ .dropzone-previews a.dz-remove {
346
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #eee));
347
+ background-image: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
348
+ background-image: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
349
+ background-image: -o-linear-gradient(top, #fafafa 0%, #eee 100%);
350
+ background-image: -ms-linear-gradient(top, #fafafa 0%, #eee 100%);
351
+ background-image: linear-gradient(top, #fafafa 0%, #eee 100%);
352
+ -webkit-border-radius: 2px;
353
+ border-radius: 2px;
354
+ border: 1px solid #eee;
355
+ text-decoration: none;
356
+ display: block;
357
+ padding: 4px 5px;
358
+ text-align: center;
359
+ color: #aaa;
360
+ margin-top: 26px;
361
+ }
362
+ .dropzone a.dz-remove:hover,
363
+ .dropzone-previews a.dz-remove:hover {
364
+ color: #666;
365
+ }
366
+ @-moz-keyframes loading {
367
+ 0% {
368
+ background-position: 0 -400px;
369
+ }
370
+
371
+ 100% {
372
+ background-position: -7px -400px;
373
+ }
374
+ }
375
+ @-webkit-keyframes loading {
376
+ 0% {
377
+ background-position: 0 -400px;
378
+ }
379
+
380
+ 100% {
381
+ background-position: -7px -400px;
382
+ }
383
+ }
384
+ @-o-keyframes loading {
385
+ 0% {
386
+ background-position: 0 -400px;
387
+ }
388
+
389
+ 100% {
390
+ background-position: -7px -400px;
391
+ }
392
+ }
393
+ @-ms-keyframes loading {
394
+ 0% {
395
+ background-position: 0 -400px;
396
+ }
397
+
398
+ 100% {
399
+ background-position: -7px -400px;
400
+ }
401
+ }
402
+ @keyframes loading {
403
+ 0% {
404
+ background-position: 0 -400px;
405
+ }
406
+
407
+ 100% {
408
+ background-position: -7px -400px;
409
+ }
410
+ }