style: add transition

This commit is contained in:
Fred 2024-04-30 19:02:18 +08:00
parent ecf6cc27d6
commit 15d6ed252f
No known key found for this signature in database
GPG Key ID: 4DABDA85EF70EC71
3 changed files with 3 additions and 3 deletions

View File

@ -57,7 +57,7 @@ export default function Input(props: CommonInputProps & InputProps) {
return ( return (
<div <div
className={` group/input w-[100%] rounded-chat-input bg-input flex gap-3 items-center px-3 py-2 ${className} hover:bg-select-hover ${inputClassName}`} className={` group/input w-[100%] rounded-chat-input bg-input transition-colors duration-300 ease-in-out flex gap-3 items-center px-3 py-2 ${className} hover:bg-select-hover ${inputClassName}`}
> >
<input <input
{...rest} {...rest}

View File

@ -94,7 +94,7 @@ const Select = <Value extends number | string>(props: SearchProps<Value>) => {
className={selectClassName} className={selectClassName}
> >
<div <div
className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-time text-sm-title cursor-pointer hover:bg-select-hover`} className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-time text-sm-title cursor-pointer hover:bg-select-hover transition duration-300 ease-in-out`}
ref={contentRef} ref={contentRef}
> >
<div className={`flex items-center gap-2 flex-1`}> <div className={`flex items-center gap-2 flex-1`}>

View File

@ -15,7 +15,7 @@ export default function Switch(props: SwitchProps) {
<RadixSwitch.Root <RadixSwitch.Root
checked={value} checked={value}
onCheckedChange={onChange} onCheckedChange={onChange}
className={` cursor-pointer flex w-switch h-switch p-0.5 box-content rounded-md ${switchClassName} ${ className={` cursor-pointer flex w-switch h-switch p-0.5 box-content transition-colors duration-300 ease-in-out rounded-md ${switchClassName} ${
value value
? "bg-switch-checked justify-end" ? "bg-switch-checked justify-end"
: "bg-switch-unchecked justify-start" : "bg-switch-unchecked justify-start"