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.3KB

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