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

Sense UI components library

@value (
  colorFillPrimary,
  colorFillSecondary,
  colorSuccessDark,
  colorBackgroundTertiary,
  colorFillDisabled,
  colorTextSecondary,
  colorTextPrimary,
  colorTextClickable,
  colorTextDisabled,
  colorTextInversePrimary,
  colorBorderSecondary
) from '../../styles/variables/_color.css';
@value (
  size24,
  sizeFluid
) from '../../styles/variables/_size.css';
@value (
  spaceMedium,
  spaceSmall,
  spaceXXSmall
) from '../../styles/variables/_space.css';
@value (
  borderWidthPrimary,
  borderRadiusCircle
) from '../../styles/variables/_border.css';

.stepperWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: spaceXXSmall;
}

.stepperWrapper.vertical {
  flex-direction: column;
  gap: spaceMedium;
  justify-content: initial;
}

.stepWrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: spaceSmall;
  width: sizeFluid;
}

.stepWrapperCounter {
  display: flex;
  composes: motionEaseInEaseOut from '../../styles/animation.module.css';
  composes: subTitleExtraSmall from '../../styles/typography.module.css';
  height: size24;
  width: size24;
  min-height: size24;
  min-width: size24;
  justify-content: center;
  align-items: center;
  border-radius: borderRadiusCircle;
  background-color: transparent;
  border: borderWidthPrimary solid colorBorderSecondary;
  color: colorTextSecondary;
}

.stepWrapperCounter.completed {
  background-color: colorFillPrimary;
  border: borderWidthPrimary solid transparent;
  color: colorTextInversePrimary;
}

.stepWrapperCounter.selected {
  background-color: colorFillSecondary;
  border: borderWidthPrimary solid transparent;
  color: colorTextClickable;
}

.stepWrapperCounter.disabled {
  background-color: colorFillDisabled;
  border: borderWidthPrimary solid transparent;
  color: colorTextDisabled;
}

.stepIcon {
  color: inherit;
}

.stepContent {
  display: flex;
  flex-flow: column;
  gap: spaceXXSmall;
  margin-top: spaceXXSmall;
}

.stepLabelWrapper {
  composes: subTitleSmall from '../../styles/typography.module.css';
  color: colorTextSecondary;
}

.stepLabelWrapper.active {
  color: colorTextPrimary;
}

.stepLabelWrapper.disabled {
  color: colorTextDisabled;
}

.stepContentWrapper {
  composes: bodySmall from '../../styles/typography.module.css';
  color: colorTextSecondary;
}

.stepContentWrapper.disabled {
  color: colorTextDisabled;
}

.clickable {
  cursor: pointer;
}