hakobox/views/static/css/input.css
2025-04-21 17:59:57 -03:00

78 lines
1.6 KiB
CSS

@import "tailwindcss";
/* não deve ser o jeito certo de fazer isso. */
.primary_button {
@apply rounded p-2 bg-indigo-500;
}
.my-input {
@apply w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow;
}
.my-label {
@apply block mb-1 text-sm text-slate-600;
}
.however {
@apply flex items-center mt-2 text-xs text-slate-400;
}
.my-my-input {
@apply w-full min-w-[200px] mb-5;
}
.btn {
@apply w-full rounded-md bg-slate-800 py-2 px-4 my-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none;
}
h1 {
@apply text-5xl font-bold mb-5
}
h2 {
@apply text-4xl font-bold mb-5
}
@keyframes bounce {
0% {
transform: translateX(-7px);
timing-function: ease-in;
}
37% {
transform: translateX(7px);
timing-function: ease-out;
}
55% {
transform: translateX(-7px);
timing-function: ease-in;
}
73% {
transform: translateX(5px);
timing-function: ease-out;
}
82% {
transform: translateX(-5px);
timing-function: ease-in;
}
91% {
transform: translateX(2px);
timing-function: ease-out;
}
96% {
transform: translateX(-2px);
timing-function: ease-in;
}
100% {
transform: translateX(0px);
timing-function: ease-in;
}
}
.bounce {
animation-name: bounce;
animation-duration: .5s;
}