3 * Copyright (c) 2012 Matias Meno <m@tias.me>
6 // Permission is hereby granted, free of charge, to any person obtaining a copy of
7 // this software and associated documentation files (the "Software"), to deal in
8 // the Software without restriction, including without limitation the rights to
9 // use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
10 // of the Software, and to permit persons to whom the Software is furnished to do
11 // so, subject to the following conditions:
13 // The above copyright notice and this permission notice shall be included in all
14 // copies or substantial portions of the Software.
16 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
24 @mixin keyframes($name) {
25 @-webkit-keyframes #{$name} {
28 @-moz-keyframes #{$name} {
37 @mixin prefix($map, $vendors: webkit moz ms o) {
38 @each $prop, $value in $map {
40 @each $vendor in $vendors {
41 #{"-" + $vendor + "-" + $prop}: #{$value};
44 // Dump regular property anyway
50 @include keyframes(passing-through) {
54 @include prefix((transform: translateY(40px)));
59 @include prefix((transform: translateY(0px)));
64 @include prefix((transform: translateY(-40px)));
69 @include keyframes(slide-in) {
73 @include prefix((transform: translateY(40px)));
78 @include prefix((transform: translateY(0px)));
84 @include keyframes(pulse) {
86 0% { @include prefix((transform: scale(1))); }
87 10% { @include prefix((transform: scale(1.1))); }
88 20% { @include prefix((transform: scale(1))); }
94 .dropzone, .dropzone * {
95 box-sizing: border-box;
101 $image-border-radius: 20px;
117 border: 2px solid rgba(0, 0, 0, 0.3);
144 display: inline-block;
152 // Making sure that always the hovered preview element is on top
162 border-radius: $image-border-radius;
164 background: linear-gradient(to bottom, #eee, #ddd);
175 @include prefix((transition: opacity 0.2s linear));
186 text-decoration: underline;
190 &:hover .dz-details {
194 $background-color: #444;
209 color: rgba(0, 0, 0, 0.9);
226 border: 1px solid rgba(200, 200, 200, 0.8);
227 background-color: rgba(255, 255, 255, 0.8);
232 border: 1px solid transparent;
235 text-overflow: ellipsis;
240 .dz-filename, .dz-size {
242 background-color: rgba(255, 255, 255, 0.4);
254 @include prefix((transform: scale(1.05, 1.05))); // Getting rid of that white bleed-in
255 @include prefix((filter: blur(8px)), webkit); // Getting rid of that white bleed-in
260 border-radius: $image-border-radius;
276 @include prefix((animation: passing-through 3s cubic-bezier(0.770, 0.000, 0.175, 1.000)));
282 @include prefix((animation: slide-in 3s cubic-bezier(0.770, 0.000, 0.175, 1.000)));
287 .dz-success-mark, .dz-error-mark {
292 pointer-events: none;
301 margin-left: -($image-width/2);
302 margin-top: -($image-height/2);
307 height: $image-height;
312 &.dz-processing .dz-progress {
314 @include prefix((transition: all 0.2s linear));
316 &.dz-complete .dz-progress {
318 @include prefix((transition: opacity 0.4s ease-in));
321 &:not(.dz-processing) {
323 @include prefix((animation: pulse 6s ease infinite));
331 pointer-events: none;
341 // border: 2px solid #333;
342 background: rgba(255, 255, 255, 0.9);
344 // Fix for chrome bug: https://code.google.com/p/chromium/issues/detail?id=157218
345 -webkit-transform: scale(1);
354 background: linear-gradient(to bottom, #666, #444);
360 @include prefix((transition: width 300ms ease-in-out));
369 &:hover .dz-error-message {
371 pointer-events: auto;
376 $width: $image-size + 20px;
377 $color: rgb(190, 38, 38);
379 pointer-events: none;
385 @include prefix((transition: opacity 0.3s ease));
388 top: $image-size + 10px;
392 background: linear-gradient(to bottom, $color, darken($color, 5%));
393 padding: 0.5em 1.2em;
396 // The triangle pointing up
401 left: $width / 2 - 6px;
404 border-left: 6px solid transparent;
405 border-right: 6px solid transparent;
406 border-bottom: 6px solid $color;