thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: transsition

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/app/components/issues/select/assignee.tsx
View File

@ -66,11 +66,11 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
<> <>
<Combobox.Button <Combobox.Button
className={({ open }) => 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 open
? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] " ? "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 <Transition
show={open} show={open}
as={Fragment} as={Fragment}
leave="transition ease-in duration-100" enter="transition ease-out duration-200"
leaveFrom="opacity-100" enterFrom="opacity-0 translate-y-1"
leaveTo="opacity-0" 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 <Combobox.Options
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs

13
apps/app/components/issues/select/label.tsx
View File

@ -61,11 +61,11 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
<> <>
<Combobox.Button <Combobox.Button
className={({ open }) => 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 open
? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] " ? "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 <Transition
show={open} show={open}
as={React.Fragment} as={React.Fragment}
leave="transition ease-in duration-100" enter="transition ease-out duration-200"
leaveFrom="opacity-100" enterFrom="opacity-0 translate-y-1"
leaveTo="opacity-0" 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 <Combobox.Options
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs

13
apps/app/components/issues/select/priority.tsx
View File

@ -19,11 +19,11 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
<> <>
<Listbox.Button <Listbox.Button
className={({ open }) => 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 open
? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] " ? "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 <Transition
show={open} show={open}
as={React.Fragment} as={React.Fragment}
leave="transition ease-in duration-100" enter="transition ease-out duration-200"
leaveFrom="opacity-100" enterFrom="opacity-0 translate-y-1"
leaveTo="opacity-0" 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 <Listbox.Options
className={`absolute z-10 max-h-52 min-w-[8rem] px-2 py-2 text-xs className={`absolute z-10 max-h-52 min-w-[8rem] px-2 py-2 text-xs

13
apps/app/components/issues/select/state.tsx
View File

@ -67,11 +67,11 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
<> <>
<Combobox.Button <Combobox.Button
className={({ open }) => 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 open
? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] " ? "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 <Transition
show={open} show={open}
as={React.Fragment} as={React.Fragment}
leave="transition ease-in duration-100" enter="transition ease-out duration-200"
leaveFrom="opacity-100" enterFrom="opacity-0 translate-y-1"
leaveTo="opacity-0" 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 <Combobox.Options
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs