hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add chevron animation when selection is opened

Browse Source
This commit is contained in:
Vagner 2024-10-11 11:58:25 -03:00
parent d796379119
commit 15099c602f
2 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/SearchComponent.vue
View File

@ -175,7 +175,7 @@ watch(walletAddress, (): void => {
<div class="relative"> <div class="relative">
<button <button
ref="tokenDropdownRef" 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()" @click="openTokenSelection()"
> >
<img <img
@ -187,7 +187,8 @@ watch(walletAddress, (): void => {
selectedToken selectedToken
}}</span> }}</span>
<img <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" alt="Chevron Down"
src="@/assets/chevronDownBlack.svg" src="@/assets/chevronDownBlack.svg"
/> />

5
src/components/SellerSteps/WantSellComponent.vue
View File

@ -117,7 +117,7 @@ const handleButtonClick = async (
<div class="relative"> <div class="relative">
<button <button
ref="tokenDropdownRef" 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()" @click="openTokenSelection()"
> >
<img <img
@ -129,7 +129,8 @@ const handleButtonClick = async (
selectedToken selectedToken
}}</span> }}</span>
<img <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" alt="Chevron Down"
src="@/assets/chevronDownBlack.svg" src="@/assets/chevronDownBlack.svg"
/> />