juliet.tngl.sh
forked from
tangled.org/core
Monorepo for Tangled
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.
handle.invalid
+2
-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)]