From 982d27f62693c0eb026e381d10157afffe1eeb64 Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Sun, 10 Jun 2018 13:39:47 -0400 Subject: [PATCH] fix Dashboard open/close animation on small screen --- src/scss/_dashboard.scss | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/src/scss/_dashboard.scss b/src/scss/_dashboard.scss index c2ce0ff25..65e4184c4 100644 --- a/src/scss/_dashboard.scss +++ b/src/scss/_dashboard.scss @@ -23,13 +23,27 @@ to { transform: translate3d(-50%, -50%, 0); opacity: 1; } } + @keyframes uppy-Dashboard-slideDownAndFadeIn--small { + from { transform: translate3d(0, -20%, 0); opacity: 0; } + to { transform: translate3d(0, 0, 0); opacity: 1; } + } + @keyframes uppy-Dashboard-slideUpFadeOut { from { transform: translate3d(-50%, -50%, 0); opacity: 1; } to { transform: translate3d(-50%, -70%, 0); opacity: 0; } } + @keyframes uppy-Dashboard-slideUpFadeOut--small { + from { transform: translate3d(0, 0, 0); opacity: 1; } + to { transform: translate3d(0, -20%, 0); opacity: 0; } + } + .uppy-Dashboard--modal.uppy-Dashboard--animateOpenClose > .uppy-Dashboard-inner { - animation: uppy-Dashboard-slideDownAndFadeIn 0.3s cubic-bezier(0, 0, .2, 1); + animation: uppy-Dashboard-slideDownAndFadeIn--small 0.3s cubic-bezier(0, 0, .2, 1); + + @media #{$screen-medium} { + animation: uppy-Dashboard-slideDownAndFadeIn 0.3s cubic-bezier(0, 0, .2, 1); + } } .uppy-Dashboard--modal.uppy-Dashboard--animateOpenClose > .uppy-Dashboard-overlay { @@ -37,7 +51,11 @@ } .uppy-Dashboard--modal.uppy-Dashboard--animateOpenClose.uppy-Dashboard--isClosing > .uppy-Dashboard-inner { - animation: uppy-Dashboard-slideUpFadeOut 0.3s cubic-bezier(0, 0, .2, 1); + animation: uppy-Dashboard-slideUpFadeOut--small 0.3s cubic-bezier(0, 0, .2, 1); + + @media #{$screen-medium} { + animation: uppy-Dashboard-slideUpFadeOut 0.3s cubic-bezier(0, 0, .2, 1); + } } .uppy-Dashboard--modal.uppy-Dashboard--animateOpenClose.uppy-Dashboard--isClosing > .uppy-Dashboard-overlay {