vuestic-ui/dist/esm-node/VaTimelineItem.css

Vue 3 UI Framework

:root,
:host {
  --va-timeline-item-display: flex;
  --va-timeline-item-flex-direction: column;
  --va-timeline-item-vertical-flex-direction: row;
  --va-timeline-item-vertical-flex-wrap: nowrap;
  --va-timeline-item-vertical-align-items: stretch;
  /* Title */
  --va-timeline-item-title-text-align: center;
  --va-timeline-item-title-color: var(--va-primary);
  --va-timeline-item-title-font-weight: 700;
  --va-timeline-item-title-font-size: 0.8rem;
  --va-timeline-item-title-text-transform: uppercase;
  /* Description */
  --va-timeline-item-description-margin-top: 0.25rem;
  --va-timeline-item-description-text-align: center;
}
.va-timeline-item {
  display: var(--va-timeline-item-display);
  flex-direction: var(--va-timeline-item-flex-direction);
}
.va-timeline-item__before, .va-timeline-item__after {
  flex: 1;
}
.va-timeline-item--vertical {
  flex-direction: var(--va-timeline-item-vertical-flex-direction);
  flex-wrap: var(--va-timeline-item-vertical-flex-wrap);
  align-items: var(--va-timeline-item-vertical-align-items);
}
.va-timeline-item--vertical .va-timeline-item__before,
.va-timeline-item--vertical .va-timeline-item__after {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.va-timeline-item--vertical .va-timeline-item__before {
  padding-right: 1rem;
}
.va-timeline-item--vertical .va-timeline-item__after {
  padding-left: 1rem;
}
.va-timeline-item:not(.va-timeline-item--vertical) .va-timeline-item__before,
.va-timeline-item:not(.va-timeline-item--vertical) .va-timeline-item__after {
  padding-right: 1rem;
  padding-left: 1rem;
}
.va-timeline-item:not(.va-timeline-item--vertical) .va-timeline-item__before {
  padding-bottom: 0.5rem;
}
.va-timeline-item:not(.va-timeline-item--vertical) .va-timeline-item__after {
  padding-top: 0.5rem;
}