antv
48 lines
1.2 KiB
CSS
48 lines
1.2 KiB
CSS
/* resources/css/login.css */
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.3s ease-in-out forwards;
|
|
}
|
|
|
|
.floating-group {
|
|
@apply relative w-full;
|
|
}
|
|
|
|
.floating-input {
|
|
@apply w-full h-[56px] pl-11 pr-12 text-sm text-text-dark bg-transparent border border-[#c4c4c4] rounded outline-none transition-all duration-200 ease-in-out;
|
|
}
|
|
|
|
.floating-input:hover {
|
|
@apply border-text-medium;
|
|
}
|
|
|
|
.floating-input:focus {
|
|
@apply border-2 border-primary pl-[43px];
|
|
}
|
|
|
|
.floating-label {
|
|
@apply absolute left-11 top-1/2 -translate-y-1/2 text-sm text-text-muted pointer-events-none transition-all duration-200 ease-in-out bg-transparent p-0;
|
|
}
|
|
|
|
.floating-input:focus ~ .floating-label,
|
|
.floating-input:not(:placeholder-shown) ~ .floating-label {
|
|
@apply top-0 -translate-y-1/2 text-xs text-primary bg-white px-1.5 left-10;
|
|
}
|
|
|
|
.floating-input:not(:focus):not(:placeholder-shown) ~ .floating-label {
|
|
@apply text-text-light;
|
|
}
|
|
|
|
.floating-icon {
|
|
@apply absolute left-4 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none transition-colors duration-200 ease-in-out flex items-center justify-center;
|
|
}
|
|
|
|
.floating-input:focus ~ .floating-icon {
|
|
@apply text-primary;
|
|
}
|