@dnb/eufemia/components/timeline/style/themes/dnb-timeline-theme-ui.css

DNB Eufemia Design System UI Library

/*
* Timeline theme
*
*/
.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: var(--spacing-small);
  --timeline-border-spacing--icon-adjusted: calc(
    var(--timeline-icon-width-diff) + var(--timeline-border-spacing)
  );
}
.dnb-timeline__item {
  margin-left: var(--timeline-icon-width-diff);
}
.dnb-timeline__item__label__icon {
  width: var(--timeline-icon-width--small);
  line-height: var(--timeline-icon-height--small);
  border-radius: var(--timeline-icon-border-radius--small);
}
.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);
}
.dnb-timeline__item__content {
  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--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);
}
.dnb-timeline__item:only-child {
  margin-left: 0;
}