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`
0% {
transform: scaleY(0);
}
80% {
transform: scaleY(1.1);
transform: rotateX(-90deg);
}
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
${open ? "visible" : "invisible"}`,
}))`
transform-origin: top center;
animation: ${({ open }) =>
open
? css`
${dropDown} 0.1s ease-in-out
${dropDown} .15s ease-in-out forwards;
`
: "none"};
`;