_dropzone.scss 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. /* The MIT License */
  2. $preview-width: 200px;
  3. $preview-height: 150px;
  4. .dropzone {
  5. position: relative;
  6. border-radius: $form-border-radius;
  7. min-height: 4rem;
  8. &.dz-clickable {
  9. cursor: pointer;
  10. }
  11. &.dz-drag-hover {
  12. border-color: rgba(0,0,0,0.15);
  13. background: rgba(0,0,0,0.04);
  14. }
  15. &.dz-started .dz-message {
  16. display: none;
  17. }
  18. .dz-message {
  19. opacity: 1;
  20. -ms-filter: none;
  21. filter: none;
  22. }
  23. .dz-preview {
  24. position: relative;
  25. display: inline-block;
  26. margin: 1rem 1rem 1.5rem 1rem;
  27. vertical-align: top;
  28. &.dz-file-preview [data-dz-thumbnail] {
  29. display: none;
  30. }
  31. &.dz-error .dz-error-mark {
  32. display: block;
  33. }
  34. &.dz-success .dz-success-mark {
  35. display: block;
  36. }
  37. .dz-success-mark, .dz-error-mark {
  38. font-family: FontAwesome;
  39. display: none;
  40. position: absolute;
  41. width: 22px;
  42. height: 22px;
  43. font-size: 18px;
  44. line-height: 25px;
  45. border-radius: 100%;
  46. text-align: center;
  47. right: 2px;
  48. top: 2px;
  49. span {
  50. display: none;
  51. }
  52. }
  53. &:hover {
  54. .dz-success-mark, .dz-error-mark {
  55. display: none;
  56. }
  57. }
  58. .dz-success-mark {
  59. &::after {
  60. content: '\f00c';
  61. }
  62. }
  63. .dz-error-mark {
  64. &::after {
  65. content: '\f12a';
  66. }
  67. }
  68. .dz-progress {
  69. position: absolute;
  70. top: $preview-height;
  71. left: 0px;
  72. right: 0px;
  73. height: 4px;
  74. display: none;
  75. .dz-upload {
  76. display: block;
  77. position: absolute;
  78. top: 0;
  79. bottom: 0;
  80. left: 0;
  81. width: 0%;
  82. }
  83. }
  84. .dz-error-message {
  85. display: none;
  86. position: absolute;
  87. top: 0;
  88. left: 0;
  89. right: 0;
  90. font-size: 0.9rem;
  91. line-height: 1.2;
  92. padding: 8px 10px;
  93. z-index: 500;
  94. }
  95. &.dz-processing .dz-progress {
  96. display: block;
  97. }
  98. &:hover {
  99. .dz-remove, .dz-unset, .dz-view, .dz-insert, .dz-metadata {
  100. display: block;
  101. }
  102. }
  103. &:hover.dz-error .dz-error-message {
  104. display: block;
  105. }
  106. //.dz-remove, .dz-unset, .dz-insert {
  107. // display: none;
  108. //}
  109. .dz-filename {
  110. position: absolute;
  111. z-index: 1;
  112. bottom: 0;
  113. width: 100%;
  114. padding: 0 5px;
  115. background: rgba(0,0,0,0.3);
  116. color: #fff;
  117. text-align: center;
  118. white-space: nowrap;
  119. overflow: hidden;
  120. text-overflow: ellipsis;
  121. }
  122. .dz-remove, .dz-unset, .dz-view, .dz-insert, .dz-metadata {
  123. display: none;
  124. position: absolute;
  125. width: 25px;
  126. height: 25px;
  127. right: -25px;
  128. font-size: 0;
  129. cursor: pointer;
  130. &:hover {
  131. &:after {
  132. color: #fff;
  133. }
  134. }
  135. &:after {
  136. text-align: center;
  137. display: block;
  138. color: #999;
  139. font-family: FontAwesome;
  140. font-size: 18px;
  141. line-height: 25px;
  142. }
  143. }
  144. .dz-insert {
  145. top: -1px;
  146. border-top-right-radius: 4px;
  147. &:after {
  148. content: '\f055';
  149. }
  150. }
  151. .dz-view {
  152. top: 24px;
  153. &:after {
  154. content: '\f06e';
  155. }
  156. }
  157. .dz-remove {
  158. top: 72px;
  159. &:after {
  160. content: '\f1f8';
  161. }
  162. }
  163. .dz-unset {
  164. top: 96px;
  165. border-bottom-right-radius: 4px;
  166. &:after {
  167. content: '\f00d';
  168. }
  169. }
  170. .dz-metadata {
  171. top: 49px;
  172. &:after {
  173. content: '\f05a';
  174. }
  175. }
  176. &.dz-no-editor {
  177. .dz-view {
  178. top: -1px;
  179. border-top-right-radius: 4px;
  180. }
  181. .dz-remove {
  182. top: 24px;
  183. }
  184. .dz-unset {
  185. top: 72px;
  186. }
  187. }
  188. //&:hover .dz-remove, .dz-unset:not(.file-thumbnail-remove), &:hover .dz-insert {
  189. // display: block;
  190. // position: absolute;
  191. // left: 0;
  192. // right: 0;
  193. // bottom: 22px;
  194. // width: 50%;
  195. // text-align: center;
  196. // cursor: pointer;
  197. // font-size: 0.8rem;
  198. //}
  199. &:hover .dz-remove, &:hover .dz-unset {
  200. &.file-thumbnail-remove {
  201. display: block;
  202. }
  203. &:not(.file-thumbnail-remove) {
  204. left: inherit;
  205. border-left: 0;
  206. }
  207. }
  208. //&:hover .dz-insert {
  209. // right: inherit;
  210. //}
  211. //
  212. //&.hide-backface:hover {
  213. // .dz-remove, .dz-unset, .dz-insert {
  214. // display: none;
  215. // }
  216. //}
  217. &.dz-processing {
  218. .dz-details {
  219. overflow: hidden;
  220. img {
  221. position: absolute;
  222. left: 50%;
  223. top: 50%;
  224. height: auto;
  225. width: 100%;
  226. -webkit-transform: translate(-50%,-50%);
  227. -ms-transform: translate(-50%,-50%);
  228. transform: translate(-50%,-50%);
  229. }
  230. }
  231. }
  232. .dz-details {
  233. width: $preview-width;
  234. height: $preview-height;
  235. position: relative;
  236. font-size: 0.8rem;
  237. img {
  238. position: absolute;
  239. object-fit: cover;
  240. top: 0;
  241. left: 0;
  242. width: $preview-width;
  243. height: $preview-height;
  244. }
  245. .dz-size {
  246. position: absolute;
  247. bottom: -28px;
  248. left: 0;
  249. right: 0;
  250. text-align: center;
  251. font-size: 0.8rem;
  252. height: 28px;
  253. line-height: 28px;
  254. }
  255. }
  256. }
  257. &.dz-clickable {
  258. .dz-message, .dz-message span {
  259. cursor: pointer;
  260. text-align: center;
  261. font-size: 1.2rem;
  262. line-height: 1.4;
  263. margin: 1rem 0;
  264. }
  265. }
  266. * {
  267. cursor: default;
  268. }
  269. }