feat: style and animation improvements

(cherry picked from commit 69deabde36f96a96bc3c69775fa5a9b4eead0f01)
This commit is contained in:
saicaca
2023-10-16 22:45:30 +08:00
parent eb7c408b6a
commit dd9adb2ed6
11 changed files with 53 additions and 39 deletions

View File

@@ -55,7 +55,7 @@ const commonUrl: string = parts.slice(0, -1).join('/') + '/';
<div class:list={[className, "flex flex-row gap-3 justify-center"]}>
<a href={page.url.prev}>
<Button isIcon card iconName="material-symbols:chevron-left-rounded" class="text-[var(--primary)] rounded-lg" iconSize={28}
<Button isIcon card iconName="material-symbols:chevron-left-rounded" class:list={["text-[var(--primary)] rounded-lg", {"active:scale-90": page.url.prev != undefined}]} iconSize={28}
disabled = {page.url.prev == undefined}
></Button>
</a>
@@ -70,14 +70,14 @@ const commonUrl: string = parts.slice(0, -1).join('/') + '/';
{p}
</div>
return <a href={commonUrl + p}>
<Button card iconName="material-symbols:chevron-left-rounded" class="rounded-lg" height="44px" width="44px">
<Button card iconName="material-symbols:chevron-left-rounded" class="rounded-lg active:scale-[0.85]" height="44px" width="44px">
{p}
</Button>
</a>
})}
</div>
<a href={page.url.next}>
<Button isIcon card iconName="material-symbols:chevron-right-rounded" class="text-[var(--primary)] rounded-lg" iconSize={28}
<Button isIcon card iconName="material-symbols:chevron-right-rounded" class:list={["text-[var(--primary)] rounded-lg", {"active:scale-90": page.url.next != undefined}]} iconSize={28}
disabled = {page.url.next == undefined}
></Button>
</a>