@spaced-out/ui-design-system/lib/components/ScrollingLoader/ScrollingLoader.module.css

Sense UI components library

@value (
  colorBackgroundTertiary,
  colorBackgroundSecondary,
  colorBorderTertiary,
  colorTextPrimary,
  colorFillNone
) from '../../styles/variables/_color.css';

@value (
  spaceNone,
  spaceXXSmall,
  spaceXSmall,
  spaceSmall,
  spaceMedium,
  spaceFluid,
  spaceNegHalfFluid
) from '../../styles/variables/_space.css';

@value (
  size8,
  size12,
  size16,
  size20,
  size24,
  size34,
  size42,
  size90,
  size100,
  size150,
  size200,
  size240,
  size260,
  size276,
  size284,
  size300,
  size320,
  size426,
  sizeFluid
) from '../../styles/variables/_size.css';

@value (
  borderRadiusXSmall,
  borderRadiusMedium,
  borderWidthPrimary
) from '../../styles/variables/_border.css';

@value (
  motionDurationNormal,
  motionDurationSlow,
  motionEaseInEaseOut
) from '../../styles/variables/_motion.css';

@value (
  opacity0,
  opacity100
) from '../../styles/variables/_opacity.css';

@value (
  fontWeightMedium
) from '../../styles/variables/_font.css';

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: spaceMedium;
}

.medium {
  width: size284;
}

.large {
  width: size426;
}

.fluid {
  width: sizeFluid;
}

/* Skeleton Container */
.skeletonContainer {
  position: relative;
  width: sizeFluid;
  overflow: hidden;
  border: borderWidthPrimary dashed colorBorderTertiary;
  border-radius: borderRadiusMedium;
  background-color: colorBackgroundTertiary;
}

/* Size-specific skeleton container heights */
.medium .skeletonContainer {
  height: size200;
}

.large .skeletonContainer,
.fluid .skeletonContainer {
  height: size300;
}

.skeletonScroller {
  --animation-duration: 9s;
  display: flex;
  flex-direction: column;
  gap: spaceMedium;
  animation: scrollUp var(--animation-duration) linear infinite;
}

/* Size-specific skeleton scroller padding */
.medium .skeletonScroller {
  padding: spaceSmall;
}

.large .skeletonScroller,
.fluid .skeletonScroller {
  padding: spaceMedium;
}

.skeletonRow {
  display: flex;
  align-items: center;
  gap: spaceXSmall;
  flex-shrink: 0;
}

.skeletonRowSmall {
  gap: spaceXSmall;
}

.skeletonRowLarge {
  gap: spaceSmall;
}

.skeletonBars {
  display: flex;
  flex-direction: column;
  gap: spaceXSmall;
  flex: 1;
}

.skeletonBarTitle {
  width: size90;
  height: size12;
  background-color: colorBackgroundSecondary;
  border-radius: borderRadiusXSmall;
}

.skeletonBarSubtitle {
  width: sizeFluid;
  height: size8;
  background-color: colorBackgroundSecondary;
  border-radius: borderRadiusXSmall;
}

.skeletonRowLarge .skeletonBarTitle {
  height: calc(size8 * 2);
}

.skeletonRowLarge .skeletonBarSubtitle {
  height: size12;
}

/* Gradient Overlays */
.gradientTop {
  position: absolute;
  top: calc(borderWidthPrimary * -1);
  left: calc(borderWidthPrimary * -1);
  right: calc(borderWidthPrimary * -1);
  background: linear-gradient(
    to bottom,
    colorBackgroundTertiary opacity0,
    colorFillNone opacity100
  );
  pointer-events: none;
}

.gradientBottom {
  position: absolute;
  bottom: calc(borderWidthPrimary * -1);
  left: calc(borderWidthPrimary * -1);
  right: calc(borderWidthPrimary * -1);
  background: linear-gradient(
    to top,
    colorBackgroundTertiary opacity0,
    colorFillNone opacity100
  );
  pointer-events: none;
}

/* Size-specific gradient overlay heights (50% of container height) */
.medium .gradientTop,
.medium .gradientBottom {
  height: size100;
}

.large .gradientTop,
.large .gradientBottom,
.fluid .gradientTop,
.fluid .gradientBottom {
  height: size150;
}

/* Text Container */
.textContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: sizeFluid;
  overflow: hidden;
}

/* Size-specific text container heights */
.medium .textContainer {
  height: calc(size20 + borderWidthPrimary);
}

.large .textContainer,
.fluid .textContainer {
  height: size24;
}

.textScroller {
  position: absolute;
  top: spaceNone;
  left: spaceNone;
  right: spaceNone;
  bottom: spaceNone;
  display: flex;
  justify-content: center;
  align-items: center;
}

.textItem {
  position: absolute;
  white-space: nowrap;
  color: colorTextPrimary;
  font-weight: fontWeightMedium;
  opacity: opacity0;
  transform: translateY(spaceFluid);
  /* No transition by default - allows instant reset without animation */
}

/* Size-specific text typography - applied conditionally via TSX */
.textItemMedium {
  composes: bodyMedium from '../../styles/typography.module.css';
}

.textItemLarge {
  composes: bodyLarge from '../../styles/typography.module.css';
}

/* Active state - text sliding in and visible */
.textItemActive {
  opacity: opacity100;
  transform: translateY(spaceNone);
  transition: opacity motionDurationNormal motionEaseInEaseOut,
    transform motionDurationNormal motionEaseInEaseOut;
}

/* Exiting state - text sliding out upward */
.textItemExiting {
  opacity: opacity0;
  transform: translateY(spaceNegHalfFluid);
  transition: opacity motionDurationNormal motionEaseInEaseOut,
    transform motionDurationNormal motionEaseInEaseOut;
}

/* Static state for single item - no animation */
.textItemStatic {
  opacity: opacity100;
  transform: translateY(spaceNone);
}

/* Scroll Animation */
@keyframes scrollUp {
  0% {
    transform: translateY(spaceNone);
  }
  100% {
    transform: translateY(spaceNegHalfFluid);
  }
}