activeadmin-dropzone 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,48 @@
1
+ //= require dropzone
2
+
3
+ .dropzone {
4
+ margin: 10px 20px;
5
+ border: 1px solid #ccc;
6
+
7
+ a {
8
+ text-decoration: none;
9
+ font-size: 13px;
10
+ color: #666;
11
+ cursor: pointer;
12
+
13
+ &:hover {
14
+ color: #000;
15
+ }
16
+ }
17
+
18
+ span.notice {
19
+ position: absolute;
20
+ bottom: 10px;
21
+ right: 10px;
22
+ color: #666;
23
+ }
24
+
25
+ &:hover {
26
+ span.notice {
27
+ color: #000;
28
+ }
29
+ }
30
+ }
31
+
32
+ .dropzone-hint {
33
+ margin: 0 0 0 20px;
34
+ font-size: 0.95em;
35
+ font-style: italic;
36
+ color: #666;
37
+ }
38
+
39
+ .sortable-placeholder {
40
+ position: relative;
41
+ display: inline-block;
42
+ margin: 17px !important;
43
+ vertical-align: top;
44
+ border: 1px dashed #acacac !important;
45
+ padding: 6px 6px 6px 6px !important;
46
+ width: 112px !important;
47
+ height: 166px !important;
48
+ }
@@ -0,0 +1,411 @@
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: url("/assets/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
+ display: none;
183
+ }
184
+ @media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
185
+ .dropzone .dz-default.dz-message {
186
+ background-image: url("/assets/spritemap@2x.png");
187
+ -webkit-background-size: 428px 406px;
188
+ -moz-background-size: 428px 406px;
189
+ background-size: 428px 406px;
190
+ }
191
+ }
192
+ .dropzone .dz-default.dz-message span {
193
+ display: none;
194
+ }
195
+ .dropzone.dz-square .dz-default.dz-message {
196
+ background-position: 0 -123px;
197
+ width: 268px;
198
+ margin-left: -134px;
199
+ height: 174px;
200
+ margin-top: -87px;
201
+ }
202
+ .dropzone.dz-drag-hover .dz-message {
203
+ opacity: 0.15;
204
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
205
+ filter: alpha(opacity=15);
206
+ }
207
+ .dropzone.dz-started .dz-message {
208
+ display: block;
209
+ opacity: 0;
210
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
211
+ filter: alpha(opacity=0);
212
+ }
213
+ .dropzone .dz-preview,
214
+ .dropzone-previews .dz-preview {
215
+ -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
216
+ box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
217
+ font-size: 14px;
218
+ }
219
+ .dropzone .dz-preview.dz-image-preview:hover .dz-details img,
220
+ .dropzone-previews .dz-preview.dz-image-preview:hover .dz-details img {
221
+ display: block;
222
+ opacity: 0.1;
223
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
224
+ filter: alpha(opacity=10);
225
+ }
226
+ .dropzone .dz-preview.dz-success .dz-success-mark,
227
+ .dropzone-previews .dz-preview.dz-success .dz-success-mark {
228
+ opacity: 1;
229
+ -ms-filter: none;
230
+ filter: none;
231
+ }
232
+ .dropzone .dz-preview.dz-error .dz-error-mark,
233
+ .dropzone-previews .dz-preview.dz-error .dz-error-mark {
234
+ opacity: 1;
235
+ -ms-filter: none;
236
+ filter: none;
237
+ }
238
+ .dropzone .dz-preview.dz-error .dz-progress .dz-upload,
239
+ .dropzone-previews .dz-preview.dz-error .dz-progress .dz-upload {
240
+ background: #ee1e2d;
241
+ }
242
+ .dropzone .dz-preview .dz-error-mark,
243
+ .dropzone-previews .dz-preview .dz-error-mark,
244
+ .dropzone .dz-preview .dz-success-mark,
245
+ .dropzone-previews .dz-preview .dz-success-mark {
246
+ display: block;
247
+ opacity: 0;
248
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
249
+ filter: alpha(opacity=0);
250
+ -webkit-transition: opacity 0.4s ease-in-out;
251
+ -moz-transition: opacity 0.4s ease-in-out;
252
+ -o-transition: opacity 0.4s ease-in-out;
253
+ -ms-transition: opacity 0.4s ease-in-out;
254
+ transition: opacity 0.4s ease-in-out;
255
+ background-image: url("/assets/spritemap.png");
256
+ background-repeat: no-repeat;
257
+ }
258
+ @media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
259
+ .dropzone .dz-preview .dz-error-mark,
260
+ .dropzone-previews .dz-preview .dz-error-mark,
261
+ .dropzone .dz-preview .dz-success-mark,
262
+ .dropzone-previews .dz-preview .dz-success-mark {
263
+ background-image: url("/assets/spritemap@2x.png");
264
+ -webkit-background-size: 428px 406px;
265
+ -moz-background-size: 428px 406px;
266
+ background-size: 428px 406px;
267
+ }
268
+ }
269
+ .dropzone .dz-preview .dz-error-mark span,
270
+ .dropzone-previews .dz-preview .dz-error-mark span,
271
+ .dropzone .dz-preview .dz-success-mark span,
272
+ .dropzone-previews .dz-preview .dz-success-mark span {
273
+ display: none;
274
+ }
275
+ .dropzone .dz-preview .dz-error-mark,
276
+ .dropzone-previews .dz-preview .dz-error-mark {
277
+ background-position: -268px -123px;
278
+ }
279
+ .dropzone .dz-preview .dz-success-mark,
280
+ .dropzone-previews .dz-preview .dz-success-mark {
281
+ background-position: -268px -163px;
282
+ }
283
+ .dropzone .dz-preview .dz-progress .dz-upload,
284
+ .dropzone-previews .dz-preview .dz-progress .dz-upload {
285
+ -webkit-animation: loading 0.4s linear infinite;
286
+ -moz-animation: loading 0.4s linear infinite;
287
+ -o-animation: loading 0.4s linear infinite;
288
+ -ms-animation: loading 0.4s linear infinite;
289
+ animation: loading 0.4s linear infinite;
290
+ -webkit-transition: width 0.3s ease-in-out;
291
+ -moz-transition: width 0.3s ease-in-out;
292
+ -o-transition: width 0.3s ease-in-out;
293
+ -ms-transition: width 0.3s ease-in-out;
294
+ transition: width 0.3s ease-in-out;
295
+ -webkit-border-radius: 2px;
296
+ border-radius: 2px;
297
+ position: absolute;
298
+ top: 0;
299
+ left: 0;
300
+ width: 0%;
301
+ height: 100%;
302
+ background-image: url("/assets/spritemap.png");
303
+ background-repeat: repeat-x;
304
+ background-position: 0px -400px;
305
+ }
306
+ @media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
307
+ .dropzone .dz-preview .dz-progress .dz-upload,
308
+ .dropzone-previews .dz-preview .dz-progress .dz-upload {
309
+ background-image: url("/assets/spritemap@2x.png");
310
+ -webkit-background-size: 428px 406px;
311
+ -moz-background-size: 428px 406px;
312
+ background-size: 428px 406px;
313
+ }
314
+ }
315
+ .dropzone .dz-preview.dz-success .dz-progress,
316
+ .dropzone-previews .dz-preview.dz-success .dz-progress {
317
+ display: block;
318
+ opacity: 0;
319
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
320
+ filter: alpha(opacity=0);
321
+ -webkit-transition: opacity 0.4s ease-in-out;
322
+ -moz-transition: opacity 0.4s ease-in-out;
323
+ -o-transition: opacity 0.4s ease-in-out;
324
+ -ms-transition: opacity 0.4s ease-in-out;
325
+ transition: opacity 0.4s ease-in-out;
326
+ }
327
+ .dropzone .dz-preview .dz-error-message,
328
+ .dropzone-previews .dz-preview .dz-error-message {
329
+ display: block;
330
+ opacity: 0;
331
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
332
+ filter: alpha(opacity=0);
333
+ -webkit-transition: opacity 0.3s ease-in-out;
334
+ -moz-transition: opacity 0.3s ease-in-out;
335
+ -o-transition: opacity 0.3s ease-in-out;
336
+ -ms-transition: opacity 0.3s ease-in-out;
337
+ transition: opacity 0.3s ease-in-out;
338
+ }
339
+ .dropzone .dz-preview:hover.dz-error .dz-error-message,
340
+ .dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
341
+ opacity: 1;
342
+ -ms-filter: none;
343
+ filter: none;
344
+ }
345
+ .dropzone a.dz-remove,
346
+ .dropzone-previews a.dz-remove {
347
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #eee));
348
+ background-image: -webkit-linear-gradient(top, #fafafa 0, #eee 100%);
349
+ background-image: -moz-linear-gradient(top, #fafafa 0, #eee 100%);
350
+ background-image: -o-linear-gradient(top, #fafafa 0, #eee 100%);
351
+ background-image: -ms-linear-gradient(top, #fafafa 0, #eee 100%);
352
+ background-image: linear-gradient(top, #fafafa 0, #eee 100%);
353
+ -webkit-border-radius: 2px;
354
+ border-radius: 2px;
355
+ border: 1px solid #eee;
356
+ text-decoration: none;
357
+ display: block;
358
+ padding: 4px 5px;
359
+ text-align: center;
360
+ color: #aaa;
361
+ margin-top: 26px;
362
+ }
363
+ .dropzone a.dz-remove:hover,
364
+ .dropzone-previews a.dz-remove:hover {
365
+ color: #666;
366
+ }
367
+ @-moz-keyframes loading {
368
+ 0% {
369
+ background-position: 0 -400px;
370
+ }
371
+
372
+ 100% {
373
+ background-position: -7px -400px;
374
+ }
375
+ }
376
+ @-webkit-keyframes loading {
377
+ 0% {
378
+ background-position: 0 -400px;
379
+ }
380
+
381
+ 100% {
382
+ background-position: -7px -400px;
383
+ }
384
+ }
385
+ @-o-keyframes loading {
386
+ 0% {
387
+ background-position: 0 -400px;
388
+ }
389
+
390
+ 100% {
391
+ background-position: -7px -400px;
392
+ }
393
+ }
394
+ @-ms-keyframes loading {
395
+ 0% {
396
+ background-position: 0 -400px;
397
+ }
398
+
399
+ 100% {
400
+ background-position: -7px -400px;
401
+ }
402
+ }
403
+ @keyframes loading {
404
+ 0% {
405
+ background-position: 0 -400px;
406
+ }
407
+
408
+ 100% {
409
+ background-position: -7px -400px;
410
+ }
411
+ }