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

DNB Eufemia Design System UI Library

/*
* Timeline theme
*
*/
/*
 * Utilities
 */
/*
 * Utilities
 */
/*
* Button mixins
*
*/
.dnb-timeline {
  --timeline-icon-height--small: 1.5rem;
  --timeline-icon-width--small: 1.5rem;
  --timeline-icon-border-radius--small: calc(
    var(--timeline-icon-height--small) / 2
  );
  --timeline-icon-height--medium: 2rem;
  --timeline-icon-width--medium: 2rem;
  --timeline-icon-border-radius--medium: calc(
    var(--timeline-icon-height--medium) / 2
  );
  --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);
  color: var(--color-black-80);
  background-color: var(--color-white);
  --border-color: var(--color-black-80);
  --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);
}
.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));
  border-left: 1px dashed var(--color-black-55);
}
.dnb-timeline__item--completed .dnb-timeline__item__content {
  border-left: 1px solid var(--color-black-80);
}
.dnb-timeline__item--completed .dnb-timeline__item__label__title {
  color: var(--color-black-80);
}
.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(--color-black-55);
}
.dnb-timeline__item--upcoming:not(.dnb-skeleton) .dnb-timeline__item__label__icon {
  color: var(--color-black-55);
  background-color: var(--color-black-3);
  --border-color: var(--color-black-3);
  --border-width: 0.0625rem;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.dnb-timeline__item:only-child {
  margin-left: 0;
}
.dnb-timeline__item:last-child .dnb-timeline__item__content {
  border-left: none;
}