mirrors/pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-02-15 15:45:05 +00:00
Code Activity

feat: improve buttons styling

Browse Source
This commit is contained in:
Elias Schneider
2025-05-21 23:22:30 +02:00
parent c3a03db8b0
commit c37386f8b2
3 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/lib/components/ui/button/button.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts" module> <script lang="ts" module>
import { cn, type WithElementRef } from '$lib/utils/style.js'; import { cn, type WithElementRef } from '$lib/utils/style.js';
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'; import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
import { type VariantProps, tv } from 'tailwind-variants'; import { tv, type VariantProps } from 'tailwind-variants';
export const buttonVariants = tv({ export const buttonVariants = tv({
base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
@@ -17,10 +17,10 @@
link: 'text-primary underline-offset-4 hover:underline' link: 'text-primary underline-offset-4 hover:underline'
}, },
size: { size: {
default: 'h-9 px-4 py-2 has-[>svg]:px-3', default: 'h-10 px-4 py-2',
sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5', sm: 'h-9 rounded-md px-3',
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', lg: 'h-11 rounded-md px-8',
icon: 'size-9' icon: 'h-10 w-10'
} }
}, },
defaultVariants: { defaultVariants: {
@@ -69,7 +69,7 @@
{...restProps} {...restProps}
> >
{#if isLoading} {#if isLoading}
<LoaderCircle class="mr-2 size-4 animate-spin" /> <LoaderCircle class="size-4 animate-spin" />
{/if} {/if}
{@render children?.()} {@render children?.()}
</a> </a>
@@ -79,11 +79,11 @@
data-slot="button" data-slot="button"
class={cn(buttonVariants({ variant, size }), className)} class={cn(buttonVariants({ variant, size }), className)}
{type} {type}
{disabled} disabled={disabled || isLoading}
{...restProps} {...restProps}
> >
{#if isLoading} {#if isLoading}
<LoaderCircle class="mr-2 size-4 animate-spin" /> <LoaderCircle class="size-4 animate-spin" />
{/if} {/if}
{@render children?.()} {@render children?.()}
</button> </button>

2
frontend/src/lib/components/ui/tabs/tabs-list.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { cn } from '$lib/utils/style';
import { Tabs as TabsPrimitive } from 'bits-ui'; import { Tabs as TabsPrimitive } from 'bits-ui';
import { cn } from '$lib/utils/style.js';
let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props(); let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
</script> </script>

4
frontend/src/lib/components/ui/tabs/tabs-trigger.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { Tabs as TabsPrimitive } from 'bits-ui';
import { cn } from '$lib/utils/style.js'; import { cn } from '$lib/utils/style.js';
import { Tabs as TabsPrimitive } from 'bits-ui';
let { let {
ref = $bindable(null), ref = $bindable(null),
@@ -13,7 +13,7 @@
bind:ref bind:ref
data-slot="tabs-trigger" data-slot="tabs-trigger"
class={cn( class={cn(
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-offset-2 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-offset-2 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:shadow-sm dark:data-[state=active]:bg-black [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className className
)} )}
{...restProps} {...restProps}