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

DNB Eufemia Design System UI Library

/*
* Timeline component
*
*/
/*
 * Utilities
 */
.dnb-timeline {
  --timeline-icon-height--small: 1.5rem;
  --timeline-icon-width--small: 1.5rem;
  --timeline-icon-border-radius--small: var(--token-radius-full);
  --timeline-icon-height--medium: 2rem;
  --timeline-icon-width--medium: 2rem;
  --timeline-icon-border-radius--medium: var(--token-radius-full);
  --timeline-icon-width-diff: calc(
    (
        var(--timeline-icon-width--medium) - var(
            --timeline-icon-width--small
          )
      ) /
      2
  );
  --timeline-border-spacing: 1rem;
  --timeline-border-spacing--icon-adjusted: calc(
    var(--timeline-icon-width-diff) + var(--timeline-border-spacing)
  );
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}
.dnb-timeline__item {
  margin-left: var(--timeline-icon-width-diff);
}
.dnb-timeline__item__label {
  display: flex;
  align-items: center;
  padding: 0;
  text-align: left;
}
.dnb-timeline__item__label__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--timeline-icon-width--small);
  height: auto;
  padding: 0;
  line-height: var(--timeline-icon-height--small);
  border-radius: var(--timeline-icon-border-radius--small);
  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;
}
.dnb-timeline__item__label__title {
  margin-left: var(--timeline-border-spacing--icon-adjusted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  cursor: text;
}
.dnb-timeline__item__content {
  padding-bottom: 1rem;
  border-left: 1px dashed var(--token-color-text-neutral-alternative);
  margin-left: calc(var(--timeline-icon-width--small) / 2);
  padding-left: calc(var(--timeline-icon-width--small) / 2 + var(--timeline-border-spacing--icon-adjusted));
}
.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);
}
.dnb-timeline__item__content__info {
  padding-top: 0.5rem;
}
.dnb-timeline__item--completed .dnb-timeline__item__content {
  border-left: 1px solid var(--token-color-stroke-neutral);
}
.dnb-timeline__item--completed .dnb-timeline__item__label__title {
  color: var(--token-color-text-neutral);
}
.dnb-timeline__item--current .dnb-timeline__item__content {
  margin-left: calc(var(--timeline-icon-width--medium) / 2);
  padding-left: calc(var(--timeline-icon-width--medium) / 2 + var(--timeline-border-spacing));
}
.dnb-timeline__item--current .dnb-timeline__item__label__title {
  margin-left: var(--timeline-border-spacing);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-basis);
  line-height: var(--line-height-basis);
}
.dnb-timeline__item--current .dnb-timeline__item__label__icon {
  width: var(--timeline-icon-width--medium);
  line-height: var(--timeline-icon-height--medium);
  border-radius: var(--timeline-icon-border-radius--medium);
}
.dnb-timeline__item--current {
  margin-left: 0;
}
.dnb-timeline__item--upcoming .dnb-timeline__item__label__title {
  font-weight: var(--font-weight-basis);
  color: var(--token-color-text-neutral-alternative);
}
.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;
}
.dnb-timeline__item:last-child .dnb-timeline__item__content {
  border-left: none;
}
.dnb-timeline__item:only-child {
  margin-left: 0;
}