style: transsition

This commit is contained in:
Anmol Singh Bhatia 2023-03-02 13:36:20 +05:30
parent 5ae1f63985
commit 6bf608a37a
4 changed files with 32 additions and 20 deletions

View File

@ -66,11 +66,11 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
<>
<Combobox.Button
className={({ open }) =>
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-300
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
${
open
? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
: "hover:bg-[rgba(63,118,255,0.05)] focus:bg-[rgba(63,118,255,0.05)]"
: "hover:bg-[rgba(63,118,255,0.05)] "
}`
}
>
@ -90,9 +90,12 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Combobox.Options
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs

View File

@ -61,11 +61,11 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
<>
<Combobox.Button
className={({ open }) =>
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-300
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
${
open
? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
: "hover:bg-[rgba(63,118,255,0.05)] focus:bg-[rgba(63,118,255,0.05)]"
: "hover:bg-[rgba(63,118,255,0.05)] "
}`
}
>
@ -89,9 +89,12 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Combobox.Options
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs

View File

@ -19,11 +19,11 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
<>
<Listbox.Button
className={({ open }) =>
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-300
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
${
open
? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
: "hover:bg-[rgba(63,118,255,0.05)] focus:bg-[rgba(63,118,255,0.05)]"
: "hover:bg-[rgba(63,118,255,0.05)]"
}`
}
>
@ -40,9 +40,12 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Listbox.Options
className={`absolute z-10 max-h-52 min-w-[8rem] px-2 py-2 text-xs

View File

@ -67,11 +67,11 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
<>
<Combobox.Button
className={({ open }) =>
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-300
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
${
open
? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
: "hover:bg-[rgba(63,118,255,0.05)] focus:bg-[rgba(63,118,255,0.05)]"
: "hover:bg-[rgba(63,118,255,0.05)]"
}`
}
>
@ -93,9 +93,12 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Combobox.Options
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs