@c8y/style/styles/components/navigation-and-layout/_c8y-stepper.less

Styles for Cumulocity IoT applications

/**
 * c8y stepper - Component styles
 *
 * Note: Uses @size-* tokens for spacing where applicable.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions: Fixed sizes for component layout
 * - Off-grid spacing: Component-specific positioning
 * - Border widths (1px, 2px, 3px): Standard borders
 * - Font-sizes: Typography
 * - Percentages: Layout
 */
.c8y-stepper {
  position: relative;
  display: flex;
  margin-top: 0;
  margin-bottom: 0;
  padding: @size-base;
  list-style: none;

  &:before {
    position: absolute;
    top: 50%;
    right: 2rem;
    left: 2rem;
    z-index: 0;
    border-top: 2px solid @component-border-color;
    content: '';
  }
  > li {
    position: relative;
    margin-right: auto;
    &:last-child {
      margin-right: 0;
    }
  }
  &:not([class*='col-']) {
    margin: 0;
  }
}

.c8y-step__label {
  position: absolute;
  left: 50%;
  display: none;
  overflow: hidden;
  margin-top: 4px;
  max-width: 120px;
  color: @text-muted;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: @font-size-small;
  transform: translateX(-50%);
  @media (min-width: @screen-sm-min) {
    display: block;
  }
}

.active + .c8y-step__label {
  color: @text-color;
  font-weight: 500;
}

.c8y-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background-color: @component-background-default;
  background-image: none;
  box-shadow: inset 0 0 0 1px @component-border-color;
  &.active {
    border-width: 3px;
    background-color: @component-color-active;
    box-shadow: none;
    color: @component-background-active;
  }
  &.step-done {
    background-color: var(--palette-status-success, var(--c8y-palette-status-success));
    box-shadow: none;
    color: @palette-high;
  }
  &.step-error {
    background-color: var(--palette-status-danger, var(--c8y-palette-status-danger));
    box-shadow: none;
    color: @palette-high;
  }
  &.step-warning {
    background-color: var(--palette-status-warning, var(--c8y-palette-status-warning));
    box-shadow: none;
    color: @palette-high;
  }
  &:focus {
    outline: none;
  }
  .c8y-stepper--no-btns & {
    pointer-events: none;
  }
}

c8y-select-step-frame,
c8y-preview-selection-frame {
  display: contents;
}