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

Sense UI components library

@value (
  size26
) from '../../styles/variables/_size.css';
@value (
  spaceXXSmall,
  spaceMedium,
  spaceXSmall,
  spaceSmall,
  spaceFluid,
  spaceNone
) from '../../styles/variables/_space.css';
@value (
  colorBorderPrimary,
  colorInformationLightest
) from '../../styles/variables/_color.css';
@value (
  borderWidthPrimary,
  borderRadiusCircle
) from '../../styles/variables/_border.css';

.timelineWrapper {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  gap: spaceSmall;
}

.timelineItemWrapper {
  display: flex;
  gap: spaceSmall;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  align-items: var(--align);

  /* According to the design specification, the last timeline item's content will not have any space at the bottom. */
  &:last-child .timelineItemContent .timelineItemEventDetails {
    margin-bottom: spaceNone;
  }
}

.timelineItemIconWrapper {
  display: flex;
  gap: spaceXXSmall;
  flex-direction: column;
}

.timelineItemIcon {
  width: size26;
  height: size26;
  border-radius: borderRadiusCircle;
  background-color: colorInformationLightest;
}

.timelineItemContent {
  display: flex;
  gap: spaceSmall;
  width: spaceFluid;
  flex-direction: var(--direction);
}

.timelineItemBorder {
  display: flex;
  width: size26;
  flex: 1;
  box-sizing: border-box;
  justify-content: center;

  & .border {
    height: spaceFluid;
    border-left: borderWidthPrimary dashed colorBorderPrimary;
  }
}

.timelineItemEventDetails {
  display: flex;
  gap: spaceXSmall;
  width: spaceFluid;
  flex-direction: column;
  margin-bottom: spaceMedium;

  & .timelineItemInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: var(--align);
    min-height: size26;
  }
}

.timelineItemTitle {
  composes: bodyMedium from '../../styles/typography.module.css';
}

.timelineItemDescription {
  composes: bodySmall from '../../styles/typography.module.css';
  composes: secondary from '../../styles/typography.module.css';
}

.timelineItemCardWrapper {
  width: spaceFluid;
}

.timelineItemLoader {
  display: flex;
  width: spaceFluid;
  justify-content: center;
}