LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dashboard-v2: pin dropdown animation to toggle

This commit is contained in:
Michał Leszczyk 2022-04-11 12:18:14 +02:00
parent 2c2a1259d3
commit 10dde68875
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
1 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/dashboard-v2/src/components/DropdownMenu/DropdownMenu.js
View File

@ -7,13 +7,10 @@ import { ChevronDownIcon } from "../Icons";
const dropDown = keyframes` const dropDown = keyframes`
0% { 0% {
transform: scaleY(0); transform: rotateX(-90deg);
}
80% {
transform: scaleY(1.1);
} }
100% { 100% {
transform: scaleY(1); transform: rotateX(0deg);
} }
`; `;
@ -35,10 +32,11 @@ const Flyout = styled.div.attrs(({ open }) => ({
bg-white shadow-md shadow-palette-200/50 bg-white shadow-md shadow-palette-200/50
${open ? "visible" : "invisible"}`, ${open ? "visible" : "invisible"}`,
}))` }))`
transform-origin: top center;
animation: ${({ open }) => animation: ${({ open }) =>
open open
? css` ? css`
${dropDown} 0.1s ease-in-out ${dropDown} .15s ease-in-out forwards;
` `
: "none"}; : "none"};
`; `;