vuestic-ui
Version:
Vue 3 UI Framework
40 lines • 1.53 kB
CSS
:root,
:host {
--va-timeline-display: flex;
--va-timeline-flex-wrap: nowrap;
/* Vertical */
--va-timeline-vertical-flex-direction: column;
--va-timeline-vertical-padding-left: 0.25rem;
--va-timeline-vertical-padding-right: 0.25rem;
}
.va-timeline {
display: var(--va-timeline-display);
flex-wrap: var(--va-timeline-flex-wrap);
font-family: var(--va-font-family);
}
.va-timeline--vertical {
flex-direction: var(--va-timeline-vertical-flex-direction);
padding-left: var(--va-timeline-vertical-padding-left);
padding-right: var(--va-timeline-vertical-padding-right);
}
.va-timeline--align-top .va-timeline-item__before,
.va-timeline--align-top .va-timeline-item__after {
flex: 0;
}
.va-timeline .va-timeline-item {
flex: 1;
}
.va-timeline .va-timeline-item--vertical .va-timeline-separator--vertical .va-timeline-separator__line:first-child {
flex: 0 0 1rem;
}
.va-timeline .va-timeline-item--vertical.va-timeline-item--is-first .va-timeline-separator--vertical .va-timeline-separator__line:first-child {
flex-basis: 2rem;
}
.va-timeline .va-timeline-item--vertical.va-timeline-item--is-first .va-timeline-item__after,
.va-timeline .va-timeline-item--vertical.va-timeline-item--is-first .va-timeline-item__before {
padding-top: 2rem;
}
.va-timeline .va-timeline-item--vertical.va-timeline-item--vertical.va-timeline-item--is-last .va-timeline-item__after,
.va-timeline .va-timeline-item--vertical.va-timeline-item--vertical.va-timeline-item--is-last .va-timeline-item__before {
padding-bottom: 2rem;
}