1 .dndupload { |
|
2 font-size: 1.25rem; /* 20 */ |
|
3 background-color: #c8dadf; |
|
4 position: relative; |
|
5 padding: 40px 20px; |
|
6 text-align: center; |
|
7 |
|
8 &.has-advanced-upload { |
|
9 outline: 2px dashed #92b0b3; |
|
10 outline-offset: -10px; |
|
11 |
|
12 -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear; |
|
13 transition: outline-offset .15s ease-in-out, background-color .15s linear; |
|
14 } |
|
15 |
|
16 &.is-dragover { |
|
17 outline-offset: -20px; |
|
18 outline-color: #c8dadf; |
|
19 background-color: #fff; |
|
20 } |
|
21 |
|
22 .box__dragndrop, |
|
23 .box__icon { |
|
24 display: none; |
|
25 } |
|
26 |
|
27 &.has-advanced-upload .box__dragndrop { |
|
28 display: inline; |
|
29 } |
|
30 |
|
31 &.has-advanced-upload .box__icon { |
|
32 width: 100%; |
|
33 height: 80px; |
|
34 fill: #92b0b3; |
|
35 display: block; |
|
36 margin-bottom: 40px; |
|
37 } |
|
38 |
|
39 &.is-uploading .box__input, |
|
40 &.is-success .box__input, |
|
41 &.is-error .box__input { |
|
42 visibility: hidden; |
|
43 } |
|
44 |
|
45 .box__uploading, |
|
46 .box__success, |
|
47 .box__error { |
|
48 display: none; |
|
49 text-align: center; |
|
50 } |
|
51 |
|
52 &.is-uploading .box__uploading, |
|
53 &.is-success .box__success, |
|
54 &.is-error .box__error { |
|
55 display: block; |
|
56 position: absolute; |
|
57 top: 50%; |
|
58 right: 0; |
|
59 left: 0; |
|
60 |
|
61 -webkit-transform: translateY(-50%); |
|
62 transform: translateY(-50%); |
|
63 } |
|
64 |
|
65 .box__uploading { |
|
66 font-style: italic; |
|
67 } |
|
68 |
|
69 .box__success { |
|
70 -webkit-animation: appear-from-inside .25s ease-in-out; |
|
71 animation: appear-from-inside .25s ease-in-out; |
|
72 } |
|
73 |
|
74 @-webkit-keyframes appear-from-inside { |
|
75 from { |
|
76 -webkit-transform: translateY(-50%) scale(0); |
|
77 } |
|
78 75% { |
|
79 -webkit-transform: translateY(-50%) scale(1.1); |
|
80 } |
|
81 to { |
|
82 -webkit-transform: translateY(-50%) scale(1); |
|
83 } |
|
84 } |
|
85 |
|
86 @keyframes appear-from-inside { |
|
87 from { |
|
88 transform: translateY(-50%) scale(0); |
|
89 } |
|
90 75% { |
|
91 transform: translateY(-50%) scale(1.1); |
|
92 } |
|
93 to { |
|
94 transform: translateY(-50%) scale(1); |
|
95 } |
|
96 } |
|
97 |
|
98 .box__input { |
|
99 text-align: center; |
|
100 } |
|
101 |
|
102 .box__restart { |
|
103 font-weight: 700; |
|
104 } |
|
105 |
|
106 .box__restart:focus, |
|
107 .box__restart:hover { |
|
108 color: #39bfd3; |
|
109 } |
|
110 |
|
111 .box__button { |
|
112 font-weight: 700; |
|
113 color: #e5edf1; |
|
114 background-color: #39bfd3; |
|
115 display: none; |
|
116 padding: 8px 16px; |
|
117 margin: 40px auto 0; |
|
118 } |
|
119 |
|
120 .box__button:hover, |
|
121 .box__button:focus { |
|
122 background-color: #0f3c4b; |
|
123 } |
|
124 } |
|
125 |
|
126 .js .box__file { |
|
127 width: 0.1px; |
|
128 height: 0.1px; |
|
129 opacity: 0; |
|
130 overflow: hidden; |
|
131 position: absolute; |
|
132 z-index: -1; |
|
133 } |
|
134 |
|
135 .js .box__file + label { |
|
136 max-width: 80%; |
|
137 text-overflow: ellipsis; |
|
138 white-space: nowrap; |
|
139 cursor: pointer; |
|
140 display: inline-block; |
|
141 overflow: hidden; |
|
142 } |
|
143 |
|
144 .js .box__file + label:hover strong, |
|
145 .box__file:focus + label strong, |
|
146 .box__file.has-focus + label strong { |
|
147 color: #39bfd3; |
|
148 } |
|
149 |
|
150 .js .box__file:focus + label, |
|
151 .js .box__file.has-focus + label { |
|
152 outline: 1px dotted #000; |
|
153 outline: -webkit-focus-ring-color auto 5px; |
|
154 } |
|
155 |
|
156 .js .box__file + label * { |
|
157 /* pointer-events: none; */ /* in case of FastClick lib use */ |
|
158 } |
|
159 |
|
160 .no-js .box__file + label { |
|
161 display: none; |
|
162 } |
|
163 |
|
164 .no-js .box__button { |
|
165 display: block; |
|
166 } |
|