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

React UI components for Raft.

/* ─────────────────────────────────────────────────────────────────────────
   IslandIndicator — an island for a step marker on a river track (`Steps`
   `renderIndicator`), posed by the step's status. The picture is fixed art;
   it takes no theme colors.
   ───────────────────────────────────────────────────────────────────────── */

.r-island-indicator {
  overflow: visible;
}
.r-island-indicator * {
  transform-box: view-box;
}
.r-island-indicator--wait {
  filter: saturate(0.45);
}
.r-island-indicator__flag {
  transform-origin: 30.7px 11px;
}
.r-island-indicator__ring {
  opacity: 0.8;
  transform-origin: 24px 29px;
}
@media (prefers-reduced-motion: no-preference) {
  .r-island-indicator__flag {
    animation: r-island-indicator-wave 1.6s ease-in-out infinite alternate;
  }
  .r-island-indicator__ring {
    animation: r-island-indicator-ring 1.8s ease-out infinite;
  }
}
@keyframes r-island-indicator-wave {
  from {
    transform: skewY(-4deg) scaleX(0.94);
  }
  to {
    transform: skewY(3deg) scaleX(1);
  }
}
@keyframes r-island-indicator-ring {
  from {
    opacity: 0.9;
    transform: scale(0.9);
  }
  to {
    opacity: 0;
    transform: scale(1.12);
  }
}