voltron-upload 0.2.1
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.
- checksums.yaml +7 -0
- data/.gitignore +13 -0
- data/.rspec +2 -0
- data/.travis.yml +8 -0
- data/CODE_OF_CONDUCT.md +49 -0
- data/Gemfile +12 -0
- data/LICENSE.txt +21 -0
- data/README.md +166 -0
- data/Rakefile +6 -0
- data/app/assets/javascripts/dropzone.js +1769 -0
- data/app/assets/javascripts/voltron-upload.js +264 -0
- data/app/assets/stylesheets/dropzone.scss +595 -0
- data/app/assets/stylesheets/voltron-upload.scss +446 -0
- data/app/views/voltron/upload/preview/_horizontal_tile.html.erb +18 -0
- data/app/views/voltron/upload/preview/_progress.html.erb +8 -0
- data/app/views/voltron/upload/preview/_vertical_tile.html.erb +18 -0
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/lib/generators/voltron/upload/install/assets_generator.rb +25 -0
- data/lib/generators/voltron/upload/install/views_generator.rb +21 -0
- data/lib/generators/voltron/upload/install_generator.rb +57 -0
- data/lib/voltron/config/upload.rb +18 -0
- data/lib/voltron/upload/action_dispatch/routes.rb +17 -0
- data/lib/voltron/upload/action_view/field.rb +152 -0
- data/lib/voltron/upload/active_record/base.rb +87 -0
- data/lib/voltron/upload/carrierwave/uploader/base.rb +66 -0
- data/lib/voltron/upload/engine.rb +20 -0
- data/lib/voltron/upload/error.rb +20 -0
- data/lib/voltron/upload/version.rb +5 -0
- data/lib/voltron/upload.rb +51 -0
- data/lib/voltron/uploader.rb +58 -0
- data/voltron-upload.gemspec +34 -0
- metadata +243 -0
|
@@ -0,0 +1,595 @@
|
|
|
1
|
+
//colors
|
|
2
|
+
$border-color: #BBBBBB;
|
|
3
|
+
$white: #fff;
|
|
4
|
+
$color_mountain_mist_approx: #999;
|
|
5
|
+
$color_gallery_approx: #eee;
|
|
6
|
+
$color_alto_approx: #ddd;
|
|
7
|
+
$black_90: rgba(0, 0, 0, 0.9);
|
|
8
|
+
$color_pumice_80_approx: rgba(200, 200, 200, 0.8);
|
|
9
|
+
$white_80: rgba(255, 255, 255, 0.8);
|
|
10
|
+
$white_40: rgba(255, 255, 255, 0.4);
|
|
11
|
+
$white_90: rgba(255, 255, 255, 0.9);
|
|
12
|
+
$color_mine_shaft_approx: #333;
|
|
13
|
+
$color_storm_dust_approx: #666;
|
|
14
|
+
$color_tundora_approx: #444;
|
|
15
|
+
$error-background-color: #BE2626;
|
|
16
|
+
$color_silver_chalice_approx: #aaa;
|
|
17
|
+
$color_japanese_laurel_approx: #008000;
|
|
18
|
+
$red: #f00;
|
|
19
|
+
|
|
20
|
+
@-webkit-keyframes passing-through {
|
|
21
|
+
0% {
|
|
22
|
+
opacity: 0;
|
|
23
|
+
-webkit-transform: translateY(40px);
|
|
24
|
+
-moz-transform: translateY(40px);
|
|
25
|
+
-ms-transform: translateY(40px);
|
|
26
|
+
-o-transform: translateY(40px);
|
|
27
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
28
|
+
transform: translateY(40px);
|
|
29
|
+
}
|
|
30
|
+
30% {
|
|
31
|
+
opacity: 1;
|
|
32
|
+
-webkit-transform: translateY(0px);
|
|
33
|
+
-moz-transform: translateY(0px);
|
|
34
|
+
-ms-transform: translateY(0px);
|
|
35
|
+
-o-transform: translateY(0px);
|
|
36
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
37
|
+
transform: translateY(0px);
|
|
38
|
+
}
|
|
39
|
+
70% {
|
|
40
|
+
opacity: 1;
|
|
41
|
+
-webkit-transform: translateY(0px);
|
|
42
|
+
-moz-transform: translateY(0px);
|
|
43
|
+
-ms-transform: translateY(0px);
|
|
44
|
+
-o-transform: translateY(0px);
|
|
45
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
46
|
+
transform: translateY(0px);
|
|
47
|
+
}
|
|
48
|
+
100% {
|
|
49
|
+
opacity: 0;
|
|
50
|
+
-webkit-transform: translateY(-40px);
|
|
51
|
+
-moz-transform: translateY(-40px);
|
|
52
|
+
-ms-transform: translateY(-40px);
|
|
53
|
+
-o-transform: translateY(-40px);
|
|
54
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
55
|
+
transform: translateY(-40px);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
@-moz-keyframes passing-through {
|
|
59
|
+
0% {
|
|
60
|
+
opacity: 0;
|
|
61
|
+
-webkit-transform: translateY(40px);
|
|
62
|
+
-moz-transform: translateY(40px);
|
|
63
|
+
-ms-transform: translateY(40px);
|
|
64
|
+
-o-transform: translateY(40px);
|
|
65
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
66
|
+
transform: translateY(40px);
|
|
67
|
+
}
|
|
68
|
+
30% {
|
|
69
|
+
opacity: 1;
|
|
70
|
+
-webkit-transform: translateY(0px);
|
|
71
|
+
-moz-transform: translateY(0px);
|
|
72
|
+
-ms-transform: translateY(0px);
|
|
73
|
+
-o-transform: translateY(0px);
|
|
74
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
75
|
+
transform: translateY(0px);
|
|
76
|
+
}
|
|
77
|
+
70% {
|
|
78
|
+
opacity: 1;
|
|
79
|
+
-webkit-transform: translateY(0px);
|
|
80
|
+
-moz-transform: translateY(0px);
|
|
81
|
+
-ms-transform: translateY(0px);
|
|
82
|
+
-o-transform: translateY(0px);
|
|
83
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
84
|
+
transform: translateY(0px);
|
|
85
|
+
}
|
|
86
|
+
100% {
|
|
87
|
+
opacity: 0;
|
|
88
|
+
-webkit-transform: translateY(-40px);
|
|
89
|
+
-moz-transform: translateY(-40px);
|
|
90
|
+
-ms-transform: translateY(-40px);
|
|
91
|
+
-o-transform: translateY(-40px);
|
|
92
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
93
|
+
transform: translateY(-40px);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
@keyframes passing-through {
|
|
97
|
+
0% {
|
|
98
|
+
opacity: 0;
|
|
99
|
+
-webkit-transform: translateY(40px);
|
|
100
|
+
-moz-transform: translateY(40px);
|
|
101
|
+
-ms-transform: translateY(40px);
|
|
102
|
+
-o-transform: translateY(40px);
|
|
103
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
104
|
+
transform: translateY(40px);
|
|
105
|
+
}
|
|
106
|
+
30% {
|
|
107
|
+
opacity: 1;
|
|
108
|
+
-webkit-transform: translateY(0px);
|
|
109
|
+
-moz-transform: translateY(0px);
|
|
110
|
+
-ms-transform: translateY(0px);
|
|
111
|
+
-o-transform: translateY(0px);
|
|
112
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
113
|
+
transform: translateY(0px);
|
|
114
|
+
}
|
|
115
|
+
70% {
|
|
116
|
+
opacity: 1;
|
|
117
|
+
-webkit-transform: translateY(0px);
|
|
118
|
+
-moz-transform: translateY(0px);
|
|
119
|
+
-ms-transform: translateY(0px);
|
|
120
|
+
-o-transform: translateY(0px);
|
|
121
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
122
|
+
transform: translateY(0px);
|
|
123
|
+
}
|
|
124
|
+
100% {
|
|
125
|
+
opacity: 0;
|
|
126
|
+
-webkit-transform: translateY(-40px);
|
|
127
|
+
-moz-transform: translateY(-40px);
|
|
128
|
+
-ms-transform: translateY(-40px);
|
|
129
|
+
-o-transform: translateY(-40px);
|
|
130
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
131
|
+
transform: translateY(-40px);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
@-webkit-keyframes slide-in {
|
|
135
|
+
0% {
|
|
136
|
+
opacity: 0;
|
|
137
|
+
-webkit-transform: translateY(40px);
|
|
138
|
+
-moz-transform: translateY(40px);
|
|
139
|
+
-ms-transform: translateY(40px);
|
|
140
|
+
-o-transform: translateY(40px);
|
|
141
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
142
|
+
transform: translateY(40px);
|
|
143
|
+
}
|
|
144
|
+
30% {
|
|
145
|
+
opacity: 1;
|
|
146
|
+
-webkit-transform: translateY(0px);
|
|
147
|
+
-moz-transform: translateY(0px);
|
|
148
|
+
-ms-transform: translateY(0px);
|
|
149
|
+
-o-transform: translateY(0px);
|
|
150
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
151
|
+
transform: translateY(0px);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
@-moz-keyframes slide-in {
|
|
155
|
+
0% {
|
|
156
|
+
opacity: 0;
|
|
157
|
+
-webkit-transform: translateY(40px);
|
|
158
|
+
-moz-transform: translateY(40px);
|
|
159
|
+
-ms-transform: translateY(40px);
|
|
160
|
+
-o-transform: translateY(40px);
|
|
161
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
162
|
+
transform: translateY(40px);
|
|
163
|
+
}
|
|
164
|
+
30% {
|
|
165
|
+
opacity: 1;
|
|
166
|
+
-webkit-transform: translateY(0px);
|
|
167
|
+
-moz-transform: translateY(0px);
|
|
168
|
+
-ms-transform: translateY(0px);
|
|
169
|
+
-o-transform: translateY(0px);
|
|
170
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
171
|
+
transform: translateY(0px);
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
@keyframes slide-in {
|
|
175
|
+
0% {
|
|
176
|
+
opacity: 0;
|
|
177
|
+
-webkit-transform: translateY(40px);
|
|
178
|
+
-moz-transform: translateY(40px);
|
|
179
|
+
-ms-transform: translateY(40px);
|
|
180
|
+
-o-transform: translateY(40px);
|
|
181
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
182
|
+
transform: translateY(40px);
|
|
183
|
+
}
|
|
184
|
+
30% {
|
|
185
|
+
opacity: 1;
|
|
186
|
+
-webkit-transform: translateY(0px);
|
|
187
|
+
-moz-transform: translateY(0px);
|
|
188
|
+
-ms-transform: translateY(0px);
|
|
189
|
+
-o-transform: translateY(0px);
|
|
190
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
191
|
+
transform: translateY(0px);
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
@-webkit-keyframes pulse {
|
|
195
|
+
0% {
|
|
196
|
+
-webkit-transform: scale(1);
|
|
197
|
+
-moz-transform: scale(1);
|
|
198
|
+
-ms-transform: scale(1);
|
|
199
|
+
-o-transform: scale(1);
|
|
200
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
201
|
+
transform: scale(1);
|
|
202
|
+
}
|
|
203
|
+
10% {
|
|
204
|
+
-webkit-transform: scale(1.1);
|
|
205
|
+
-moz-transform: scale(1.1);
|
|
206
|
+
-ms-transform: scale(1.1);
|
|
207
|
+
-o-transform: scale(1.1);
|
|
208
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
209
|
+
transform: scale(1.1);
|
|
210
|
+
}
|
|
211
|
+
20% {
|
|
212
|
+
-webkit-transform: scale(1);
|
|
213
|
+
-moz-transform: scale(1);
|
|
214
|
+
-ms-transform: scale(1);
|
|
215
|
+
-o-transform: scale(1);
|
|
216
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
217
|
+
transform: scale(1);
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
@-moz-keyframes pulse {
|
|
221
|
+
0% {
|
|
222
|
+
-webkit-transform: scale(1);
|
|
223
|
+
-moz-transform: scale(1);
|
|
224
|
+
-ms-transform: scale(1);
|
|
225
|
+
-o-transform: scale(1);
|
|
226
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
227
|
+
transform: scale(1);
|
|
228
|
+
}
|
|
229
|
+
10% {
|
|
230
|
+
-webkit-transform: scale(1.1);
|
|
231
|
+
-moz-transform: scale(1.1);
|
|
232
|
+
-ms-transform: scale(1.1);
|
|
233
|
+
-o-transform: scale(1.1);
|
|
234
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
235
|
+
transform: scale(1.1);
|
|
236
|
+
}
|
|
237
|
+
20% {
|
|
238
|
+
-webkit-transform: scale(1);
|
|
239
|
+
-moz-transform: scale(1);
|
|
240
|
+
-ms-transform: scale(1);
|
|
241
|
+
-o-transform: scale(1);
|
|
242
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
243
|
+
transform: scale(1);
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
@keyframes pulse {
|
|
247
|
+
0% {
|
|
248
|
+
-webkit-transform: scale(1);
|
|
249
|
+
-moz-transform: scale(1);
|
|
250
|
+
-ms-transform: scale(1);
|
|
251
|
+
-o-transform: scale(1);
|
|
252
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
253
|
+
transform: scale(1);
|
|
254
|
+
}
|
|
255
|
+
10% {
|
|
256
|
+
-webkit-transform: scale(1.1);
|
|
257
|
+
-moz-transform: scale(1.1);
|
|
258
|
+
-ms-transform: scale(1.1);
|
|
259
|
+
-o-transform: scale(1.1);
|
|
260
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
261
|
+
transform: scale(1.1);
|
|
262
|
+
}
|
|
263
|
+
20% {
|
|
264
|
+
-webkit-transform: scale(1);
|
|
265
|
+
-moz-transform: scale(1);
|
|
266
|
+
-ms-transform: scale(1);
|
|
267
|
+
-o-transform: scale(1);
|
|
268
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
269
|
+
transform: scale(1);
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
.dropzone {
|
|
273
|
+
//Instead of the line below you could use @include box-sizing($bs)
|
|
274
|
+
box-sizing: border-box;
|
|
275
|
+
border: 1px solid $border-color;
|
|
276
|
+
background: $white;
|
|
277
|
+
padding: 20px;
|
|
278
|
+
position: relative;
|
|
279
|
+
* {
|
|
280
|
+
//Instead of the line below you could use @include box-sizing($bs)
|
|
281
|
+
box-sizing: border-box;
|
|
282
|
+
}
|
|
283
|
+
&.dz-clickable {
|
|
284
|
+
cursor: pointer;
|
|
285
|
+
* {
|
|
286
|
+
cursor: default;
|
|
287
|
+
}
|
|
288
|
+
.dz-message {
|
|
289
|
+
cursor: pointer;
|
|
290
|
+
* {
|
|
291
|
+
cursor: pointer;
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
&.dz-drag-hover {
|
|
296
|
+
border-style: solid;
|
|
297
|
+
.dz-message {
|
|
298
|
+
opacity: 0.5;
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
.dz-message {
|
|
302
|
+
text-align: center;
|
|
303
|
+
margin: 2em 0;
|
|
304
|
+
}
|
|
305
|
+
.dz-preview {
|
|
306
|
+
vertical-align: top;
|
|
307
|
+
margin: 16px;
|
|
308
|
+
min-height: 100px;
|
|
309
|
+
position: relative;
|
|
310
|
+
display: inline-block;
|
|
311
|
+
width: 120px;
|
|
312
|
+
margin: 0.5em;
|
|
313
|
+
&:hover {
|
|
314
|
+
z-index: 1000;
|
|
315
|
+
.dz-details {
|
|
316
|
+
opacity: 1;
|
|
317
|
+
}
|
|
318
|
+
.dz-image img {
|
|
319
|
+
-webkit-transform: scale(1.05, 1.05);
|
|
320
|
+
-moz-transform: scale(1.05, 1.05);
|
|
321
|
+
-ms-transform: scale(1.05, 1.05);
|
|
322
|
+
-o-transform: scale(1.05, 1.05);
|
|
323
|
+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
|
|
324
|
+
transform: scale(1.05, 1.05);
|
|
325
|
+
-webkit-filter: blur(8px);
|
|
326
|
+
filter: blur(8px);
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
&.dz-file-preview {
|
|
330
|
+
.dz-image {
|
|
331
|
+
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
|
|
332
|
+
border-radius: 20px;
|
|
333
|
+
background: $color_mountain_mist_approx;
|
|
334
|
+
background: linear-gradient(to bottom, $color_gallery_approx, $color_alto_approx);
|
|
335
|
+
}
|
|
336
|
+
.dz-details {
|
|
337
|
+
opacity: 1;
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
&.dz-image-preview {
|
|
341
|
+
background: $white;
|
|
342
|
+
.dz-details {
|
|
343
|
+
-webkit-transition: opacity 0.2s linear;
|
|
344
|
+
-moz-transition: opacity 0.2s linear;
|
|
345
|
+
-ms-transition: opacity 0.2s linear;
|
|
346
|
+
-o-transition: opacity 0.2s linear;
|
|
347
|
+
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
|
|
348
|
+
transition: opacity 0.2s linear;
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
.dz-remove {
|
|
352
|
+
font-size: 14px;
|
|
353
|
+
text-align: center;
|
|
354
|
+
display: block;
|
|
355
|
+
cursor: pointer;
|
|
356
|
+
border: none;
|
|
357
|
+
&:hover {
|
|
358
|
+
text-decoration: underline;
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
.dz-details {
|
|
362
|
+
z-index: 20;
|
|
363
|
+
position: absolute;
|
|
364
|
+
top: 0;
|
|
365
|
+
left: 0;
|
|
366
|
+
opacity: 0;
|
|
367
|
+
font-size: 13px;
|
|
368
|
+
min-width: 100%;
|
|
369
|
+
max-width: 100%;
|
|
370
|
+
padding: 2em 1em;
|
|
371
|
+
text-align: center;
|
|
372
|
+
color: $black_90;
|
|
373
|
+
line-height: 150%;
|
|
374
|
+
.dz-size {
|
|
375
|
+
margin-bottom: 1em;
|
|
376
|
+
font-size: 16px;
|
|
377
|
+
span {
|
|
378
|
+
background-color: $white_40;
|
|
379
|
+
padding: 0 0.4em;
|
|
380
|
+
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
|
|
381
|
+
border-radius: 3px;
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
.dz-filename {
|
|
385
|
+
white-space: nowrap;
|
|
386
|
+
span {
|
|
387
|
+
background-color: $white_40;
|
|
388
|
+
padding: 0 0.4em;
|
|
389
|
+
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
|
|
390
|
+
border-radius: 3px;
|
|
391
|
+
}
|
|
392
|
+
&:hover span {
|
|
393
|
+
border: 1px solid $color_pumice_80_approx;
|
|
394
|
+
background-color: $white_80;
|
|
395
|
+
}
|
|
396
|
+
&:not(:hover) {
|
|
397
|
+
overflow: hidden;
|
|
398
|
+
text-overflow: ellipsis;
|
|
399
|
+
span {
|
|
400
|
+
border: 1px solid transparent;
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
.dz-image {
|
|
406
|
+
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
|
|
407
|
+
border-radius: 20px;
|
|
408
|
+
overflow: hidden;
|
|
409
|
+
width: 120px;
|
|
410
|
+
height: 120px;
|
|
411
|
+
position: relative;
|
|
412
|
+
display: block;
|
|
413
|
+
z-index: 10;
|
|
414
|
+
img {
|
|
415
|
+
display: block;
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
&.dz-error {
|
|
419
|
+
.dz-error-mark {
|
|
420
|
+
opacity: 1;
|
|
421
|
+
-webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
|
|
422
|
+
-moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
|
|
423
|
+
-ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
|
|
424
|
+
-o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
|
|
425
|
+
animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
|
|
426
|
+
display: block;
|
|
427
|
+
}
|
|
428
|
+
.dz-error-message {
|
|
429
|
+
display: block;
|
|
430
|
+
display: block;
|
|
431
|
+
}
|
|
432
|
+
&:hover .dz-error-message {
|
|
433
|
+
opacity: 1;
|
|
434
|
+
pointer-events: auto;
|
|
435
|
+
}
|
|
436
|
+
}
|
|
437
|
+
.dz-success-mark {
|
|
438
|
+
pointer-events: none;
|
|
439
|
+
opacity: 0;
|
|
440
|
+
z-index: 500;
|
|
441
|
+
position: absolute;
|
|
442
|
+
display: block;
|
|
443
|
+
top: 50%;
|
|
444
|
+
left: 50%;
|
|
445
|
+
margin-left: -27px;
|
|
446
|
+
margin-top: -27px;
|
|
447
|
+
position: absolute;
|
|
448
|
+
display: none;
|
|
449
|
+
left: 30px;
|
|
450
|
+
top: 30px;
|
|
451
|
+
width: 54px;
|
|
452
|
+
height: 58px;
|
|
453
|
+
left: 50%;
|
|
454
|
+
margin-left: -27px;
|
|
455
|
+
svg {
|
|
456
|
+
display: block;
|
|
457
|
+
width: 54px;
|
|
458
|
+
height: 54px;
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
.dz-error-mark {
|
|
462
|
+
pointer-events: none;
|
|
463
|
+
opacity: 0;
|
|
464
|
+
z-index: 500;
|
|
465
|
+
position: absolute;
|
|
466
|
+
display: block;
|
|
467
|
+
top: 50%;
|
|
468
|
+
left: 50%;
|
|
469
|
+
margin-left: -27px;
|
|
470
|
+
margin-top: -27px;
|
|
471
|
+
position: absolute;
|
|
472
|
+
display: none;
|
|
473
|
+
left: 30px;
|
|
474
|
+
top: 30px;
|
|
475
|
+
width: 54px;
|
|
476
|
+
height: 58px;
|
|
477
|
+
left: 50%;
|
|
478
|
+
margin-left: -27px;
|
|
479
|
+
svg {
|
|
480
|
+
display: block;
|
|
481
|
+
width: 54px;
|
|
482
|
+
height: 54px;
|
|
483
|
+
}
|
|
484
|
+
}
|
|
485
|
+
.dz-progress {
|
|
486
|
+
opacity: 1;
|
|
487
|
+
z-index: 1000;
|
|
488
|
+
pointer-events: none;
|
|
489
|
+
position: absolute;
|
|
490
|
+
height: 16px;
|
|
491
|
+
left: 50%;
|
|
492
|
+
top: 50%;
|
|
493
|
+
margin-top: -8px;
|
|
494
|
+
width: 80px;
|
|
495
|
+
margin-left: -40px;
|
|
496
|
+
background: $white_90;
|
|
497
|
+
-webkit-transform: scale(1);
|
|
498
|
+
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
|
|
499
|
+
border-radius: 8px;
|
|
500
|
+
overflow: hidden;
|
|
501
|
+
display: block;
|
|
502
|
+
height: 15px;
|
|
503
|
+
border: 1px solid $color_silver_chalice_approx;
|
|
504
|
+
.dz-upload {
|
|
505
|
+
background: $color_mine_shaft_approx;
|
|
506
|
+
background: linear-gradient(to bottom, $color_storm_dust_approx, $color_tundora_approx);
|
|
507
|
+
position: absolute;
|
|
508
|
+
top: 0;
|
|
509
|
+
left: 0;
|
|
510
|
+
bottom: 0;
|
|
511
|
+
-webkit-transition: width 300ms ease-in-out;
|
|
512
|
+
-moz-transition: width 300ms ease-in-out;
|
|
513
|
+
-ms-transition: width 300ms ease-in-out;
|
|
514
|
+
-o-transition: width 300ms ease-in-out;
|
|
515
|
+
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
|
|
516
|
+
transition: width 300ms ease-in-out;
|
|
517
|
+
display: block;
|
|
518
|
+
height: 100%;
|
|
519
|
+
width: 0;
|
|
520
|
+
background: $color_japanese_laurel_approx;
|
|
521
|
+
}
|
|
522
|
+
}
|
|
523
|
+
.dz-error-message {
|
|
524
|
+
pointer-events: none;
|
|
525
|
+
z-index: 1000;
|
|
526
|
+
position: absolute;
|
|
527
|
+
display: block;
|
|
528
|
+
opacity: 0;
|
|
529
|
+
-webkit-transition: opacity 0.3s ease;
|
|
530
|
+
-moz-transition: opacity 0.3s ease;
|
|
531
|
+
-ms-transition: opacity 0.3s ease;
|
|
532
|
+
-o-transition: opacity 0.3s ease;
|
|
533
|
+
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
|
|
534
|
+
transition: opacity 0.3s ease;
|
|
535
|
+
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
|
|
536
|
+
border-radius: 8px;
|
|
537
|
+
font-size: 13px;
|
|
538
|
+
top: 130px;
|
|
539
|
+
left: -10px;
|
|
540
|
+
width: 140px;
|
|
541
|
+
background: $error-background-color;
|
|
542
|
+
padding: 0.5em 1.2em;
|
|
543
|
+
color: $white;
|
|
544
|
+
color: $red;
|
|
545
|
+
display: none;
|
|
546
|
+
&:after {
|
|
547
|
+
content: '';
|
|
548
|
+
position: absolute;
|
|
549
|
+
top: -6px;
|
|
550
|
+
left: 64px;
|
|
551
|
+
width: 0;
|
|
552
|
+
height: 0;
|
|
553
|
+
border-left: 6px solid transparent;
|
|
554
|
+
border-right: 6px solid transparent;
|
|
555
|
+
border-bottom: 6px solid $error-background-color;
|
|
556
|
+
}
|
|
557
|
+
}
|
|
558
|
+
&.dz-success .dz-success-mark {
|
|
559
|
+
-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
|
|
560
|
+
-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
|
|
561
|
+
-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
|
|
562
|
+
-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
|
|
563
|
+
animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
|
|
564
|
+
display: block;
|
|
565
|
+
}
|
|
566
|
+
&.dz-processing .dz-progress {
|
|
567
|
+
opacity: 1;
|
|
568
|
+
-webkit-transition: all 0.2s linear;
|
|
569
|
+
-moz-transition: all 0.2s linear;
|
|
570
|
+
-ms-transition: all 0.2s linear;
|
|
571
|
+
-o-transition: all 0.2s linear;
|
|
572
|
+
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
|
|
573
|
+
transition: all 0.2s linear;
|
|
574
|
+
}
|
|
575
|
+
&.dz-complete .dz-progress {
|
|
576
|
+
opacity: 0;
|
|
577
|
+
-webkit-transition: opacity 0.4s ease-in;
|
|
578
|
+
-moz-transition: opacity 0.4s ease-in;
|
|
579
|
+
-ms-transition: opacity 0.4s ease-in;
|
|
580
|
+
-o-transition: opacity 0.4s ease-in;
|
|
581
|
+
//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
|
|
582
|
+
transition: opacity 0.4s ease-in;
|
|
583
|
+
}
|
|
584
|
+
&:not(.dz-processing) .dz-progress {
|
|
585
|
+
-webkit-animation: pulse 6s ease infinite;
|
|
586
|
+
-moz-animation: pulse 6s ease infinite;
|
|
587
|
+
-ms-animation: pulse 6s ease infinite;
|
|
588
|
+
-o-animation: pulse 6s ease infinite;
|
|
589
|
+
animation: pulse 6s ease infinite;
|
|
590
|
+
}
|
|
591
|
+
}
|
|
592
|
+
&.dz-started .dz-message {
|
|
593
|
+
display: none;
|
|
594
|
+
}
|
|
595
|
+
}
|