Drop-OSS/drop
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop.git synced 2026-01-31 15:37:09 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

style(AddLibraryButton): New hover state animations

Browse Source
This commit is contained in:
Aden Lindsay
2025-01-28 19:15:49 +10:30
committed by GitHub
parent 1a2aca9999
commit bfcc7519bf
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/AddLibraryButton.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="inline-flex">
<div class="inline-flex group hover:scale-105 transition-all duration-200">
<LoadingButton
:loading="isLibraryLoading"
@click="() => toggleLibrary()"
:style="'none'"
class="transition w-48 inline-flex items-center justify-center gap-x-2 rounded-l-md bg-white/10 hover:bg-white/15 text-zinc-100 backdrop-blur px-5 py-3"
class="transition w-48 inline-flex items-center justify-center gap-x-2 rounded-l-md bg-white/10 group-hover:bg-white/15 text-zinc-100 backdrop-blur px-5 py-3 active:scale-95"
>
{{ inLibrary ? "In Library" : "Add to Library" }}
<CheckIcon v-if="inLibrary" class="-mr-0.5 h-5 w-5" aria-hidden="true" />
@@ -15,7 +15,7 @@
<Menu as="div" class="relative">
<MenuButton
as="div"
class="transition cursor-pointer inline-flex items-center rounded-r-md h-full ml-[2px] bg-white/10 hover:bg-white/30 backdrop-blur py-3.5 px-2 justify-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/20"
class="transition cursor-pointer inline-flex items-center rounded-r-md h-full ml-[2px] bg-white/10 group-hover:bg-white/15 backdrop-blur py-3.5 px-2 justify-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/20"
>
<ChevronDownIcon class="h-5 w-5 text-white" aria-hidden="true" />
</MenuButton>