crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 07:26:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove transition/animation for mobile

Browse Source
This commit is contained in:
Bel Curcio 2022-03-08 18:34:25 +01:00
parent e8b92119ea
commit 9bd7d1eda3
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
site/components/ui/Dropdown/Dropdown.module.css
View File

@ -1,13 +1,7 @@
.root { .root {
@apply shadow-lg w-56 bg-accent-0; @apply w-56 bg-accent-0;
box-shadow: hsl(206 22% 7% / 45%) 0px 10px 38px -10px, animation: none;
hsl(206 22% 7% / 20%) 0px 10px 20px -15px; transition: none;
will-change: transform, opacity;
animation-duration: 600ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
animation-fill-mode: forwards;
transform-origin: var(--radix-dropdown-menu-content-transform-origin);
animation-name: slideIn;
} }
@keyframes slideIn { @keyframes slideIn {
@ -17,6 +11,20 @@
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0px);
}
}
@media screen(md) {
.root {
@apply shadow-lg;
box-shadow: hsl(206 22% 7% / 45%) 0px 10px 38px -10px,
hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
will-change: transform, opacity;
animation-duration: 600ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
animation-fill-mode: forwards;
transform-origin: var(--radix-dropdown-menu-content-transform-origin);
animation-name: slideIn;
} }
} }

2
site/components/ui/Dropdown/Dropdown.tsx
View File

@ -15,7 +15,7 @@ export const DropdownContent = React.forwardRef<
React.RefAttributes<HTMLDivElement> React.RefAttributes<HTMLDivElement>
>(function DropdownContent({ children, ...props }, forwardedRef) { >(function DropdownContent({ children, ...props }, forwardedRef) {
return ( return (
<DropdownMenu.Content ref={forwardedRef} side="bottom" {...props}> <DropdownMenu.Content ref={forwardedRef} asChild {...props}>
<div className={s.root}>{children}</div> <div className={s.root}>{children}</div>
</DropdownMenu.Content> </DropdownMenu.Content>
) )