1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
| @import "nib"
|
| .dropzone
| .dropzone *
| .dropzone-previews
| .dropzone-previews *
| box-sizing border-box
|
|
| .dropzone
| position relative
| border 1px solid rgba(0, 0, 0, 0.08)
| background rgba(0, 0, 0, 0.02)
| padding 1em
|
| &.clickable
| cursor pointer
| .message
| cursor pointer
| *
| cursor default
|
| .message
| opacity 1
|
| &.drag-hover
| border-color rgba(0, 0, 0, 0.15)
| background rgba(0, 0, 0, 0.04)
|
| &.started
| .message
| display none
|
| .dropzone
| .dropzone-previews
| .preview
| background rgba(255, 255, 255, 0.8)
| position relative
| display inline-block
| margin 17px
|
| vertical-align top
|
| border 1px solid #acacac
|
| padding 6px 6px 28px 6px
|
| .details
| width 100px
| height @width
| position relative
| background #ebebeb
| padding 5px
|
| .filename
| overflow hidden
| height 100%
|
|
| img
| absolute top left
| width @width
| height @width
|
| .size
| absolute bottom -28px left 3px
| height 28px
| line-height @height
|
|
| &.error
| .error-mark
| display block
| &.success
| .success-mark
| display block
|
|
| &:hover
| .details
| img
| display none
| .success-mark
| .error-mark
| display none
|
|
| .success-mark
| .error-mark
| display none
| position absolute
|
| width 40px
| height 40px
|
| font-size 30px
| text-align center
| right -10px
| top -10px
|
| .success-mark
| color #8CC657
| .error-mark
| color #EE162D
|
|
| .progress
| position absolute
| top 100px
| left 6px
| right 6px
| height 6px
| background #d7d7d7
| display none
|
| .upload
| position absolute
| top 0
| bottom 0
| left 0
| width 0%
| background-color #8CC657
|
|
| &.processing
| .progress
| display block
|
|
| .error-message
| display none
| absolute top -5px left -20px
| background rgba(245, 245, 245, 0.8)
| padding 8px 10px
| color #800
| min-width 140px
| max-width 500px
| z-index 500
| &:hover.error
| .error-message
| display block
|
|
