spur-tailwind/css/components/buttons.css

Spur web UI

/* Base Primary Button */
.btn {
  @apply relative inline-flex items-center py-3 px-4 max-w-2xs bg-buzz-purple border border-buzz-purple rounded-md text-white font-semibold no-underline;
  transition: background-color 300ms ease-in-out, color 300ms ease-in-out,
    border-color 300ms ease-in-out;
}

.btn::after {
  @apply opacity-0;
  transition: opacity 300ms ease-in-out;
}

.btn:hover:not([disabled]) {
  @apply bg-hover-purple border-hover-purple cursor-pointer;
}

.btn:active:not([disabled]) {
  @apply bg-dark-purple border-dark-purple;
}

.btn[disabled] {
  @apply bg-border-line-purple border-border-line-purple text-white;
}

.btn-destructive {
  @apply bg-deep-watermelon border-deep-watermelon;
}

/* Destructive Button */
.btn-destructive:hover:not([disabled]) {
  @apply bg-hover-red border-hover-red;
}

.btn-destructive:active:not([disabled]) {
  @apply bg-dark-red border-dark-red;
}

/* Ghost Button */
.btn-ghost {
  @apply bg-transparent text-buzz-purple;
}

.btn-ghost:hover:not([disabled]) {
  @apply bg-transparent text-navy-purple border-navy-purple;
}

.btn-ghost:active:not([disabled]) {
  @apply bg-buzz-purple-10 text-buzz-purple border-buzz-purple;
}

.btn-ghost[disabled] {
  @apply border-border-line-purple text-border-line-purple bg-transparent;
}

.btn-ghost-white,
.btn-ghost-white:hover:not([disabled]),
.btn-ghost-white:active:not([disabled]) {
  @apply bg-transparent border-white text-white font-normal;
}

/* Kiosk Button */
.btn-kiosk {
  @apply px-8 py-7 text-2xl justify-center;
}

/* Size modifiers */
.btn-sm {
  @apply py-2 px-3;
}

/* Loading states */
.is-loading,
.is-loading[disabled] {
  @apply pointer-events-none;
  background-color: rgb(227, 231, 239);
  border-color: rgb(227, 231, 239);
  color: rgba(255, 255, 255, 0);
}

.btn-ghost.is-loading,
.btn-ghost.is-loading[disabled] {
  @apply bg-transparent;
  color: rgba(255, 255, 255, 0);
}

.is-loading::after {
  @apply absolute block w-8 h-8 border-border-line-purple border-4 rounded-full opacity-100 pointer-events-none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0);
  content: '';
  animation: rotateButtonSpinner 1.5s linear infinite;
  animation-delay: 0.2s;
  border-top-color: #763eff;
}

@keyframes rotateButtonSpinner {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Active states */
.btn {
  & svg {
    transition: transform 100ms ease-in-out;
  }

  &.is-toggled svg {
    transform: rotate(90deg);
  }
}