index.css 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. @tailwind components;
  2. @layer components {
  3. .btn {
  4. @apply inline-flex justify-center items-center border-[0.5px] font-medium cursor-pointer whitespace-nowrap shadow;
  5. }
  6. .btn-disabled {
  7. @apply opacity-60 cursor-not-allowed;
  8. }
  9. .btn-small {
  10. @apply px-2 h-6 rounded-md text-xs
  11. }
  12. .btn-medium {
  13. @apply px-3.5 h-8 rounded-lg text-[13px]
  14. }
  15. .btn-large {
  16. @apply px-4 h-9 rounded-[10px] text-sm font-semibold
  17. }
  18. .btn-secondary {
  19. @apply bg-white hover:bg-white/80 border-gray-200 hover:border-gray-300 text-gray-700;
  20. }
  21. .btn-secondary-accent {
  22. @apply bg-white hover:bg-white/80 border-gray-200 hover:border-gray-300 text-primary-600;
  23. }
  24. .btn-primary {
  25. @apply bg-primary-600 hover:bg-primary-700 text-white;
  26. }
  27. .btn-warning {
  28. @apply bg-red-600 hover:bg-red-700 text-white;
  29. }
  30. .btn-ghost {
  31. @apply bg-transparent hover:bg-gray-200 border-transparent shadow-none text-gray-700;
  32. }
  33. .btn-tertiary {
  34. @apply bg-[#F2F4F7] hover:bg-[#E9EBF0] border-transparent shadow-none text-gray-700;
  35. }
  36. }