@oslokommune/punkt-css/dist/css/components/stepper.css

CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo

/*
 *  Stepper component
 */
.pkt-stepper {
  --pkt-steps-indicator-width: 24px;
  --pkt-steps-indicator-height: 24px;
  --pkt-steps-indicator-color: var(--pkt-color-brand-dark-blue-1000);
  --pkt-steps-border-width: 2.5px;
  --pkt-steps-line-length: 1.5rem;
  color: var(--pkt-color-brand-dark-blue-1000);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pkt-stepper .pkt-step {
  display: grid;
}
.pkt-stepper .pkt-step__wrapper {
  grid-column: title/content;
  grid-row: title/content;
}
.pkt-stepper .pkt-step__title {
  font-weight: 500;
  width: max-content;
  width: 100%;
}
.pkt-stepper .pkt-step__content {
  font-weight: 300;
  padding-bottom: 1.5rem;
  width: 100%;
}
.pkt-stepper .pkt-step__indicator {
  z-index: 2;
  grid-area: indicator;
}
.pkt-stepper .pkt-step__line {
  background-color: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-stepper .pkt-step__line--1 {
  grid-area: indicator;
}
.pkt-stepper .pkt-step__line--2 {
  grid-area: indicator;
}
.pkt-stepper .pkt-step__line--3 {
  grid-area: line;
  height: fit-content;
}
.pkt-stepper .pkt-step__nav-wrapper {
  display: flex;
  gap: 20px;
  margin-top: 1rem;
}

.pkt-stepper--vertical {
  display: grid;
  grid-template-columns: 1fr;
}
.pkt-stepper--vertical .pkt-step {
  grid-template-areas: "indicator title" "line content";
  grid-template-columns: var(--pkt-steps-indicator-width) auto;
  grid-template-rows: var(--pkt-steps-indicator-height) minmax(min-content, max-content);
  grid-gap: 0 1rem;
  justify-items: flex-start;
}
.pkt-stepper--vertical .pkt-step--current .pkt-step__title,
.pkt-stepper--vertical .pkt-step--current .pkt-step__content {
  padding: 1rem 1.5rem;
  background-color: var(--pkt-color-surface-subtle-pale-blue);
}
.pkt-stepper--vertical .pkt-step--current .pkt-step__content {
  padding-top: 0;
}
.pkt-stepper--vertical .pkt-step--current .pkt-step__wrapper {
  margin-bottom: 1.5rem;
}
.pkt-stepper--vertical .pkt-step__indicator > svg {
  vertical-align: baseline;
}
.pkt-stepper--vertical .pkt-step__line {
  min-height: min-content;
  height: 100%;
  margin: auto;
  width: var(--pkt-steps-border-width);
}
.pkt-stepper--vertical .pkt-step__line--1 {
  height: 50%;
  transform: translateY(-55%);
}
.pkt-stepper--vertical .pkt-step__line--2 {
  height: 50%;
  transform: translateY(55%);
}
.pkt-stepper--vertical .pkt-step__line--3 {
  min-height: 4rem;
}
.pkt-stepper--vertical .pkt-step__nav-wrapper {
  flex-direction: row;
}

.pkt-stepper--horizontal {
  display: flex;
}
.pkt-stepper--horizontal .pkt-step {
  grid-template-areas: "indicator line" "title title" "content content";
  grid-template-columns: var(--pkt-steps-indicator-width) minmax(60px, max-content);
  grid-template-rows: var(--pkt-steps-indicator-width) min-content min-content;
  justify-items: flex-start;
}
.pkt-stepper--horizontal .pkt-step__wrapper {
  min-width: fit-content;
}
.pkt-stepper--horizontal .pkt-step__title {
  padding: 1.5rem 1rem 1.5rem 0;
}
.pkt-stepper--horizontal .pkt-step__content {
  padding: 0 1rem 1rem 0;
}
.pkt-stepper--horizontal .pkt-step__indicator > svg {
  vertical-align: baseline;
}
.pkt-stepper--horizontal .pkt-step__line {
  min-width: min-content;
  width: 100%;
  margin: auto;
  height: var(--pkt-steps-border-width);
}
.pkt-stepper--horizontal .pkt-step__line--1 {
  width: 50%;
  transform: translateX(-55%);
}
.pkt-stepper--horizontal .pkt-step__line--2 {
  width: 50%;
  transform: translateX(55%);
}
.pkt-stepper--horizontal .pkt-step__line--3 {
  min-width: 5rem;
}
.pkt-stepper--horizontal .pkt-step__nav-wrapper {
  flex-direction: column;
}

.pkt-step:first-of-type .pkt-step__line--1 {
  display: none;
}

.pkt-step--incomplete .pkt-step__line {
  background-color: var(--pkt-color-grays-gray-200);
}
.pkt-step--incomplete .pkt-step__title,
.pkt-step--incomplete .pkt-step__content {
  color: var(--pkt-color-grays-gray-600);
}

.pkt-step--current + .pkt-step--incomplete .pkt-step__line--1 {
  background-color: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-step--current + .pkt-step--incomplete .pkt-step__line--2 {
  background-color: var(--pkt-color-grays-gray-200);
}

.pkt-step:last-of-type .pkt-step__line--3,
.pkt-step:last-of-type .pkt-step__line--2 {
  display: none;
}

.pkt-step--current .pkt-step__line--1 {
  background-color: var(--pkt-color-brand-dark-blue-1000);
}
.pkt-step--current .pkt-step__line--2,
.pkt-step--current .pkt-step__line--3 {
  background-color: var(--pkt-color-grays-gray-200);
}

.pkt-step--current + .pkt-step--incomplete .pkt-step__line--1 {
  background-color: var(--pkt-color-grays-gray-200);
}

.pkt-step--hideContent:not(.pkt-step--current) .pkt-step__content {
  display: none;
}

.pkt-step--hideStep:not(.pkt-step--current) .pkt-step__title,
.pkt-step--hideStep:not(.pkt-step--current) .pkt-step__content {
  display: none;
}

.pkt-stepper--vertical .pkt-step--hideStep:not(.pkt-step--current) .pkt-step__line--3 {
  min-height: 2rem;
}

.pkt-stepper--horizontal .pkt-step--hideStep:not(.pkt-step--current) {
  grid-template-columns: var(--pkt-steps-indicator-width) minmax(2rem, max-content);
}
.pkt-stepper--horizontal .pkt-step--hideStep:not(.pkt-step--current) .pkt-step__line--3 {
  min-width: 2rem;
}