@sippy-platform/valkyrie/dist/valkyrie.css

The iconography of Sippy.

@keyframes spin-animation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes beat-animation {
  0%,
  90% {
    transform: scale(1);
  }
  45% {
    transform: scale(var(--vi-animation-scale, 1.4));
  }
}

@keyframes fade-animation {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: var(--vi-animation-opacity, 0.4);
  }
}

@keyframes bounce-animation {
  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* Base icon styling */
.vi-icon {
  height: 1em;
  width: 1em;
  min-width: 1em;
  line-height: 1em;
  box-sizing: content-box;
  display: inline-block;
  position: relative;
  overflow: visible;
  vertical-align: 0;
  flex-shrink: 0;
  transition: inherit;
}

/* Transform classes */
.vi-rotate {
  transition: transform var(--vi-transition-duration, 0.2s)
    var(--vi-transition-timing-function, ease-in-out);
}

.vi-rotate-90 {
  transform: rotate(90deg);
}
.vi-rotate-180 {
  transform: rotate(180deg);
}
.vi-rotate-270 {
  transform: rotate(270deg);
}

.vi-flip {
  transform: scale(-1);
}
.vi-flip-x {
  transform: scaleX(-1);
}
.vi-flip-y {
  transform: scaleY(-1);
}

/* Animation classes */
.vi-spin {
  animation-name: spin-animation;
  animation-timing-function: var(--vi-animation-timing-function, linear);
  animation-duration: var(--vi-animation-duration, 2s);
  animation-iteration-count: var(--vi-animation-iteration-count, infinite);
}

.vi-spin-pulse {
  --vi-animation-timing-function: steps(var(--vi-animation-pulse-steps, 8));
  --vi-animation-duration: 1s;
}

.vi-beat {
  animation-name: beat-animation;
  animation-timing-function: var(--vi-animation-timing-function, ease-in-out);
  animation-duration: var(--vi-animation-duration, 1s);
  animation-iteration-count: var(--vi-animation-iteration-count, infinite);
}

.vi-fade {
  animation-name: fade-animation;
  animation-timing-function: var(--vi-animation-timing-function, ease-in-out);
  animation-duration: var(--vi-animation-duration, 1.5s);
  animation-iteration-count: var(--vi-animation-iteration-count, infinite);
}

.vi-bounce {
  animation-name: bounce-animation;
  animation-duration: var(--vi-animation-duration, 1s);
  animation-iteration-count: var(--vi-animation-iteration-count, infinite);
}