Ryan/drop
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop.git synced 2025-11-13 08:12:40 +10:00
Code Issues Packages Projects Releases Wiki Activity

style(collections): Added hover state & animation for addition icon

Browse Source
This commit is contained in:
Aden Lindsay
2025-01-28 19:20:33 +10:30
committed by GitHub
parent 1967de72c8
commit 6e057afb6d
1 changed files with 11 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
pages/library/index.vue
View File

@ -46,21 +46,19 @@
<div> <div>
<button <button
@click="collectionCreateOpen = true" @click="collectionCreateOpen = true"
class="transition-all group relative rounded-lg border-2 border-dashed border-zinc-800 p-4 hover:border-zinc-700 hover:bg-zinc-900/30 transition-all duration-200 text-left w-full" class="group flex flex-row rounded-lg overflow-hidden transition-all duration-200 text-left w-full hover:scale-105"
> >
<div class="flex items-center gap-3"> <div class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800 border-2 border-dashed border-zinc-700">
<PlusIcon class="h-5 w-5 text-zinc-400 group-hover:text-zinc-300" /> <div class="flex items-center gap-3">
<h3 <PlusIcon class="h-5 w-5 text-zinc-400 group-hover:text-zinc-300 transition-all duration-300 group-hover:rotate-90" />
class="transition text-lg font-semibold text-zinc-400 group-hover:text-zinc-300" <h3 class="text-lg font-semibold text-zinc-400 group-hover:text-zinc-300">
> Create Collection
Create Collection </h3>
</h3> </div>
<p class="mt-1 text-sm text-zinc-500 group-hover:text-zinc-400">
Add a new collection to organize your games
</p>
</div> </div>
<p
class="transition mt-1 text-sm text-zinc-500 group-hover:text-zinc-400"
>
Add a new collection to organize your games
</p>
</button> </button>
</div> </div>
</TransitionGroup> </TransitionGroup>