tangled.org
To match the expected motion from the button being pressed down, the label needs to move down by a few pixels to follow with shadow animation.
+3
-2
Diff
round #1
+2
-1
input.css
+2
-1
input.css
···
111
111
@layer components {
112
112
.btn {
113
113
@apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center justify-center
114
-
bg-transparent px-2 pb-[0.2rem] text-sm text-gray-900
114
+
bg-transparent px-2 pb-[0.2rem] pt-0 active:pt-[0.2rem] active:pb-0 text-sm text-gray-900
115
+
transition-[padding-top,padding-bottom] duration-150 ease-in-out
115
116
before:absolute before:inset-0 before:-z-10 before:block before:rounded
116
117
before:border before:border-gray-200 before:bg-white
117
118
before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.1),0_1px_0_0_rgba(0,0,0,0.04)]
+1
-1
appview/pages/templates/timeline/home.html
+1
-1
appview/pages/templates/timeline/home.html
···
300
300
{{ $linkMobileStyle := "hover:no-underline inline-flex md:hidden items-center gap-2 text-sm text-black dark:text-white font-medium" }}
301
301
{{ $iconContainerStyle := "relative shrink-0 w-24 h-24 md:w-48 md:h-48" }}
302
302
{{ $iconCircleStyle := "rounded-full flex items-center justify-center border border-gray-200 dark:border-gray-700" }}
303
-
{{ $linkDesktopStyle := "hover:no-underline hidden md:inline-flex absolute -bottom-10 -right-14 items-center gap-2 p-3 text-base btn" }}
303
+
{{ $linkDesktopStyle := "hover:no-underline hidden md:inline-flex absolute -bottom-10 -right-14 items-center gap-2 px-3 pt-[0.65rem] pb-[0.85rem] active:pt-[0.85rem] active:pb-[0.65rem] text-base btn" }}
304
304
305
305
<div class="w-full flex flex-col gap-6 md:gap-40 max-w-5xl mx-auto px-2">
306
306
<div class="{{ $cardStyle }} md:mr-32">
History
2 rounds
1 comment
juliet.tngl.sh
submitted
#1
2 commits
expand
collapse
appview: animate button label when pressed down
To match the expected motion from the button being pressed down, the label needs to move down by a few pixels to follow with shadow animation.
appview: fix the landing page buttons animation
no conflicts, ready to merge
expand 1 comment
juliet.tngl.sh
submitted
#0
1 commit
expand
collapse
appview: animate button label when pressed down
To match the expected motion from the button being pressed down, the label needs to move down by a few pixels to follow with shadow animation.
This is to fix the buttons on the landing page, they are styled somewhat differently and this overrides the global class