2024-06-21 14:17:45 +08:00

43 lines
947 B
CSS

@tailwind components;
@layer components {
.btn {
@apply inline-flex justify-center items-center border-[0.5px] font-medium cursor-pointer whitespace-nowrap shadow;
}
.btn-disabled {
@apply opacity-60 cursor-not-allowed;
}
.btn-small {
@apply px-2 h-6 rounded-md text-xs
}
.btn-medium {
@apply px-3.5 h-8 rounded-lg text-[13px]
}
.btn-large {
@apply px-4 h-9 rounded-[10px] text-sm font-semibold
}
.btn-secondary {
@apply bg-white hover:bg-white/80 border-gray-200 hover:border-gray-300 text-gray-700;
}
.btn-secondary-accent {
@apply bg-white hover:bg-white/80 border-gray-200 hover:border-gray-300 text-primary-600;
}
.btn-primary {
@apply bg-primary-600 hover:bg-primary-700 text-white;
}
.btn-warning {
@apply bg-red-600 hover:bg-red-700 text-white;
}
.btn-ghost {
@apply bg-transparent hover:bg-gray-200 border-transparent shadow-none text-gray-700;
}
}