Merged in fix/SW-2814 (pull request #2377)

fix(SW-2814): use slide-in animation for smaller devices

* fix(SW-2814): use slide-in animation for smaller devices


Approved-by: Christian Andolf
Approved-by: Erik Tiekstra

apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css

@@ -1,6 +1,7 @@
 .modal {
   --sidepeek-desktop-width: 560px;
 }
+
 @keyframes slide-in {
   from {
     right: calc(-1 * var(--sidepeek-desktop-width));
@@ -11,16 +12,6 @@
   }
 }
 
-@keyframes slide-up {
-  from {
-    top: 100vh;
-  }
-
-  to {
-    top: 0;
-  }
-}
-
 .overlay {
   position: fixed;
   top: 0;
@@ -44,11 +35,11 @@
 }
 
 .modal[data-entering] {
-  animation: slide-up 300ms;
+  animation: slide-in 250ms;
 }
 
 .modal[data-exiting] {
-  animation: slide-up 300ms reverse;
+  animation: slide-in 250ms reverse;
 }
 
 .dialog {
@@ -89,6 +80,7 @@
   padding: var(--Spacing-x4);
   overflow-y: auto;
 }
+
 @media screen and (min-width: 1367px) {
   .modal {
     top: 0;
@@ -96,12 +88,4 @@
     width: var(--sidepeek-desktop-width);
     height: 100vh;
   }
-
-  .modal[data-entering] {
-    animation: slide-in 250ms;
-  }
-
-  .modal[data-exiting] {
-    animation: slide-in 250ms reverse;
-  }
 }