www.aleph1.co.uk Git - yaffs-website/blob - vendor/enyo/dropzone/dist/dropzone.css

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