raft-ui/dist/components/steps/otter-indicator.css

React UI components for Raft.

/* ─────────────────────────────────────────────────────────────────────────
   OtterIndicator — an otter for a step marker (`Steps` `renderIndicator`),
   posed by the step's status. The picture is fixed art; only the badges and
   the "z" take theme colors.
   ───────────────────────────────────────────────────────────────────────── */

.r-otter-indicator {
  overflow: visible;
}
.r-otter-indicator * {
  transform-box: view-box;
}
.r-otter-indicator__body {
  transform-origin: 24px 28px;
}
.r-otter-indicator__arm {
  transform-origin: 29px 27px;
}
.r-otter-indicator__ripple {
  opacity: 0;
  transform-origin: 6px 30.5px;
}
.r-otter-indicator__z {
  opacity: 0;
}
.r-otter-indicator__parcel--adrift {
  transform-origin: 6px 25px;
}
@media (prefers-reduced-motion: no-preference) {
  .r-otter-indicator__wave {
    animation: r-otter-indicator-wave 1.2s linear infinite;
  }
  .r-otter-indicator__wave--back {
    animation-duration: 2s;
  }
  .r-otter-indicator--process .r-otter-indicator__body {
    animation: r-otter-indicator-bob 1.8s ease-in-out infinite alternate;
  }
  .r-otter-indicator--process .r-otter-indicator__arm {
    animation: r-otter-indicator-paddle 0.9s ease-in-out infinite alternate;
  }
  .r-otter-indicator--process .r-otter-indicator__ripple {
    animation: r-otter-indicator-ripple 1.8s ease-out infinite;
  }
  .r-otter-indicator--process .r-otter-indicator__ripple--late {
    animation-delay: 0.9s;
  }
  .r-otter-indicator--finish .r-otter-indicator__wave {
    animation-duration: 3s;
  }
  .r-otter-indicator--finish .r-otter-indicator__body {
    animation: r-otter-indicator-bob 3.2s ease-in-out infinite alternate;
  }
  .r-otter-indicator--wait .r-otter-indicator__body {
    animation: r-otter-indicator-breathe 2.4s ease-in-out infinite alternate;
  }
  .r-otter-indicator--wait .r-otter-indicator__z {
    animation: r-otter-indicator-z 2.4s ease-out infinite;
  }
  .r-otter-indicator--wait .r-otter-indicator__z--late {
    animation-delay: 1.2s;
  }
  .r-otter-indicator--error .r-otter-indicator__body {
    animation: r-otter-indicator-shiver 0.18s linear infinite alternate;
  }
  .r-otter-indicator--error .r-otter-indicator__parcel--adrift {
    animation: r-otter-indicator-drift 2s ease-in-out infinite alternate;
  }
}
.r-otter-traveler__stroke {
  transform-origin: 29px 23px;
}
.r-otter-traveler__kick {
  transform-origin: 13px 27px;
}
.r-otter-traveler__spray {
  opacity: 0;
  transform-origin: 36px 14px;
}
@media (prefers-reduced-motion: no-preference) {
  /* The traveler in progress never stops paddling: a full backstroke with a
     flick of spray, the hind foot kicking twice as fast, and a small surge
     forward with each stroke. */
  .r-otter-traveler.r-otter-indicator--process .r-otter-indicator__body {
    animation: r-otter-traveler-surge 0.9s ease-in-out infinite;
  }
  .r-otter-traveler__stroke {
    animation: r-otter-traveler-stroke 0.9s ease-in-out infinite;
  }
  .r-otter-traveler__kick {
    animation: r-otter-traveler-kick 0.45s ease-in-out infinite alternate;
  }
  .r-otter-traveler__spray {
    animation: r-otter-traveler-spray 0.9s ease-out infinite;
  }
}
@keyframes r-otter-traveler-stroke {
  from {
    transform: rotate(-75deg);
  }
  55% {
    transform: rotate(40deg);
  }
  to {
    transform: rotate(-75deg);
  }
}
@keyframes r-otter-traveler-kick {
  from {
    transform: rotate(-25deg);
  }
  to {
    transform: rotate(20deg);
  }
}
@keyframes r-otter-traveler-spray {
  0%,
  45% {
    opacity: 0;
    transform: translate(-1px, 1px) scale(0.6);
  }
  60% {
    opacity: 0.95;
  }
  to {
    opacity: 0;
    transform: translate(2px, -2.5px) scale(1);
  }
}
@keyframes r-otter-traveler-surge {
  0%,
  100% {
    transform: translateX(0) rotate(-1deg);
  }
  55% {
    transform: translateX(1.2px) rotate(1.5deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .r-otter-indicator__z {
    opacity: 1;
  }
}
@keyframes r-otter-indicator-bob {
  from {
    transform: translateY(-0.6px) rotate(-3deg);
  }
  to {
    transform: translateY(1.2px) rotate(2deg);
  }
}
@keyframes r-otter-indicator-paddle {
  from {
    transform: rotate(-35deg);
  }
  to {
    transform: rotate(30deg);
  }
}
@keyframes r-otter-indicator-wave {
  to {
    transform: translateX(-12px);
  }
}
@keyframes r-otter-indicator-ripple {
  from {
    opacity: 0.8;
    transform: scale(0.4);
  }
  to {
    opacity: 0;
    transform: scale(1.6);
  }
}
@keyframes r-otter-indicator-breathe {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.02, 1.05);
  }
}
@keyframes r-otter-indicator-z {
  from {
    opacity: 0;
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(4px, -7px);
  }
}
@keyframes r-otter-indicator-shiver {
  from {
    transform: translateX(-0.4px);
  }
  to {
    transform: translateX(0.4px);
  }
}
@keyframes r-otter-indicator-drift {
  from {
    transform: translate(0, 0) rotate(-18deg);
  }
  to {
    transform: translate(-1.5px, 1.2px) rotate(-8deg);
  }
}