@dnb/eufemia/components/timeline/style/dnb-timeline--isolated.css

DNB Eufemia Design System UI Library

/*
* Timeline component
*
*/
/*
 * Utilities
 */
.eufemia-scope--11_3_0 .dnb-timeline {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}
.eufemia-scope--11_3_0 .dnb-timeline__item__label {
  display: flex;
  align-items: center;
  padding: 0;
  text-align: left;
}
.eufemia-scope--11_3_0 .dnb-timeline__item__label__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 0;
  color: var(--token-color-icon-neutral);
  background-color: var(--token-color-background-page-background);
  --border-color: var(--token-color-stroke-neutral);
  --border-width: 0.0625rem;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.eufemia-scope--11_3_0 .dnb-timeline__item__label__title {
  cursor: text;
}
.eufemia-scope--11_3_0 .dnb-timeline__item__content {
  padding-bottom: var(--spacing-small);
  border-left: 1px dashed var(--token-color-text-neutral-alternative);
}
.eufemia-scope--11_3_0 .dnb-timeline__item__content__subtitle {
  cursor: text;
  font-size: var(--font-size-x-small);
  font-weight: var(--font-weight-basis);
  color: var(--token-color-text-neutral-alternative);
}
.eufemia-scope--11_3_0 .dnb-timeline__item__content__info {
  padding-top: var(--spacing-x-small);
}
.eufemia-scope--11_3_0 .dnb-timeline__item--completed .dnb-timeline__item__content {
  border-left: 1px solid var(--token-color-stroke-neutral);
}
.eufemia-scope--11_3_0 .dnb-timeline__item--completed .dnb-timeline__item__label__title {
  color: var(--token-color-text-neutral);
}
.eufemia-scope--11_3_0 .dnb-timeline__item--upcoming .dnb-timeline__item__label__title {
  color: var(--token-color-text-neutral-alternative);
}
.eufemia-scope--11_3_0 .dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
  color: var(--token-color-text-neutral-alternative);
  background-color: var(--token-color-background-neutral-subtle);
  --border-color: var(--token-color-background-neutral-subtle);
  --border-width: 0.0625rem;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.eufemia-scope--11_3_0 .dnb-timeline__item:last-child .dnb-timeline__item__content {
  border-left: none;
}