spur-tailwind/css/components/favorite.css

Spur web UI

.favorite {
  @apply relative m-1 w-6 h-6 text-border-line-purple;
  transition: opacity 200ms ease-in-out, color 200ms ease-in-out;
}

tr .favorite {
  @apply opacity-0;
}

tr:hover .favorite {
  @apply opacity-100;
}

.favorite-icon {
  @apply absolute top-0 left-0 w-6 h-6 fill-current;
  transition: opacity 150ms ease-in-out;
}

.favorite-icon-unfavorited {
  @apply opacity-100;
}

.favorite-icon-favorited {
  @apply opacity-0 text-deep-watermelon;
}

.favorite-row:hover .favorite,
.favorite-row .favorite.is-active,
.favorite.is-active {
  @apply opacity-100;
}

.favorite:active,
.favorite:focus {
  outline: none;
}

.favorite.is-active {
  animation-name: pulse;
  animation-duration: 300ms;
  animation-fill-mode: both;
  animation-iteration-count: 2;

  & .favorite-icon-unfavorited {
    @apply opacity-0;
  }

  & .favorite-icon-favorited {
    @apply opacity-100;
  }
}

/* Favorite row modifier */
.favorite-row .favorite {
  @apply opacity-0;
}

/* Pulse animation */
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}