packages/pass/styles/_animation.scss

   1 @import '~@proton/styles/scss/lib';
   2
   3 .anime-fade-in,
   4 .anime-fade-in > * {
   5         animation: anime-fade-in var(--anime-duration, 0.25s) easing(ease-out-sine) var(--anime-delay, 0.1s) both;
   6 }
   7
   8 .anime-fade-out,
   9 .anime-fade-out > * {
  10         animation: anime-fade-out var(--anime-duration, 0.25s) easing(ease-out-sine) var(--anime-delay, 0.1s) both;
  11 }
  12
  13 @keyframes anime-fade-in {
  14         from {
  15                 opacity: 0;
  16         }
  17
  18         to {
  19                 opacity: var(--anime-opacity, 1);
  20         }
  21 }
  22
  23 @keyframes anime-fade-out {
  24         from {
  25                 opacity: 1;
  26         }
  27
  28         to {
  29                 opacity: 0;
  30         }
  31 }
  32
  33 .anime-reveal {
  34         transition: max-block-size 0.25s ease-in-out;
  35         max-block-size: var(--anime-max-height, rem(180));
  36         min-block-size: 0;
  37         overflow: hidden;
  38
  39         &--hidden {
  40                 max-block-size: 0;
  41         }
  42 }