third_party/polymer/components/paper-dialog/paper-dialog-transition.css

   1 /* Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   2 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   3 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   4 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   5 Code distributed by Google as part of the polymer project is also
   6 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt */
   7
   8 :host(.paper-dialog-transition) {
   9   outline: none;
  10   opacity: 0;
  11   transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  12   -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  13 }
  14
  15 :host(.paper-dialog-transition.core-opened) {
  16   opacity: 1;
  17   transform: none;
  18   -webkit-transform: none;
  19 }
  20
  21 :host(.paper-dialog-transition-bottom) {
  22   transform: scale(0.9) translateY(200%);
  23   -webkit-transform: scale(0.9) translateY(200%);
  24 }
  25
  26 :host(.paper-dialog-transition-center.core-opened) {
  27   animation: paper-dialog-transition-center-keyframes 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  28   -webkit-animation: paper-dialog-transition-center-keyframes 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  29 }
  30
  31 @keyframes paper-dialog-transition-center-keyframes {
  32   0% {
  33     transform: scale(0.5) translateY(0);
  34     -webkit-transform: scale(0.5) translateY(0);
  35   }
  36   90% {
  37     transform: scale(1) translateY(-10px);
  38     -webkit-transform: scale(1) translateY(-10px);
  39   }
  40   100% {
  41     transform: scale(1) translateY(0);
  42     -webkit-transform: scale(1) translateY(0);
  43   }
  44 }
  45
  46 @-webkit-keyframes paper-dialog-transition-center-keyframes {
  47   0% {
  48     transform: scale(0.5) translateY(0);
  49     -webkit-transform: scale(0.5) translateY(0);
  50   }
  51   90% {
  52     transform: scale(1) translateY(-10px);
  53     -webkit-transform: scale(1) translateY(-10px);
  54   }
  55   100% {
  56     transform: scale(1) translateY(0);
  57     -webkit-transform: scale(1) translateY(0);
  58   }
  59 }