diff --git a/src/app/atoms/modal/RawModal.jsx b/src/app/atoms/modal/RawModal.jsx index 306d7d1b..450be0e0 100644 --- a/src/app/atoms/modal/RawModal.jsx +++ b/src/app/atoms/modal/RawModal.jsx @@ -42,7 +42,6 @@ function RawModal({ shouldCloseOnEsc={closeFromOutside} shouldCloseOnOverlayClick={closeFromOutside} shouldReturnFocusAfterClose={false} - closeTimeoutMS={300} > {children} diff --git a/src/app/atoms/modal/RawModal.scss b/src/app/atoms/modal/RawModal.scss index 72a64d76..4da7d6c9 100644 --- a/src/app/atoms/modal/RawModal.scss +++ b/src/app/atoms/modal/RawModal.scss @@ -1,27 +1,3 @@ -.ReactModal__Overlay { - opacity: 0; - transition: opacity 200ms var(--fluid-slide-up); -} -.ReactModal__Overlay--after-open{ - opacity: 1; -} -.ReactModal__Overlay--before-close{ - opacity: 0; -} - -.ReactModal__Content { - transform: translateY(100%); - transition: transform 200ms var(--fluid-slide-up); -} - -.ReactModal__Content--after-open{ - transform: translateY(0); -} - -.ReactModal__Content--before-close{ - transform: translateY(100%); -} - .raw-modal { --small-modal-width: 525px; --medium-modal-width: 712px; @@ -60,4 +36,35 @@ height: 100%; background-color: var(--bg-overlay); } +} + +.ReactModal__Overlay { + animation: raw-modal--overlay 150ms; +} + +.ReactModal__Content { + animation: raw-modal--content 150ms; +} + +@keyframes raw-modal--content { + 0% { + transform: scale(1.1); + opacity: .5; + } + 80% { + transform: scale(.995); + opacity: 1; + } + 100% { + transform: scale(1) translateY(0); + opacity: 1; + } +} +@keyframes raw-modal--overlay { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } \ No newline at end of file