Add chevron animation when selection is opened
This commit is contained in:
parent
d796379119
commit
15099c602f
@ -175,7 +175,7 @@ watch(walletAddress, (): void => {
|
||||
<div class="relative">
|
||||
<button
|
||||
ref="tokenDropdownRef"
|
||||
class="flex flex-row items-center p-2 bg-gray-300 rounded-3xl min-w-fit gap-2"
|
||||
class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
|
||||
@click="openTokenSelection()"
|
||||
>
|
||||
<img
|
||||
@ -187,7 +187,8 @@ watch(walletAddress, (): void => {
|
||||
selectedToken
|
||||
}}</span>
|
||||
<img
|
||||
class="text-gray-900"
|
||||
class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
|
||||
:class="{'scale-y-[-1]': selectTokenToggle}"
|
||||
alt="Chevron Down"
|
||||
src="@/assets/chevronDownBlack.svg"
|
||||
/>
|
||||
|
@ -117,7 +117,7 @@ const handleButtonClick = async (
|
||||
<div class="relative">
|
||||
<button
|
||||
ref="tokenDropdownRef"
|
||||
class="flex flex-row items-center p-2 bg-gray-300 rounded-3xl min-w-fit gap-2"
|
||||
class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
|
||||
@click="openTokenSelection()"
|
||||
>
|
||||
<img
|
||||
@ -129,7 +129,8 @@ const handleButtonClick = async (
|
||||
selectedToken
|
||||
}}</span>
|
||||
<img
|
||||
class="text-gray-900 pr-4 sm:pr-0"
|
||||
class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
|
||||
:class="{'scale-y-[-1]': selectTokenToggle}"
|
||||
alt="Chevron Down"
|
||||
src="@/assets/chevronDownBlack.svg"
|
||||
/>
|
||||
|
Loading…
x
Reference in New Issue
Block a user