@utrecht/web-component-library-stencil/dist/collection/components/progress-list.css

Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.denhaag-process-steps__step {
  position: relative;
  padding-block-end: var(--denhaag-process-steps-step-padding-block-end);
  padding-block-start: var(--denhaag-process-steps-step-padding-block-start);
}

.denhaag-process-steps__step + .denhaag-process-steps__step {
  margin-block-start: var(--denhaag-process-steps-step-distance);
}

.denhaag-process-steps {
  --denhaag-process-steps-step-distance: 40px;
  --denhaag-process-steps-sub-step-distance: 24px;
  font-family: var(--denhaag-process-steps-font-family);
  font-size: var(--denhaag-process-steps-font-size);
  line-height: var(--denhaag-process-steps-line-height);
  list-style: none;
  margin-block-start: 0; /* reset <ol> */
  margin-block-end: 0; /* reset <ol> */
  padding-inline-start: 0; /* reset <ol> */
  position: relative;
}

.denhaag-process-steps__step-header {
  display: flex;
  align-items: var(--denhaag-process-steps-step-header-align-items);
  gap: 16px;
}

.denhaag-process-steps__step-header-toggle {
  --utrecht-button-subtle-font-size: inherit;
  --utrecht-button-subtle-background-color: transparent;
  --utrecht-button-subtle-color: auto;
  --utrecht-button-padding-block-end: 0;
  --utrecht-button-padding-block-start: 0;
  --utrecht-button-padding-inline-end: 0;
  --utrecht-button-padding-inline-start: 0;
  --utrecht-button-icon-gap: 4px;
  border: 0;
  background-color: inherit;
  appearance: none;
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline-end: 0;
  padding-inline-start: 0;
  margin-block-end: 0;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
  display: flex;
  align-items: center;
  gap: 0;
}

.denhaag-process-steps__step-heading {
  display: flex;
  align-items: center;
  color: var(--denhaag-process-steps-step-heading-color);
  font-family: var(--denhaag-process-steps-step-heading-font-family);
  font-size: var(--denhaag-process-steps-step-heading-font-size);
  font-weight: var(--denhaag-process-steps-step-heading-font-weight);
  line-height: var(--denhaag-process-steps-step-heading-line-height);
  text-align: start;
  overflow-wrap: var(--denhaag-process-steps-step-heading-overflow-wrap, anywhere);
  margin-block-start: 0;
  margin-block-end: 0;
}

.denhaag-process-steps__step-heading--not-checked {
  color: var(--denhaag-process-steps-step-heading-not-checked-color);
}

.denhaag-process-steps__step-heading--checked {
  color: var(--denhaag-process-steps-step-heading-checked-color);
  font-size: var(--denhaag-process-steps-step-heading-checked-font-size, var(--denhaag-process-steps-step-heading-font-size));
  font-weight: var(--denhaag-process-steps-step-heading-checked-font-weight, var(--denhaag-process-steps-step-heading-font-weight));
}

.denhaag-process-steps__step-heading--current {
  color: var(--denhaag-process-steps-step-heading-current-color);
  font-size: var(--denhaag-process-steps-step-heading-current-font-size, var(--denhaag-process-steps-step-heading-font-size));
  font-weight: var(--denhaag-process-steps-step-heading-current-font-weight, var(--denhaag-process-steps-step-heading-font-weight));
}

.denhaag-process-steps__step-heading--warning {
  color: var(--denhaag-process-steps-step-heading-warning-color);
}

.denhaag-process-steps__step-heading--error {
  color: var(--denhaag-process-steps-step-heading-error-color);
}

.denhaag-process-steps__step-details {
  display: block;
}

.denhaag-process-steps__step-details--hidden {
  display: none;
}

.denhaag-process-steps__step-body {
  position: relative;
}

.denhaag-process-steps__step-meta {
  position: relative;
  margin-inline-start: calc(var(--denhaag-step-marker-size) + 16px);
  font-size: var(--denhaag-process-steps-step-meta-font-size);
  color: var(--denhaag-process-steps-step-meta-color);
}

.denhaag-process-steps__step-meta--date {
  font-size: var(--denhaag-process-steps-step-meta-date-font-size, var(--denhaag-process-steps-step-meta-font-size));
  color: var(--denhaag-process-steps-step-meta-date-color, var(--denhaag-process-steps-step-meta-color));
}

.denhaag-process-steps__sub-step {
  position: relative;
  align-items: baseline;
  display: flex;
  flex-direction: row;
  gap: 23px;
  margin-block-start: var(--denhaag-process-steps-sub-step-distance);
}

