API tools faq
paste
Advertisement
Guest User

dropzone.css

a guest
Sep 25th, 2015
198
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.67 KB | None | 0 0
raw download clone embed print report
  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; }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!