diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css b/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css index fbfbe1014..11b9b1fc5 100644 --- a/apps/scandic-web/components/TempDesignSystem/SidePeek/sidePeek.module.css +++ b/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; - } }