www.aleph1.co.uk Git - yaffs-website/blob - vendor/enyo/dropzone/src/dropzone.scss

   1 /*
   2  * The MIT License
   3  * Copyright (c) 2012 Matias Meno <m@tias.me>
   4  */
   5
   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:
  12
  13 // The above copyright notice and this permission notice shall be included in all
  14 // copies or substantial portions of the Software.
  15
  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
  22 // SOFTWARE.
  23
  24 @mixin keyframes($name) {
  25   @-webkit-keyframes #{$name} {
  26     @content;
  27   }
  28   @-moz-keyframes #{$name} {
  29     @content;
  30   }
  31   @keyframes #{$name} {
  32     @content;
  33   }
  34 }
  35
  36
  37 @mixin prefix($map, $vendors: webkit moz ms o) {
  38   @each $prop, $value in $map {
  39     @if $vendors {
  40       @each $vendor in $vendors {
  41         #{"-" + $vendor + "-" + $prop}: #{$value};
  42       }
  43     }
  44     // Dump regular property anyway
  45     #{$prop}: #{$value};
  46   }
  47 }
  48
  49
  50 @include keyframes(passing-through) {
  51
  52   0% {
  53     opacity: 0;
  54     @include prefix((transform: translateY(40px)));
  55   }
  56
  57   30%, 70% {
  58     opacity: 1;
  59     @include prefix((transform: translateY(0px)));
  60   }
  61
  62   100% {
  63     opacity: 0;
  64     @include prefix((transform: translateY(-40px)));
  65   }
  66 }
  67
  68
  69 @include keyframes(slide-in) {
  70
  71   0% {
  72     opacity: 0;
  73     @include prefix((transform: translateY(40px)));
  74   }
  75
  76   30% {
  77     opacity: 1;
  78     @include prefix((transform: translateY(0px)));
  79   }
  80 }
  81
  82
  83
  84 @include keyframes(pulse) {
  85
  86   0% { @include prefix((transform: scale(1))); }
  87   10% { @include prefix((transform: scale(1.1))); }
  88   20% { @include prefix((transform: scale(1))); }
  89
  90 }
  91
  92
  93
  94 .dropzone, .dropzone * {
  95   box-sizing: border-box;
  96 }
  97 .dropzone {
  98
  99   $image-size: 120px;
 100
 101   $image-border-radius: 20px;
 102
 103   &.dz-clickable {
 104     cursor: pointer;
 105
 106     * {
 107       cursor: default;
 108     }
 109     .dz-message {
 110       &, * {
 111         cursor: pointer;
 112       }
 113     }
 114   }
 115
 116   min-height: 150px;
 117   border: 2px solid rgba(0, 0, 0, 0.3);
 118   background: white;
 119   padding: 20px 20px;
 120
 121   &.dz-started {
 122     .dz-message {
 123       display: none;
 124     }
 125   }
 126
 127   &.dz-drag-hover {
 128     border-style: solid;
 129     .dz-message {
 130       opacity: 0.5;
 131     }
 132   }
 133   .dz-message {
 134     text-align: center;
 135     margin: 2em 0;
 136
 137
 138   }
 139
 140
 141
 142   .dz-preview {
 143     position: relative;
 144     display: inline-block;
 145
 146     vertical-align: top;
 147
 148     margin: 16px;
 149     min-height: 100px;
 150
 151     &:hover {
 152       // Making sure that always the hovered preview element is on top
 153       z-index: 1000;
 154       .dz-details {
 155         opacity: 1;
 156       }
 157     }
 158
 159     &.dz-file-preview {
 160
 161       .dz-image {
 162         border-radius: $image-border-radius;
 163         background: #999;
 164         background: linear-gradient(to bottom, #eee, #ddd);
 165       }
 166
 167       .dz-details {
 168         opacity: 1;
 169       }
 170     }
 171
 172     &.dz-image-preview {
 173       background: white;
 174       .dz-details {
 175         @include prefix((transition: opacity 0.2s linear));
 176       }
 177     }
 178
 179     .dz-remove {
 180       font-size: 14px;
 181       text-align: center;
 182       display: block;
 183       cursor: pointer;
 184       border: none;
 185       &:hover {
 186         text-decoration: underline;
 187       }
 188     }
 189
 190     &:hover .dz-details {
 191       opacity: 1;
 192     }
 193     .dz-details {
 194       $background-color: #444;
 195
 196       z-index: 20;
 197
 198       position: absolute;
 199       top: 0;
 200       left: 0;
 201
 202       opacity: 0;
 203
 204       font-size: 13px;
 205       min-width: 100%;
 206       max-width: 100%;
 207       padding: 2em 1em;
 208       text-align: center;
 209       color: rgba(0, 0, 0, 0.9);
 210
 211       $width: 120px;
 212
 213       line-height: 150%;
 214
 215       .dz-size {
 216         margin-bottom: 1em;
 217         font-size: 16px;
 218       }
 219
 220       .dz-filename {
 221
 222         white-space: nowrap;
 223
 224         &:hover {
 225           span {
 226             border: 1px solid rgba(200, 200, 200, 0.8);
 227             background-color: rgba(255, 255, 255, 0.8);
 228           }
 229         }
 230         &:not(:hover) {
 231           span {
 232             border: 1px solid transparent;
 233           }
 234           overflow: hidden;
 235           text-overflow: ellipsis;
 236         }
 237
 238       }
 239
 240       .dz-filename, .dz-size {
 241         span {
 242           background-color: rgba(255, 255, 255, 0.4);
 243           padding: 0 0.4em;
 244           border-radius: 3px;
 245         }
 246       }
 247
 248     }
 249
 250     &:hover {
 251       .dz-image {
 252         // opacity: 0.8;
 253         img {
 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
 256         }
 257       }
 258     }
 259     .dz-image {
 260       border-radius: $image-border-radius;
 261       overflow: hidden;
 262       width: $image-size;
 263       height: $image-size;
 264       position: relative;
 265       display: block;
 266       z-index: 10;
 267
 268       img {
 269         display: block;
 270       }
 271     }
 272
 273
 274     &.dz-success {
 275       .dz-success-mark {
 276         @include prefix((animation: passing-through 3s cubic-bezier(0.770, 0.000, 0.175, 1.000)));
 277       }
 278     }
 279     &.dz-error {
 280       .dz-error-mark {
 281         opacity: 1;
 282         @include prefix((animation: slide-in 3s cubic-bezier(0.770, 0.000, 0.175, 1.000)));
 283       }
 284     }
 285
 286
 287     .dz-success-mark, .dz-error-mark {
 288
 289       $image-height: 54px;
 290       $image-width: 54px;
 291
 292       pointer-events: none;
 293
 294       opacity: 0;
 295       z-index: 500;
 296
 297       position: absolute;
 298       display: block;
 299       top: 50%;
 300       left: 50%;
 301       margin-left: -($image-width/2);
 302       margin-top: -($image-height/2);
 303
 304       svg {
 305         display: block;
 306         width: $image-width;
 307         height: $image-height;
 308       }
 309     }
 310
 311
 312     &.dz-processing .dz-progress {
 313       opacity: 1;
 314       @include prefix((transition: all 0.2s linear));
 315     }
 316     &.dz-complete .dz-progress {
 317       opacity: 0;
 318       @include prefix((transition: opacity 0.4s ease-in));
 319     }
 320
 321     &:not(.dz-processing) {
 322       .dz-progress {
 323         @include prefix((animation: pulse 6s ease infinite));
 324       }
 325     }
 326     .dz-progress {
 327
 328       opacity: 1;
 329       z-index: 1000;
 330
 331       pointer-events: none;
 332       position: absolute;
 333       height: 16px;
 334       left: 50%;
 335       top: 50%;
 336       margin-top: -8px;
 337
 338       width: 80px;
 339       margin-left: -40px;
 340
 341       // border: 2px solid #333;
 342       background: rgba(255, 255, 255, 0.9);
 343
 344       // Fix for chrome bug: https://code.google.com/p/chromium/issues/detail?id=157218
 345       -webkit-transform: scale(1);
 346
 347
 348       border-radius: 8px;
 349
 350       overflow: hidden;
 351
 352       .dz-upload {
 353         background: #333;
 354         background: linear-gradient(to bottom, #666, #444);
 355         position: absolute;
 356         top: 0;
 357         left: 0;
 358         bottom: 0;
 359         width: 0;
 360         @include prefix((transition: width 300ms ease-in-out));
 361       }
 362
 363     }
 364
 365     &.dz-error {
 366       .dz-error-message {
 367         display: block;
 368       }
 369       &:hover .dz-error-message {
 370         opacity: 1;
 371         pointer-events: auto;
 372       }
 373     }
 374
 375     .dz-error-message {
 376       $width: $image-size + 20px;
 377       $color: rgb(190, 38, 38);
 378
 379       pointer-events: none;
 380       z-index: 1000;
 381       position: absolute;
 382       display: block;
 383       display: none;
 384       opacity: 0;
 385       @include prefix((transition: opacity 0.3s ease));
 386       border-radius: 8px;
 387       font-size: 13px;
 388       top: $image-size + 10px;
 389       left: -10px;
 390       width: $width;
 391       background: $color;
 392       background: linear-gradient(to bottom, $color, darken($color, 5%));
 393       padding: 0.5em 1.2em;
 394       color: white;
 395
 396       // The triangle pointing up
 397       &:after {
 398         content: '';
 399         position: absolute;
 400         top: -6px;
 401         left: $width / 2 - 6px;
 402         width: 0;
 403         height: 0;
 404         border-left: 6px solid transparent;
 405         border-right: 6px solid transparent;
 406         border-bottom: 6px solid $color;
 407       }
 408     }
 409
 410   }
 411 }
 412
 413