You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_button.scss 1.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. .button {
  2. @apply inline-flex
  3. items-center
  4. justify-center
  5. px-3
  6. rounded
  7. uppercase
  8. font-semibold;
  9. @apply text-primary;
  10. height: 40px;
  11. transition: all 0.2s ease-in-out;
  12. outline: none !important;
  13. &:hover {
  14. @apply bg-primary-500-10;
  15. }
  16. &:active {
  17. @apply bg-primary-500-20;
  18. }
  19. &.is-active,
  20. &.nuxt-link-exact-active {
  21. @apply text-white bg-primary;
  22. }
  23. &.is-outlined {
  24. @apply border border-primary;
  25. }
  26. &.is-danger {
  27. @apply text-danger;
  28. &:hover {
  29. @apply bg-danger-500-10;
  30. }
  31. &:active {
  32. @apply bg-danger-500-20;
  33. }
  34. }
  35. &.is-success {
  36. @apply text-success;
  37. &:hover {
  38. @apply bg-success-500-10;
  39. }
  40. &:active {
  41. @apply bg-success-500-20;
  42. }
  43. }
  44. &.is-sm {
  45. @apply px-2 text-sm;
  46. height: 30px;
  47. }
  48. &.is-xl {
  49. @apply px-6 text-xl;
  50. height: 50px;
  51. }
  52. }
  53. .buttons {
  54. @apply flex items-center flex-wrap justify-start;
  55. &.is-center {
  56. @apply justify-center;
  57. }
  58. &.is-right {
  59. @apply justify-end;
  60. }
  61. &.is-group {
  62. .button {
  63. &:not(:last-child) {
  64. @apply rounded-r-none;
  65. }
  66. &:not(:first-child) {
  67. @apply rounded-l-none border-l-0;
  68. }
  69. }
  70. }
  71. }