wip

Author: jouni

packages/aura/src/components/notification.css

@@ -3,6 +3,7 @@ html {
   --vaadin-notification-box-shadow: 0 0 0 1px hsla(0deg, 0%, 0%, 0.07), 0 6px 16px -4px hsla(0deg, 0%, 0%, 0.3);
   --vaadin-notification-background: light-dark(hsla(0deg, 0%, 100%, 0.2), hsla(0deg, 0%, 0%, 0.6));
   --vaadin-notification-border-color: hsla(0deg, 0%, 100%, 0.1);
+  --vaadin-ease-fluid: cubic-bezier(0.78, 0, 0.22, 1);
 }
 
 vaadin-notification-card::part(overlay) {
@@ -33,3 +34,79 @@ vaadin-notification-card vaadin-card {
   --vaadin-card-gap: var(--vaadin-gap-s);
   color: var(--aura-text-color-subtle);
 }
+
+/* Animations *
+vaadin-notification-card {
+  transition: 400ms var(--vaadin-ease-fluid);
+  --_inset: calc(var(--_paint-area) * -1);
+  --_clip-path: inset(var(--_inset));
+}
+
+@keyframes notification-enter {
+  0% {
+    translate: var(--_enter-translate, 0 100%);
+    margin-block: 0;
+    height: var(--_enter-height, auto);
+    max-height: var(--_enter-max-height, none);
+  }
+}
+
+vaadin-notification-card:is([opening], [closing]) {
+  animation: notification-enter 400ms var(--vaadin-ease-fluid);
+  z-index: 9999;
+}
+
+vaadin-notification-card[closing] {
+  animation-direction: reverse;
+}
+
+vaadin-notification-card:not(:hover, :focus-within):not([style*='order: 1;']) {
+  --_inset-exclude: calc(100% - var(--_gap) - 2px);
+  --_clip-path: inset(var(--_inset-exclude) var(--_inset) var(--_inset) var(--_inset));
+}
+
+vaadin-notification-card:is([position^='bottom'], [position='middle']):not(:hover, :focus-within):not([style*='order: 1;']) {
+  --_clip-path: inset(var(--_inset) var(--_inset) var(--_inset-exclude) var(--_inset));
+  --vaadin-notification-box-shadow: none;
+}
+
+@supports (interpolate-size: allow-keywords) {
+  vaadin-notification-card {
+    --_enter-height: 0;
+  }
+
+  vaadin-notification-card:not(:hover, :focus-within):not([style*='order: 1;']) {
+    height: 0;
+    --_clip-path-duration: 450ms;
+  }
+}
+
+@supports not (interpolate-size: allow-keywords) {
+  vaadin-notification-card {
+    max-height: 25em;
+    --_enter-max-height: 0;
+    --_clip-path-duration: 250ms;
+  }
+
+  vaadin-notification-card:not(:hover, :focus-within):not([style*='order: 1;']) {
+    --_clip-path-duration: 500ms;
+    max-height: 0;
+  }
+}
+
+vaadin-notification-card:not(:hover, :focus-within) {
+  &[style*='order: 2;'] {
+    scale: 0.94;
+  }
+
+  &[style*='order: 3;'] {
+    scale: 0.86;
+  }
+
+  &:not([style*='order: 1;'], [style*='order: 2;'], [style*='order: 3;']) {
+    scale: 0.78;
+    --_opacity: 0;
+    margin-block: 0;
+  }
+}
+*/