dropify-rails 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,34 @@
1
+ //= depend_on_asset "dropify.eot"
2
+ //= depend_on_asset "dropify.woff"
3
+ //= depend_on_asset "dropify.ttf"
4
+ //= depend_on_asset "dropify.svg"
5
+
6
+ @font-face {
7
+ font-family: 'dropify';
8
+ src: url('<%= font_path('dropify.eot') %>');
9
+ src: url('<%= font_path('dropify.eot') %>?#iefix') format('embedded-opentype'),
10
+ url('<%= font_path('dropify.woff') %>') format('woff'),
11
+ url('<%= font_path('dropify.tff') %>') format('truetype'),
12
+ url('<%= font_path('dropify.svg') %>') format('svg');
13
+ font-weight: normal;
14
+ font-style: normal;
15
+ }
16
+
17
+ [class^="dropify-font-"]:before, [class*=" dropify-font-"]:before, .dropify-font:before {
18
+ font-family: "dropify";
19
+ font-style: normal;
20
+ font-weight: normal;
21
+ speak: none;
22
+ display: inline-block;
23
+ text-decoration: inherit;
24
+ width: 1em;
25
+ margin-left: .2em;
26
+ margin-right: .2em;
27
+ text-align: center;
28
+ font-variant: normal;
29
+ text-transform: none;
30
+ line-height: 1em;
31
+ }
32
+
33
+ .dropify-font-upload:before { content: '\e800'; }
34
+ .dropify-font-file:before { content: '\e801'; }
@@ -0,0 +1,483 @@
1
+ $dropify-width: 100% !default;
2
+ $dropify-height: 200px !default;
3
+ $dropify-font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial" !default;
4
+ $dropify-font-size: 14px !default;
5
+ $dropify-line-height: 22px !default;
6
+ $dropify-text-color: #777 !default;
7
+ $dropify-icon-color: #CCC !default;
8
+ $dropify-background: #FFF !default;
9
+ $dropify-border-size: 2px !default;
10
+ $dropify-border-color: #E5E5E5 !default;
11
+ $dropify-infos-background: transparentize(#000, 0.3) !default;
12
+ $dropify-infos-color: #FFF !default;
13
+ $dropify-clear-color: #FFF !default;
14
+ $dropify-error-color: #F34141 !default;
15
+ $dropify-stripes: #F6F6F6 !default;
16
+ $dropify-loader-size: 20px !default;
17
+ $dropify-loader-border: 1px !default;
18
+ $dropify-loader-fill: #CCC !default;
19
+ $dropify-loader-trace: #777 !default;
20
+ $dropify-font-path: "../fonts" !default;
21
+
22
+ @import "dropify-font";
23
+
24
+ .dropify-wrapper {
25
+ display: block;
26
+ position: relative;
27
+ cursor: pointer;
28
+ overflow: hidden;
29
+ width: $dropify-width;
30
+ max-width: 100%;
31
+ height: $dropify-height;
32
+ padding: 5px 10px;
33
+ font-family: $dropify-font-family;
34
+ font-size: $dropify-font-size;
35
+ line-height: $dropify-line-height;
36
+ color: $dropify-text-color;
37
+ background-color: $dropify-background;
38
+ background-image: none;
39
+ text-align: center;
40
+ border: $dropify-border-size solid $dropify-border-color;
41
+ transition: border-color 0.15s linear;
42
+
43
+ &:hover {
44
+ background-size: 30px 30px;
45
+ background-image: linear-gradient(
46
+ -45deg,
47
+ $dropify-stripes 25%,
48
+ transparent 25%,
49
+ transparent 50%,
50
+ $dropify-stripes 50%,
51
+ $dropify-stripes 75%,
52
+ transparent 75%,
53
+ transparent
54
+ );
55
+ animation: stripes 2s linear infinite;
56
+ }
57
+
58
+ &.has-preview {
59
+ .dropify-clear {
60
+ display: block;
61
+ }
62
+ }
63
+
64
+ &.has-error {
65
+ border-color: $dropify-error-color;
66
+
67
+ .dropify-message .dropify-error, {
68
+ display: block;
69
+ }
70
+
71
+ &:hover {
72
+ .dropify-errors-container {
73
+ visibility: visible;
74
+ opacity: 1;
75
+ transition-delay: 0s;
76
+ }
77
+ }
78
+ }
79
+
80
+ &.disabled {
81
+ input {
82
+ cursor: not-allowed;
83
+ }
84
+
85
+ &:hover {
86
+ background-image: none;
87
+ animation: none;
88
+ }
89
+
90
+ .dropify-message {
91
+ opacity: 0.5;
92
+ text-decoration: line-through;
93
+ }
94
+
95
+ .dropify-infos-message {
96
+ display: none;
97
+ }
98
+ }
99
+
100
+ input {
101
+ position: absolute;
102
+ top: 0;
103
+ right: 0;
104
+ bottom: 0;
105
+ left: 0;
106
+ height: 100%;
107
+ width: 100%;
108
+ opacity: 0;
109
+ cursor: pointer;
110
+ z-index: 5;
111
+ }
112
+
113
+ .dropify-message {
114
+ position: relative;
115
+ top: 50%;
116
+ transform: translateY(-50%);
117
+
118
+ span.file-icon {
119
+ @extend .dropify-font;
120
+ @extend .dropify-font-upload;
121
+ font-size: 50px;
122
+ color: $dropify-icon-color;
123
+ }
124
+
125
+ p {
126
+ margin: 5px 0 0 0;
127
+ text-align: center;
128
+
129
+ &.dropify-error {
130
+ color: $dropify-error-color;
131
+ font-weight: bold;
132
+ display: none;
133
+ }
134
+ }
135
+ }
136
+
137
+ .dropify-clear {
138
+ display: none;
139
+ position: absolute;
140
+ opacity: 0;
141
+ z-index: 7;
142
+ top: 10px;
143
+ right: 10px;
144
+ background: none;
145
+ border: 2px solid $dropify-clear-color;
146
+ text-transform: uppercase;
147
+ font-family: $dropify-font-family;
148
+ font-size: 11px;
149
+ padding: 4px 8px;
150
+ font-weight: bold;
151
+ color: $dropify-clear-color;
152
+ transition: all 0.15s linear;
153
+
154
+ &:hover {
155
+ background: transparentize($dropify-clear-color, 0.8);
156
+ }
157
+ }
158
+
159
+ .dropify-preview {
160
+ display: none;
161
+ position: absolute;
162
+ z-index: 1;
163
+ background-color: $dropify-background;
164
+ padding: 5px;
165
+ width: 100%;
166
+ height: 100%;
167
+ top: 0;
168
+ right: 0;
169
+ bottom: 0;
170
+ left: 0;
171
+ overflow: hidden;
172
+ text-align: center;
173
+
174
+
175
+ .dropify-render {
176
+ img {
177
+ top: 50%;
178
+ transform: translate(0, -50%);
179
+ position: relative;
180
+ max-width: 100%;
181
+ max-height: 100%;
182
+ background-color: $dropify-background;
183
+ transition: border-color 0.15s linear;
184
+ }
185
+
186
+ i {
187
+ font-size: 70px;
188
+ top: 50%;
189
+ left: 50%;
190
+ transform: translate(-50%, -50%);
191
+ position: absolute;
192
+ color: #777;
193
+ }
194
+
195
+ .dropify-extension {
196
+ position: absolute;
197
+ top: 50%;
198
+ left: 50%;
199
+ transform: translate(-50%, -50%);
200
+ margin-top: 10px;
201
+ text-transform: uppercase;
202
+ font-weight: 900;
203
+ letter-spacing: -0.03em;
204
+ font-size: 13px;
205
+ width: 42px;
206
+ white-space: nowrap;
207
+ overflow: hidden;
208
+ text-overflow: ellipsis;
209
+ }
210
+ }
211
+
212
+ .dropify-infos {
213
+ position: absolute;
214
+ left: 0;
215
+ top: 0;
216
+ right: 0;
217
+ bottom: 0;
218
+ z-index: 3;
219
+ background: $dropify-infos-background;
220
+ opacity: 0;
221
+ transition: opacity 0.15s linear;
222
+
223
+ .dropify-infos-inner {
224
+ position: absolute;
225
+ top: 50%;
226
+ transform: translate(0, -40%);
227
+ backface-visibility: hidden;
228
+ width: 100%;
229
+ padding: 0 20px;
230
+ transition: all 0.2s ease;
231
+
232
+ p {
233
+ padding: 0;
234
+ margin: 0;
235
+ position: relative;
236
+ width: 100%;
237
+ white-space: nowrap;
238
+ overflow: hidden;
239
+ text-overflow: ellipsis;
240
+ color: $dropify-infos-color;
241
+ text-align: center;
242
+ line-height: 25px;
243
+ font-weight: bold;
244
+
245
+ &.dropify-filename {
246
+ span.file-icon {
247
+ @extend .dropify-font;
248
+ @extend .dropify-font-empty !optional;
249
+ margin-right: 2px;
250
+ }
251
+ }
252
+
253
+ &.dropify-infos-message {
254
+ margin-top: 15px;
255
+ padding-top: 15px;
256
+ font-size: 12px;
257
+ position: relative;
258
+ opacity: 0.5;
259
+
260
+ &::before {
261
+ content: '';
262
+ position: absolute;
263
+ top: 0;
264
+ left: 50%;
265
+ transform: translate(-50%, 0);
266
+ background: $dropify-infos-color;
267
+ width: 30px;
268
+ height: 2px;
269
+ }
270
+ }
271
+ }
272
+ }
273
+
274
+ }
275
+ }
276
+
277
+ &:hover {
278
+ .dropify-clear {
279
+ opacity: 1;
280
+ }
281
+
282
+ .dropify-preview {
283
+ .dropify-infos {
284
+ opacity: 1;
285
+
286
+ .dropify-infos-inner {
287
+ margin-top: -5px;
288
+ }
289
+ }
290
+ }
291
+ }
292
+
293
+ &.touch-fallback {
294
+ height: auto !important;
295
+
296
+ &:hover {
297
+ background-image: none;
298
+ animation: none;
299
+ }
300
+
301
+ .dropify-preview {
302
+ position: relative;
303
+ padding: 0;
304
+
305
+ .dropify-render {
306
+ display: block;
307
+ position: relative;
308
+
309
+ .dropify-font-file {
310
+ position: relative;
311
+ transform: translate(0, 0);
312
+ top: 0;
313
+ left: 0;
314
+
315
+ &::before {
316
+ margin-top: 30px;
317
+ margin-bottom: 30px;
318
+ }
319
+ }
320
+
321
+ img {
322
+ position: relative;
323
+ transform: translate(0, 0);
324
+ }
325
+ }
326
+
327
+ .dropify-infos {
328
+ position: relative;
329
+ opacity: 1;
330
+ background: transparent;
331
+
332
+ .dropify-infos-inner {
333
+ position: relative;
334
+ top: 0;
335
+ transform: translate(0, 0);
336
+ padding: 5px 90px 5px 0;
337
+
338
+ p {
339
+ padding: 0;
340
+ margin: 0;
341
+ position: relative;
342
+ width: 100%;
343
+ white-space: nowrap;
344
+ overflow: hidden;
345
+ text-overflow: ellipsis;
346
+ color: $dropify-text-color;
347
+ text-align: left;
348
+ line-height: 25px;
349
+
350
+ &.dropify-filename {
351
+ font-weight: bold;
352
+ }
353
+
354
+ &.dropify-infos-message {
355
+ margin-top: 0;
356
+ padding-top: 0;
357
+ font-size: 11px;
358
+ position: relative;
359
+ opacity: 1;
360
+
361
+ &::before {
362
+ display: none;
363
+ }
364
+ }
365
+ }
366
+ }
367
+ }
368
+ }
369
+
370
+ .dropify-message {
371
+ transform: translate(0, 0);
372
+ padding: 40px 0;
373
+ }
374
+
375
+ .dropify-clear {
376
+ top: auto;
377
+ bottom: 23px;
378
+ opacity: 1;
379
+ border-color: transparentize($dropify-text-color, 0.3);
380
+ color: $dropify-text-color;
381
+ }
382
+
383
+ &.has-preview {
384
+ .dropify-message {
385
+ display: none;
386
+ }
387
+ }
388
+
389
+ &:hover {
390
+ .dropify-preview {
391
+ .dropify-infos {
392
+ .dropify-infos-inner {
393
+ margin-top: 0;
394
+ }
395
+ }
396
+ }
397
+ }
398
+ }
399
+
400
+ .dropify-loader {
401
+ position: absolute;
402
+ top: 15px;
403
+ right: 15px;
404
+ display: none;
405
+ z-index: 9;
406
+
407
+ &::after {
408
+ display: block;
409
+ position: relative;
410
+ width: $dropify-loader-size;
411
+ height: $dropify-loader-size;
412
+ animation: rotate 0.6s linear infinite;
413
+ border-radius: 100%;
414
+ border-top: $dropify-loader-border solid $dropify-loader-fill;
415
+ border-bottom: $dropify-loader-border solid $dropify-loader-trace;
416
+ border-left: $dropify-loader-border solid $dropify-loader-fill;
417
+ border-right: $dropify-loader-border solid $dropify-loader-trace;
418
+ content: '';
419
+ }
420
+ }
421
+
422
+ .dropify-errors-container {
423
+ position: absolute;
424
+ left: 0;
425
+ top: 0;
426
+ right: 0;
427
+ bottom: 0;
428
+ z-index: 3;
429
+ background: transparentize($dropify-error-color, 0.2);
430
+ text-align: left;
431
+ visibility: hidden;
432
+ opacity: 0;
433
+ transition: visibility 0s linear 0.15s,opacity 0.15s linear;
434
+
435
+ ul {
436
+ padding: 10px 20px;
437
+ margin: 0;
438
+ position: absolute;
439
+ left: 0;
440
+ top: 50%;
441
+ transform: translateY(-50%);
442
+
443
+ li {
444
+ margin-left: 20px;
445
+ color: #FFF;
446
+ font-weight: bold;
447
+ }
448
+ }
449
+
450
+ &.visible {
451
+ visibility: visible;
452
+ opacity: 1;
453
+ transition-delay: 0s;
454
+ }
455
+ }
456
+
457
+ & ~ .dropify-errors-container {
458
+ ul {
459
+ padding: 0;
460
+ margin: 15px 0;
461
+
462
+ li {
463
+ margin-left: 20px;
464
+ color: $dropify-error-color;
465
+ font-weight: bold;
466
+ }
467
+ }
468
+ }
469
+ }
470
+
471
+ @keyframes stripes {
472
+ from { background-position: 0 0; }
473
+ to { background-position: 60px 30px; }
474
+ }
475
+
476
+ @keyframes rotate {
477
+ 0% {
478
+ transform: rotateZ(-360deg);
479
+ }
480
+ 100% {
481
+ transform: rotateZ(0deg);
482
+ }
483
+ }