Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-27 21:39:16 -05:00
Code Issues Activity

feat(console): add drawer animation (#760)

Browse source 
add drawer animation
This commit is contained in:
simeng-li 2022-05-09 15:54:54 +08:00 • committed by GitHub
parent 6e27c1780d
commit dd8b767130
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/console/src/components/Drawer/index.module.scss
View file

@ -26,3 +26,22 @@
background: rgba(0, 0, 0, 40%);
inset: 0;
}
/* stylelint-disable selector-class-pattern */
/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
:global {
.ReactModal__Content[role='drawer'] {
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
.ReactModal__Content--after-open[role='drawer'] {
transform: translateX(0);
}
.ReactModal__Content--before-close[role='drawer'] {
transform: translateX(100%);
}
}
/* stylelint-enable selector-class-pattern */

2
packages/console/src/components/Drawer/index.tsx
View file

@ -16,9 +16,11 @@ const Drawer = ({ isOpen, onClose, children }: Props) => {
return (
<ReactModal
shouldCloseOnOverlayClick
role="drawer"
isOpen={isOpen}
className={styles.content}
overlayClassName={styles.overlay}
closeTimeoutMS={300}
onRequestClose={onClose}
>
<div className={styles.headline}>