v4web-components/dist/collection/components/navigation/lab-ds-progress-indicator/lab-ds-progress-indicator.css

Stencil Component Starter

.v4-progress-indicator {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.progress-indicator {
  display: flex;
  width: 100%;

  outline: none;
  flex-direction: column;
  cursor: pointer;
  gap: var(--lab-ds-semantic-selectable-space-gap-s);
}

.last.progress-indicator {
  width: fit-content;
}

.progress-bar-container {
  display: flex;
  align-items: center;
}

.progress-bar-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: solid;
  z-index: 1;
  border-radius: var(--lab-ds-semantic-container-border-radius-pill);
  border-width: var(--lab-ds-semantic-selectable-border-width-m);
  border-color: var(--lab-ds-semantic-selectable-color-border-default);
  background-color: var(--lab-ds-semantic-selectable-color-bg-default);
  color: var(--lab-ds-semantic-color-fg-default);
}

.medium .progress-bar-icon {
  padding: var(--lab-ds-semantic-selectable-space-padding-xxs);
}

.icon {
  color: var(--lab-ds-semantic-color-fg-default);
}

.icon-check {
  display: none;
  color: var(--lab-ds-semantic-color-fg-default);
}

.dot-icon {
  opacity: 0;
  width: var(--lab-ds-semantic-selectable-size-xs);
  height: var(--lab-ds-semantic-selectable-size-xs);
  margin: var(--lab-ds-semantic-selectable-space-padding-xs);
  background-color: var(--lab-ds-semantic-selectable-color-primary-default);
  border-radius: var(--lab-ds-semantic-container-border-radius-pill);
}

.progress-bar-body {
  height: var(--lab-ds-semantic-selectable-size-xxs);
  width: 100%;
  z-index: 0;
  margin-inline: -1px;
  border-style: solid;
  background-color: var(--lab-ds-semantic-selectable-color-bg-default);
  border-width: var(--lab-ds-semantic-selectable-border-width-s);
  border-color: var(--lab-ds-semantic-selectable-color-border-default);
  border-left-width: 0;
  border-right-width: 0;
}

.progress-title-description {
  display: flex;
  flex-direction: column;
  width: fit-content;
  text-align: left;
  color: var(--lab-ds-semantic-color-fg-default);
  gap: var(--lab-ds-semantic-selectable-space-gap-s);
  white-space: nowrap;
}

.progress-title {
  font: var(--lab-ds-semantic-typography-heading-h6);
}

.progress-description {
  font: var(--lab-ds-semantic-typography-body-none-decoration-p3-bold);
}

.inactive.progress-indicator {
  cursor: not-allowed;
  opacity: var(--lab-ds-core-opacity-80);
}

.inactive .progress-title-description {
  color: var(--lab-ds-semantic-color-fg-disabled);
}

.inactive .progress-bar-icon {
  border-color: var(--lab-ds-semantic-selectable-color-border-disabled);
  background-color: var(--lab-ds-semantic-selectable-color-bg-disabled);
}

.inactive .progress-bar-body {
  border-color: var(--lab-ds-semantic-selectable-color-border-disabled);
  background-color: var(--lab-ds-semantic-selectable-color-bg-disabled);
}

.inactive .icon {
  color: var(--lab-ds-semantic-color-fg-contrast-primary);
}

.in-progress .dot-icon {
  opacity: 1;
  transition-duration: 300ms;
  transition-delay: 700ms;
  transition-property: opacity;
}

.in-progress .progress-bar-icon {
  border-color: var(--lab-ds-semantic-selectable-color-primary-default);
}

.in-progress .icon {
  color: var(--lab-ds-semantic-selectable-color-primary-default);
}

.completed .dot-icon {
  display: none;
}

.completed .progress-bar-icon {
  border-color: var(--lab-ds-semantic-selectable-color-primary-default);
  background-color: var(--lab-ds-semantic-selectable-color-primary-default);
}

.completed .icon-check {
  display: flex;
}

.completed .progress-bar-body {
  border-color: var(--lab-ds-semantic-selectable-color-primary-default);
}

.completed .progress-bar-body-completed {
  width: 100%;
  height: 100%;
  background-color: var(--lab-ds-semantic-selectable-color-primary-default);

  animation: completed-progress 700ms reverse;
}

@keyframes completed-progress {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

.medium .progress-indicator:hover:not(.inactive) .progress-title-description {
  color: var(--lab-ds-semantic-selectable-color-primary-hover);
  transition: color 100ms ease-in-out;
}

.medium .progress-indicator:hover:not(.inactive) .progress-title {
  font: var(--lab-ds-component-button-typography-underlined-large);
  text-decoration: var(--lab-ds-core-font-decoration-01);
  transition: font 300ms ease-in-out;
}

.progress-indicator:hover:not(.inactive) .progress-bar-icon {
  border-color: var(--lab-ds-semantic-selectable-color-primary-default);
}

.medium .progress-indicator:focus:not(.inactive) .progress-title-description {
  outline-style: solid;
  outline-offset: var(--lab-ds-semantic-selectable-space-padding-xxs);
  color: var(--lab-ds-semantic-selectable-color-primary-hover);
  outline-color: var(--lab-ds-semantic-selectable-color-primary-focus);
  outline-width: var(--lab-ds-semantic-selectable-border-width-s);
  border-radius: var(--lab-ds-semantic-selectable-border-radius-xxs);
  transition: all 100ms ease-in-out;
}

.medium .progress-indicator:focus:not(.inactive) .progress-title {
  font: var(--lab-ds-component-button-typography-underlined-large);
  text-decoration: var(--lab-ds-core-font-decoration-01);
}

.small .progress-bar-icon {
  border-width: var(--lab-ds-semantic-selectable-border-width-s);
}

.small .dot-icon {
  width: var(--lab-ds-semantic-selectable-size-xxs);
  height: var(--lab-ds-semantic-selectable-size-xxs);
}

.small .icon {
  padding: var(--lab-ds-semantic-selectable-space-padding-xxs);
}

.small .icon-check {
  padding: var(--lab-ds-semantic-selectable-space-padding-xxs);
}

.small .progress-bar-body {
  height: 6px;
  border-width: var(--lab-ds-semantic-selectable-border-width-s);
  border-left-width: 0;
  border-right-width: 0;
}

.small .progress-title {
  font: var(--lab-ds-semantic-typography-heading-h7);
}

.small .progress-description {
  font: var(--lab-ds-semantic-typography-body-none-decoration-p4-bold);
}