Spaces:
Runtime error
Runtime error
Đào Minh Tú commited on
Commit ·
3b0313e
1
Parent(s): 500cd91
fix(ui): replace zoom-in animation with side-aware slide for dropdown/select/tooltip
Browse files- components/ui/dropdown-menu.tsx +1 -1
- components/ui/select.tsx +1 -1
- components/ui/tooltip.tsx +1 -1
components/ui/dropdown-menu.tsx
CHANGED
|
@@ -18,7 +18,7 @@ const DropdownMenuContent = React.forwardRef<
|
|
| 18 |
ref={ref}
|
| 19 |
sideOffset={sideOffset}
|
| 20 |
className={cn(
|
| 21 |
-
"z-50 min-w-[10rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[
|
| 22 |
className
|
| 23 |
)}
|
| 24 |
{...props}
|
|
|
|
| 18 |
ref={ref}
|
| 19 |
sideOffset={sideOffset}
|
| 20 |
className={cn(
|
| 21 |
+
"z-50 min-w-[10rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 duration-150 ease-out",
|
| 22 |
className
|
| 23 |
)}
|
| 24 |
{...props}
|
components/ui/select.tsx
CHANGED
|
@@ -36,7 +36,7 @@ const SelectContent = React.forwardRef<
|
|
| 36 |
<SelectPrimitive.Content
|
| 37 |
ref={ref}
|
| 38 |
className={cn(
|
| 39 |
-
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
| 40 |
position === "popper" && "data-[side=bottom]:translate-y-1",
|
| 41 |
className
|
| 42 |
)}
|
|
|
|
| 36 |
<SelectPrimitive.Content
|
| 37 |
ref={ref}
|
| 38 |
className={cn(
|
| 39 |
+
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 duration-150 ease-out",
|
| 40 |
position === "popper" && "data-[side=bottom]:translate-y-1",
|
| 41 |
className
|
| 42 |
)}
|
components/ui/tooltip.tsx
CHANGED
|
@@ -16,7 +16,7 @@ const TooltipContent = React.forwardRef<
|
|
| 16 |
ref={ref}
|
| 17 |
sideOffset={sideOffset}
|
| 18 |
className={cn(
|
| 19 |
-
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0
|
| 20 |
className
|
| 21 |
)}
|
| 22 |
{...props}
|
|
|
|
| 16 |
ref={ref}
|
| 17 |
sideOffset={sideOffset}
|
| 18 |
className={cn(
|
| 19 |
+
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md animate-in fade-in-0 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 duration-150 ease-out",
|
| 20 |
className
|
| 21 |
)}
|
| 22 |
{...props}
|