@postnord/web-components/collection/components/feedback/pn-progress-stepper/pn-progress-stepper.css

PostNord Web Components

/* Global utility variables */
/* Input styles */
/* Transition variables */
pn-progress-stepper {
  display: block;
}

pn-progress-stepper .pn-progress {
  position: relative;
  width: 100%;
  background: #f3f2f2;
  height: 0.5em;
  border-radius: 0.5em;
  box-shadow: 0 0 0 0.0625em #969087;
}
pn-progress-stepper .pn-progress-label {
  display: block;
  color: #2d2013;
  font-size: 1em;
  margin-bottom: 0.5em;
}
pn-progress-stepper .pn-progress-value {
  position: absolute;
  top: -0.0625em;
  left: -0.0625em;
  height: 0.625em;
  background-color: #005d92;
  width: calc(var(--pn-progress-value) + 0.125em);
  border-radius: 0.5em 0 0 0.5em;
  transition-property: width, border-radius;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  pn-progress-stepper .pn-progress-value {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}
pn-progress-stepper .pn-progress-value[data-full] {
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}
pn-progress-stepper .pn-progress-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}
pn-progress-stepper .pn-progress-dot {
  width: 0.875em;
  height: 0.875em;
  background-color: #f3f2f2;
  border: 0.0625em solid #d3cecb;
  border-radius: 50%;
  transform: scale(1) translateY(0%);
  transition-property: background-color, border-color;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  pn-progress-stepper .pn-progress-dot {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}
pn-progress-stepper .pn-progress-dot {
  animation: pnBackwards 0.2s cubic-bezier(0.7, 0, 0.3, 1);
  animation-fill-mode: forwards;
}
pn-progress-stepper .pn-progress-dot[data-active] {
  background-color: #005d92;
  border-color: #005d92;
  animation: pnForward 0.2s cubic-bezier(0.7, 0, 0.3, 1);
  animation-fill-mode: forwards;
}
pn-progress-stepper .pn-progress-sr-only {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap;
}

@keyframes pnForward {
  0% {
    transform: scale(1) translateY(0%);
  }
  50% {
    transform: scale(1) translateY(20%);
  }
  75% {
    transform: scale(1.1) translateY(10%);
  }
  100% {
    transform: scale(1) translateY(0%);
  }
}
@keyframes pnBackwards {
  0% {
    transform: scale(1) translateY(0%);
  }
  50% {
    transform: scale(1) translateY(-20%);
  }
  75% {
    transform: scale(0.9) translateY(-10%);
  }
  100% {
    transform: scale(1) translateY(0%);
  }
}