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.
+2
-1
Diff
round #0
+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)]
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