@studiocms/ui/dist/components/Skeleton/skeleton.css

The UI library for StudioCMS. Includes the layouts & components we use to build StudioCMS.

@keyframes sui-skeleton-slide {
  0% {
    background-position: 175% 0;
  }
  100% {
    background-position: -75% 0;
  }
}
@keyframes sui-skeleton-pulse {
  0% {
    background-color: var(--background-step-2);
  }
  50% {
    background-color: var(--background-step-3);
  }
  100% {
    background-color: var(--background-step-2);
  }
}
.sui-skeleton {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--background-step-2);
}
.sui-skeleton-card {
  display: flex;
  flex-direction: column;
  background-color: var(--background-step-1);
  padding: 1rem;
  gap: 0.5rem;
  height: 100%;
  overflow: hidden;
}
.sui-skeleton-card.sui-skeleton-row {
  flex-direction: row;
}
.sui-skeleton-justify-start,
.sui-skeleton-align-start {
  justify-content: flex-start;
}
.sui-skeleton-justify-center,
.sui-skeleton-align-center {
  justify-content: center;
}
.sui-skeleton-justify-end,
.sui-skeleton-align-end {
  justify-content: flex-end;
}
.sui-skeleton-items-start,
.sui-skeleton-justify-start {
  align-items: flex-start;
}
.sui-skeleton-items-center,
.sui-skeleton-justify-center {
  align-items: center;
}
.sui-skeleton-items-end,
.sui-skeleton-justify-end {
  align-items: flex-end;
}
.sui-skeleton-text {
  display: inline-block;
  background-color: var(--background-step-2);
  height: 1rem;
}
.sui-skeleton-block {
  display: block;
  background-color: var(--background-step-2);
  height: 1rem;
}
.sui-skeleton-circle {
  display: inline-block;
  background-color: var(--background-step-2);
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
}
.sui-skeleton-radii-sm {
  border-radius: var(--radius-sm);
}
.sui-skeleton-radii-md {
  border-radius: var(--radius-md);
}
.sui-skeleton-radii-lg {
  border-radius: var(--radius-lg);
}
.sui-skeleton-anim-none {
  animation: none;
}
.sui-skeleton-anim-slide {
  @media (prefers-reduced-motion: no-preference) {
    background-image:
      linear-gradient(
        90deg,
        var(--background-step-2) 25%,
        var(--background-step-3) 50%,
        var(--background-step-2) 75%);
    background-position: 175% 0;
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: sui-skeleton-slide 2s ease-in-out infinite;
  }
}
.sui-skeleton-anim-pulse {
  @media (prefers-reduced-motion: no-preference) {
    animation: sui-skeleton-pulse 2s linear infinite;
  }
}