ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-10 10:15:31 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: update styles and components for theme support; add FontAwesome icons
Some checks are pending
Upload to bunny / upload (1.22.3) (push) Waiting to run

Browse source
This commit is contained in:
mr. M 2024-12-09 00:30:05 +01:00
parent e2eae44969
commit a594d343b4
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
12 changed files with 578 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/Button.astro
View file

@ -1,18 +1,23 @@
---
const { class: className, isPrimary, isBordered, href } = Astro.props;
const { class: className, isPrimary, isBordered, href, id } = Astro.props;
---
{href ? (
<a href={href} class:list={['px-6 py-2 flex gap-2 items-center justify-center rounded-full transition-transform duration-200', className, isPrimary ? 'bg-dark text-paper' : !isBordered ? 'hover:bg-dark border-2 border-dark hover:text-paper' : 'border-2 border-dark hover:bg-dark hover:shadow-sm hover:text-paper !transition-bg']} >
<a id={id} href={href} class:list={['px-6 py-2 flex gap-2 items-center justify-center rounded-full transition-transform duration-200', className, isPrimary ? 'bg-dark text-paper' : !isBordered ? 'hover:bg-dark border-2 border-dark hover:text-paper' : 'border-2 border-dark hover:bg-dark hover:shadow-sm hover:text-paper !transition-bg']} >
<slot />
</a>
) : (
<button class:list={['px-6 py-2 flex gap-2 items-center justify-center rounded-full transition-transform duration-200', className, isPrimary ? 'bg-dark text-paper' : !isBordered ? 'hover:bg-dark border-2 border-dark hover:text-paper' : 'border-2 border-dark hover:bg-dark hover:shadow-sm hover:text-paper !transition-bg']} >
<button id={id} class:list={['px-6 py-2 flex gap-2 items-center justify-center rounded-full transition-transform duration-200', className, isPrimary ? 'bg-dark text-paper' : !isBordered ? 'hover:bg-dark border-2 border-dark hover:text-paper' : 'border-2 border-dark hover:bg-dark hover:shadow-sm hover:text-paper !transition-bg']} >
<slot />
</button>
)}
<style>
button {
button, a {
font-size: .9rem;
&[disabled] {
cursor: not-allowed;
opacity: .5;
}
}
</style>