dh_demo

DreamHanks demo project
git clone git://git.lair.cx/dh_demo
Log | Files | Refs | README

Toast.module.scss (1015B)

      1 @use 'core/colors';
      2 @use 'core/elevate';
      3 
      4 @keyframes toast-entering {
      5   0% {
      6     transform: translate3d(0, 200%, 0) scale(.6);
      7     opacity: .5;
      8   }
      9   100% {
     10     transform: translate3d(0, 0, 0) scale(1);
     11     opacity: 1;
     12   }
     13 }
     14 
     15 @keyframes toast-exiting {
     16   0% {
     17     transform: translate3d(0, 0, -1px) scale(1);
     18     opacity: 1;
     19   }
     20   100% {
     21     transform: translate3d(0, 150%, -1px) scale(.6);
     22     opacity: 0;
     23   }
     24 }
     25 
     26 .toast {
     27   $elevation-level: 5;
     28 
     29   padding: 0.75rem 1rem;
     30   border-radius: 0.25rem;
     31   will-change: transform;
     32   user-select: none;
     33   pointer-events: none;
     34 
     35   @include elevate.apply-box-shadow($elevation-level);
     36   @include colors.apply-themes() using($theme) {
     37     color: colors.get($theme, 'on-surface');
     38 
     39     @include elevate.apply-background-color($theme, $elevation-level, 'tertiary');
     40   }
     41 
     42   &.is-entering {
     43     animation: toast-entering 400ms cubic-bezier(0.25, 1, 0.5, 1) 0s 1 forwards;
     44   }
     45 
     46   &.is-exiting {
     47     animation: toast-exiting 400ms cubic-bezier(0.25, 1, 0.5, 1) 0s 1 forwards;
     48   }
     49 }