alice.pds.demo.boltless.dev
This repository has no description
web/components: ease Button's press instead of snapping it
the content wrapper had no transition, so the label jumped its 2px while the
::before shadow faded over 150ms — two halves of one press moving at different
speeds. transition-transform duration-150 ease-in-out matches the shadow
exactly: both resolve to 0.15s cubic-bezier(0.4, 0, 0.2, 1).
Signed-off-by: eti <eti@eti.tf>
author
eti
committer
dawn
date
(Jul 30, 2026, 7:45 PM +0300)
commit
a093a2fc
a093a2fc367459390dda10473cc6a1dd191f0c6e
parent
5d31243b
5d31243bbe7eb7197a23d7b3b06f8362e2bf3da4
change-id
vwlnxmqz
vwlnxmqzzuomvsruvusnyssluszsqnty
+13
-10
+7
-7
web/src/lib/components/repo/RepoHeader.svelte
+7
-7
web/src/lib/components/repo/RepoHeader.svelte
···
72
72
<Button
73
73
href={resolve(`${base}/stars` as "/")}
74
74
variant="default"
75
-
insetShadow={true}
75
+
size="sm"
76
76
icon={Star}
77
77
title="Starred by"
78
78
>
···
81
81
{/if}
82
82
83
83
<ButtonGroup>
84
+
<Button href={resolve(`${base}/fork` as "/")} variant="default" size="sm" icon={GitFork}>
85
+
Fork
86
+
</Button>
84
87
<Button
85
-
href={resolve(`${base}/fork` as "/")}
88
+
href={resolve(`${base}/forks` as "/")}
86
89
variant="default"
87
-
insetShadow={true}
88
-
icon={GitFork}
90
+
size="sm"
91
+
title="Forked by"
89
92
>
90
-
Fork
91
-
</Button>
92
-
<Button href={resolve(`${base}/forks` as "/")} variant="ghost" title="Forked by">
93
93
{counts.forks}
94
94
</Button>
95
95
</ButtonGroup>
+5
-2
web/src/lib/components/ui/Button.svelte
+5
-2
web/src/lib/components/ui/Button.svelte
···
136
136
137
137
{#snippet content()}
138
138
<!-- single wrapper so the press animation moves the label/icon, not the button box.
139
-
gap-[inherit] keeps the size variant's gap working across the extra level. -->
140
-
<span class="inline-flex min-w-0 items-center justify-center gap-[inherit]">
139
+
gap-[inherit] keeps the size variant's gap working across the extra level, and the
140
+
transition matches the ::before shadow's so both halves of the press ease together. -->
141
+
<span
142
+
class="inline-flex min-w-0 items-center justify-center gap-[inherit] transition-transform duration-150 ease-in-out"
143
+
>
141
144
{#if loading}
142
145
<Spinner class={spinnerSize} />
143
146
{:else}