starred/reiverr
1
0
Fork 0
mirror of https://github.com/aleksilassila/reiverr.git synced 2026-04-26 02:35:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Changes to styling and font

Browse Source
This commit is contained in:
Aleksi Lassila
2023-08-02 22:55:00 +03:00
parent 353121dcf3
commit 4646883dff
8 changed files with 154 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/lib/components/Button.svelte
View File

@@ -5,24 +5,39 @@
const dispatch = createEventDispatcher();
export let size: 'md' | 'sm' | 'lg' = 'md';
export let type: 'primary' | 'secondary' | 'tertiary' = 'primary';
export let type: 'primary' | 'secondary' | 'tertiary' = 'secondary';
export let disabled = false;
export let href: string | undefined = undefined;
export let target: string | undefined = undefined;
let buttonStyle: string;
// $: buttonStyle = classNames(
// 'border-2 border-white transition-all uppercase tracking-widest text-xs whitespace-nowrap',
// {
// 'bg-white text-zinc-900 font-extrabold': type === 'primary',
// 'hover:bg-amber-400 hover:border-amber-400': type === 'primary' && !disabled,
// 'font-semibold': type === 'secondary',
// 'hover:bg-white hover:text-black': type === 'secondary' && !disabled,
// 'px-8 py-3.5': size === 'lg',
// 'px-6 py-2.5': size === 'md',
// 'px-5 py-2': size === 'sm',
// 'opacity-70': disabled,
// 'cursor-pointer': !disabled
// }
// );
$: buttonStyle = classNames(
'border-2 border-white transition-all uppercase tracking-widest text-xs whitespace-nowrap',
'flex items-center gap-1 py-3 px-6 rounded-xl font-medium select-none cursor-pointer selectable transition-all backdrop-blur-lg',
{
'bg-white text-zinc-900 font-extrabold': type === 'primary',
'hover:bg-amber-400 hover:border-amber-400': type === 'primary' && !disabled,
'font-semibold': type === 'secondary',
'hover:bg-white hover:text-black': type === 'secondary' && !disabled,
'px-8 py-3.5': size === 'lg',
'px-6 py-2.5': size === 'md',
'text-zinc-200 bg-stone-800 bg-opacity-30': type === 'secondary',
'focus-visible:bg-zinc-200 focus-visible:text-zinc-800 hover:bg-zinc-200 hover:text-zinc-800':
type === 'secondary' && !disabled,
'py-3 px-6': size === 'lg',
// 'py-3 px-6': size === 'md',
'px-5 py-2': size === 'sm',
'opacity-70': disabled,
'opacity-50': disabled,
'cursor-pointer': !disabled
}
);
@@ -37,7 +52,14 @@
};
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<button class={buttonStyle} on:click={handleClick} on:mouseover on:mouseleave {disabled}>
<button
class={buttonStyle}
on:click={handleClick}
on:focus
on:mouseover
on:mouseleave
on:blur
{disabled}
>
<slot />
</button>