.denhaag-process-steps__sub-step-heading {
  margin-block-end: 0; /* reset <p> */
  margin-block-start: 0; /* reset <p> */
}
.denhaag-step-marker {
  position: relative;
  z-index: 1;
  align-items: center;
  background-color: var(--denhaag-step-marker-background-color);
  block-size: var(--denhaag-step-marker-size);
  border-style: solid;
  border-width: var(--denhaag-step-marker-border-width);
  border-color: var(--denhaag-step-marker-border-color, transparent);
  border-radius: var(--denhaag-step-marker-border-radius, 50%);
  box-sizing: border-box;
  color: var(--denhaag-step-marker-color);
  display: flex;
  flex-grow: 0;
  font-family: var(--denhaag-step-marker-font-family);
  font-size: var(--denhaag-step-marker-font-size);
  font-weight: var(--denhaag-step-marker-font-weight);
  inline-size: var(--denhaag-step-marker-size);
  justify-content: center;
  margin-block-end: var(--denhaag-step-marker-margin);
  margin-block-start: var(--denhaag-step-marker-margin);
  padding-inline-end: 0;
  min-inline-size: var(--denhaag-step-marker-min-size, var(--denhaag-step-marker-size));
  min-block-size: var(--denhaag-step-marker-min-size, var(--denhaag-step-marker-size));
}
.denhaag-step-marker .denhaag-icon {
  block-size: var(--denhaag-step-marker-icon-size);
  inline-size: var(--denhaag-step-marker-icon-size);
}

.denhaag-step-marker--nested {
  block-size: var(--denhaag-step-marker-nested-size);
  min-block-size: var(--denhaag-step-marker-nested-min-size, var(--denhaag-step-marker-nested-size));
  min-inline-size: var(--denhaag-step-marker-nested-min-size, var(--denhaag-step-marker-nested-size));
  inline-size: var(--denhaag-step-marker-nested-size);
  border-width: var(--denhaag-step-marker-nested-border-width, var(--denhaag-step-marker-border-width));
  margin-inline-start: calc((var(--denhaag-step-marker-size) - var(--denhaag-step-marker-nested-size)) / 2);
}
.denhaag-step-marker--nested .denhaag-icon {
  block-size: var(--denhaag-step-marker-nested-icon-size);
  inline-size: var(--denhaag-step-marker-nested-icon-size);
}

.denhaag-step-marker--not-checked {
  background-color: var(--denhaag-step-marker-not-checked-background-color);
  border-color: var(--denhaag-step-marker-not-checked-border-color);
  color: var(--denhaag-step-marker-not-checked-color);
}
.denhaag-step-marker--not-checked.denhaag-step-marker--nested {
  background-color: var(--denhaag-step-marker-not-checked-nested-background-color, var(--denhaag-step-marker-not-checked-background-color));
  border-color: var(--denhaag-step-marker-not-checked-nested-border-color, var(--denhaag-step-marker-not-checked-border-color));
  color: var(--denhaag-step-marker-not-checked-nested-color, var(--denhaag-step-marker-not-checked-color));
}

.denhaag-step-marker--checked {
  background-color: var(--denhaag-step-marker-checked-background-color);
  border-color: var(--denhaag-step-marker-checked-border-color);
  color: var(--denhaag-step-marker-checked-color);
}
.denhaag-step-marker--checked.denhaag-step-marker--nested {
  background-color: var(--denhaag-step-marker-checked-nested-background-color, var(--denhaag-step-marker-checked-background-color));
  border-color: var(--denhaag-step-marker-checked-nested-border-color, var(--denhaag-step-marker-checked-border-color));
  color: var(--denhaag-step-marker-checked-nested-color, var(--denhaag-step-marker-checked-color));
}

.denhaag-step-marker--current {
  background-color: var(--denhaag-step-marker-current-background-color);
  border-color: var(--denhaag-step-marker-current-border-color);
  color: var(--denhaag-step-marker-current-color);
}
.denhaag-step-marker--current.denhaag-step-marker--nested {
  background-color: var(--denhaag-step-marker-current-nested-background-color, var(--denhaag-step-marker-current-background-color));
  border-color: var(--denhaag-step-marker-current-nested-border-color, var(--denhaag-step-marker-current-border-color));
  color: var(--denhaag-step-marker-current-nested-color, var(--denhaag-step-marker-current-color));
}

.denhaag-step-marker--disabled {
  background-color: var(--denhaag-step-marker-disabled-background-color);
  border-color: var(--denhaag-step-marker-disabled-border-color);
  color: var(--denhaag-step-marker-disabled-color);
}
.denhaag-step-marker--disabled.denhaag-step-marker--nested {
  background-color: var(--denhaag-step-marker-disabled-nested-background-color, var(--denhaag-step-marker-disabled-background-color));
  border-color: var(--denhaag-step-marker-disabled-nested-border-color, var(--denhaag-step-marker-disabled-border-color));
  color: var(--denhaag-step-marker-disabled-nested-color, var(--denhaag-step-marker-disabled-color));
}

.denhaag-step-marker--warning {
  background-color: var(--denhaag-step-marker-warning-background-color);
  border-color: var(--denhaag-step-marker-warning-border-color);
  color: var(--denhaag-step-marker-warning-color);
}
.denhaag-step-marker--warning.denhaag-step-marker--nested {
  background-color: var(--denhaag-step-marker-warning-nested-background-color, var(--denhaag-step-marker-warning-background-color));
  border-color: var(--denhaag-step-marker-warning-nested-border-color, var(--denhaag-step-marker-warning-border-color));
  color: var(--denhaag-step-marker-warning-nested-color, var(--denhaag-step-marker-warning-color));
}

.denhaag-step-marker--error {
  background-color: var(--denhaag-step-marker-error-background-color);
  border-color: var(--denhaag-step-marker-error-border-color);
  color: var(--denhaag-step-marker-error-color);
}
.denhaag-step-marker--error.denhaag-step-marker--nested {
  background-color: var(--denhaag-step-marker-error-nested-background-color, var(--denhaag-step-marker-error-background-color));
  border-color: var(--denhaag-step-marker-error-nested-border-color, var(--denhaag-step-marker-error-border-color));
  color: var(--denhaag-step-marker-error-nested-color, var(--denhaag-step-marker-error-color));
}

.denhaag-step-marker--default {
  background-color: var(--denhaag-step-marker-default-background-color);
  border-color: var(--denhaag-step-marker-default-border-color);
  color: var(--denhaag-step-marker-default-color);
}
.denhaag-step-marker--default.denhaag-step-marker--nested {
  background-color: var(--denhaag-step-marker-default-nested-background-color, var(--denhaag-step-marker-default-background-color));
  border-color: var(--denhaag-step-marker-default-nested-border-color, var(--denhaag-step-marker-default-border-color));
  color: var(--denhaag-step-marker-default-nested-color, var(--denhaag-step-marker-default-color));
}

.denhaag-step-marker__connector {
  position: absolute;
  left: calc(var(--denhaag-step-marker-size) / 2);
  top: 0;
  height: 100%;
  outline: var(--denhaag-step-marker-connector-width, 1px) var(--denhaag-step-marker-connector-style, dashed) var(--denhaag-step-marker-connector-color);
}

.denhaag-step-marker__connector--main-to-main {
  top: calc(-1 * var(--denhaag-step-marker-size) / 2);
  padding-block-end: calc(var(--denhaag-process-steps-step-distance) + var(--denhaag-step-marker-size));
}

.denhaag-step-marker__connector--main-to-nested {
  top: calc(-1 * var(--denhaag-step-marker-size) / 2);
  padding-block-end: calc(var(--denhaag-process-steps-step-distance) + var(--denhaag-step-marker-nested-size));
}

.denhaag-step-marker__connector--nested-to-nested {
  top: var(--denhaag-step-marker-nested-size);
  padding-block-end: var(--denhaag-process-steps-sub-step-distance);
}

.denhaag-step-marker__connector--nested-to-main {
  top: var(--denhaag-step-marker-nested-size);
  padding-block-end: var(--denhaag-process-steps-step-distance);
}

.denhaag-step-marker__connector--not-checked {
  outline-width: var(--denhaag-step-marker-connector-not-checked-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));
  outline-style: var(--denhaag-step-marker-connector-not-checked-outline-style, dashed);
  outline-color: var(--denhaag-step-marker-connector-not-checked-outline-color, var(--denhaag-step-marker-connector-outline-color));
}

.denhaag-step-marker__connector--checked,
.denhaag-step-marker__connector--current {
  outline-width: var(--denhaag-step-marker-connector-checked-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));
  outline-style: var(--denhaag-step-marker-connector-checked-outline-style, solid);
  outline-color: var(--denhaag-step-marker-connector-checked-outline-color, var(--denhaag-step-marker-connector-outline-color));
}

.denhaag-step-marker__connector--warning {
  outline-width: var(--denhaag-step-marker-connector-warning-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));
  outline-style: var(--denhaag-step-marker-connector-warning-outline-style, solid);
  outline-color: var(--denhaag-step-marker-connector-warning-outline-color, var(--denhaag-step-marker-connector-outline-color));
}

.denhaag-step-marker__connector--error {
  outline-width: var(--denhaag-step-marker-connector-error-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));
  outline-style: var(--denhaag-step-marker-connector-error-outline-style, solid);
  outline-color: var(--denhaag-step-marker-connector-error-outline-color, var(--denhaag-step-marker-connector-outline-color));
}

.denhaag-step-marker__connector--default {
  outline-width: var(--denhaag-step-marker-connector-default-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));
  outline-style: var(--denhaag-step-marker-connector-default-outline-style, solid);
  outline-color: var(--denhaag-step-marker-connector-default-outline-color, var(--denhaag-step-marker-connector-outline-color));
}
:host {
  display: contents;
}

:host([hidden]) {
  display: none !important;
}