.v-timeline .v-timeline-divider__dot { background: rgb(var(--v-theme-surface-light)); } .v-timeline .v-timeline-divider__inner-dot { background: rgb(var(--v-theme-on-surface)); } .v-timeline { display: grid; grid-auto-flow: dense; position: relative; } .v-timeline--horizontal.v-timeline { grid-column-gap: 24px; width: 100%; } .v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__body { grid-row: 3; padding-block-start: 24px; } .v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__opposite { grid-row: 1; padding-block-end: 24px; align-self: flex-end; } .v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__body { grid-row: 1; padding-block-end: 24px; align-self: flex-end; } .v-timeline--horizontal.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__opposite { grid-row: 3; padding-block-start: 24px; } .v-timeline--vertical.v-timeline { row-gap: 24px; height: 100%; } .v-timeline--vertical.v-timeline .v-timeline-item:first-child .v-timeline-divider, .v-timeline--vertical.v-timeline .v-timeline-item:first-child .v-timeline-item__body, .v-timeline--vertical.v-timeline .v-timeline-item:first-child .v-timeline-item__opposite { padding-block-start: 24px; } .v-timeline--vertical.v-timeline .v-timeline-item:last-child .v-timeline-divider, .v-timeline--vertical.v-timeline .v-timeline-item:last-child .v-timeline-item__body, .v-timeline--vertical.v-timeline .v-timeline-item:last-child .v-timeline-item__opposite { padding-block-end: 24px; } .v-timeline--vertical.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__body { grid-column: 1; padding-inline-end: 24px; } .v-timeline--vertical.v-timeline .v-timeline-item:nth-child(2n) .v-timeline-item__opposite { grid-column: 3; padding-inline-start: 24px; } .v-timeline--vertical.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__body { grid-column: 3; padding-inline-start: 24px; } .v-timeline--vertical.v-timeline .v-timeline-item:nth-child(2n+1) .v-timeline-item__opposite { grid-column: 1; justify-self: flex-end; padding-inline-end: 24px; } .v-timeline-item { display: contents; } .v-timeline-divider { position: relative; display: flex; align-items: center; } .v-timeline--horizontal .v-timeline-divider { flex-direction: row; grid-row: 2; width: 100%; } .v-timeline--vertical .v-timeline-divider { height: 100%; flex-direction: column; grid-column: 2; } .v-timeline-divider__before { background: rgba(var(--v-border-color), var(--v-border-opacity)); position: absolute; } .v-timeline--horizontal .v-timeline-divider__before { height: var(--v-timeline-line-thickness); width: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset)); inset-inline-start: -12px; inset-inline-end: initial; } .v-timeline--vertical .v-timeline-divider__before { height: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset)); width: var(--v-timeline-line-thickness); top: -12px; } .v-timeline-divider__after { background: rgba(var(--v-border-color), var(--v-border-opacity)); position: absolute; } .v-timeline--horizontal .v-timeline-divider__after { height: var(--v-timeline-line-thickness); width: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset)); inset-inline-end: -12px; inset-inline-start: initial; } .v-timeline--vertical .v-timeline-divider__after { height: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset)); width: var(--v-timeline-line-thickness); bottom: -12px; } .v-timeline--vertical .v-timeline-item:first-child .v-timeline-divider__before { height: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset)); top: 0; } .v-timeline--horizontal .v-timeline-item:first-child .v-timeline-divider__before { width: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset)); inset-inline-start: 0; inset-inline-end: initial; } .v-timeline--vertical .v-timeline-item:first-child .v-timeline-divider__after { height: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset)); } .v-timeline--horizontal .v-timeline-item:first-child .v-timeline-divider__after { width: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset)); inset-inline-end: -12px; inset-inline-start: initial; } .v-timeline--vertical .v-timeline-item:last-child .v-timeline-divider__before { height: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset)); } .v-timeline--horizontal .v-timeline-item:last-child .v-timeline-divider__before { width: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset)); } .v-timeline--vertical .v-timeline-item:last-child .v-timeline-divider__after { height: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset)); bottom: 0; } .v-timeline--horizontal .v-timeline-item:last-child .v-timeline-divider__after { width: calc(var(--v-timeline-line-size-base) + 12px - var(--v-timeline-line-inset)); inset-inline-end: 0; inset-inline-start: initial; } .v-timeline--vertical .v-timeline-item:only-child .v-timeline-divider__after { height: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset)); } .v-timeline-divider__dot { z-index: 1; flex-shrink: 0; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)); } .v-timeline-divider__dot--size-x-small { height: 22px; width: 22px; } .v-timeline-divider__dot--size-x-small .v-timeline-divider__inner-dot { height: calc(100% - 6px); width: calc(100% - 6px); } .v-timeline-divider__dot--size-small { height: 30px; width: 30px; } .v-timeline-divider__dot--size-small .v-timeline-divider__inner-dot { height: calc(100% - 8px); width: calc(100% - 8px); } .v-timeline-divider__dot--size-default { height: 38px; width: 38px; } .v-timeline-divider__dot--size-default .v-timeline-divider__inner-dot { height: calc(100% - 8px); width: calc(100% - 8px); } .v-timeline-divider__dot--size-large { height: 46px; width: 46px; } .v-timeline-divider__dot--size-large .v-timeline-divider__inner-dot { height: calc(100% - 8px); width: calc(100% - 8px); } .v-timeline-divider__dot--size-x-large { height: 54px; width: 54px; } .v-timeline-divider__dot--size-x-large .v-timeline-divider__inner-dot { height: calc(100% - 10px); width: calc(100% - 10px); } .v-timeline-divider__inner-dot { align-items: center; border-radius: 50%; display: flex; justify-content: center; } /** Modifiers **/ .v-timeline--horizontal.v-timeline--justify-center { grid-template-rows: minmax(auto, 50%) min-content minmax(auto, 50%); } .v-timeline--vertical.v-timeline--justify-center { grid-template-columns: minmax(auto, 50%) min-content minmax(auto, 50%); } .v-timeline--horizontal.v-timeline--justify-auto { grid-template-rows: auto min-content auto; } .v-timeline--vertical.v-timeline--justify-auto { grid-template-columns: auto min-content auto; } .v-timeline--horizontal.v-timeline--density-comfortable { height: 100%; } .v-timeline--horizontal.v-timeline--density-comfortable.v-timeline--side-end { grid-template-rows: min-content min-content auto; } .v-timeline--horizontal.v-timeline--density-comfortable.v-timeline--side-start { grid-template-rows: auto min-content min-content; } .v-timeline--vertical.v-timeline--density-comfortable { width: 100%; } .v-timeline--vertical.v-timeline--density-comfortable.v-timeline--side-end { grid-template-columns: min-content min-content auto; } .v-timeline--vertical.v-timeline--density-comfortable.v-timeline--side-start { grid-template-columns: auto min-content min-content; } .v-timeline--horizontal.v-timeline--density-compact.v-timeline--side-end { grid-template-rows: 0 min-content auto; } .v-timeline--horizontal.v-timeline--density-compact.v-timeline--side-start { grid-template-rows: auto min-content 0; } .v-timeline--horizontal.v-timeline--density-compact .v-timeline-item__body { grid-row: 1; } .v-timeline--vertical.v-timeline--density-compact.v-timeline--side-end { grid-template-columns: 0 min-content auto; } .v-timeline--vertical.v-timeline--density-compact.v-timeline--side-start { grid-template-columns: auto min-content 0; } .v-timeline--vertical.v-timeline--density-compact .v-timeline-item__body { grid-column: 3; } .v-timeline--horizontal.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__body { grid-row: 3; padding-block-end: initial; padding-block-start: 24px; } .v-timeline--horizontal.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__opposite { grid-row: 1; padding-block-end: 24px; padding-block-start: initial; } .v-timeline--vertical.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__body { grid-column: 3; padding-inline-start: 24px; padding-inline-end: initial; justify-self: flex-start; } .v-timeline--vertical.v-timeline.v-timeline--side-end .v-timeline-item .v-timeline-item__opposite { grid-column: 1; justify-self: flex-end; padding-inline-end: 24px; padding-inline-start: initial; } .v-timeline--horizontal.v-timeline.v-timeline--side-start .v-timeline-item .v-timeline-item__body { grid-row: 1; padding-block-end: 24px; padding-block-start: initial; } .v-timeline--horizontal.v-timeline.v-timeline--side-start .v-timeline-item .v-timeline-item__opposite { grid-row: 3; padding-block-end: initial; padding-block-start: 24px; } .v-timeline--vertical.v-timeline.v-timeline--side-start .v-timeline-item .v-timeline-item__body { grid-column: 1; justify-self: flex-end; padding-inline-end: 24px; } .v-timeline--vertical.v-timeline.v-timeline--side-start .v-timeline-item .v-timeline-item__opposite { grid-column: 3; padding-inline-start: 24px; justify-self: flex-start; } .v-timeline-divider--fill-dot .v-timeline-divider__inner-dot { height: inherit; width: inherit; } .v-timeline--align-center { --v-timeline-line-size-base: 50%; --v-timeline-line-size-offset: 0px; } .v-timeline--horizontal.v-timeline--align-center { justify-items: center; } .v-timeline--horizontal.v-timeline--align-center .v-timeline-item__body { padding-inline: 12px; } .v-timeline--horizontal.v-timeline--align-center .v-timeline-item__opposite { padding-inline: 12px; } .v-timeline--horizontal.v-timeline--align-center .v-timeline-divider { justify-content: center; } .v-timeline--vertical.v-timeline--align-center { align-items: center; } .v-timeline--vertical.v-timeline--align-center .v-timeline-divider { justify-content: center; } .v-timeline--align-start { --v-timeline-line-size-base: 100%; --v-timeline-line-size-offset: 12px; } .v-timeline--align-start .v-timeline-item:first-child .v-timeline-divider__before { --v-timeline-line-size-offset: 24px; } .v-timeline--align-start .v-timeline-item:first-child .v-timeline-divider__after { --v-timeline-line-size-offset: -12px; } .v-timeline--align-start .v-timeline-item:last-child .v-timeline-divider__after { --v-timeline-line-size-offset: 0px; } .v-timeline--horizontal.v-timeline--align-start { justify-items: flex-start; } .v-timeline--horizontal.v-timeline--align-start .v-timeline-divider { justify-content: flex-start; } .v-timeline--horizontal.v-timeline--align-start .v-timeline-divider .v-timeline-divider__before { width: calc(var(--v-timeline-line-size-offset) + var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset)); } .v-timeline--horizontal.v-timeline--align-start .v-timeline-divider .v-timeline-divider__after { width: calc(var(--v-timeline-line-size-base) - var(--v-timeline-dot-size) / 2 + var(--v-timeline-line-size-offset) - var(--v-timeline-line-inset)); } .v-timeline--vertical.v-timeline--align-start { align-items: flex-start; } .v-timeline--vertical.v-timeline--align-start .v-timeline-divider { justify-content: flex-start; } .v-timeline--vertical.v-timeline--align-start .v-timeline-divider .v-timeline-divider__before { height: calc(var(--v-timeline-line-size-offset) + var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset)); } .v-timeline--vertical.v-timeline--align-start .v-timeline-divider .v-timeline-divider__after { height: calc(var(--v-timeline-line-size-base) - var(--v-timeline-dot-size) / 2 + var(--v-timeline-line-size-offset) - var(--v-timeline-line-inset)); } .v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-divider__before { display: none; } .v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-divider__after { --v-timeline-line-size-offset: 12px; } .v-timeline--vertical.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-divider, .v-timeline--vertical.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-item__body, .v-timeline--vertical.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-item__opposite { padding-block-start: 0; } .v-timeline--horizontal.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-divider, .v-timeline--horizontal.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-item__body, .v-timeline--horizontal.v-timeline--truncate-line-start .v-timeline-item:first-child .v-timeline-item__opposite { padding-inline-start: 0; } .v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider__after { display: none; } .v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider__before { --v-timeline-line-size-offset: 12px; } .v-timeline--vertical.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider, .v-timeline--vertical.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-item__body, .v-timeline--vertical.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-item__opposite { padding-block-end: 0; } .v-timeline--horizontal.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-divider, .v-timeline--horizontal.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-item__body, .v-timeline--horizontal.v-timeline--truncate-line-end .v-timeline-item:last-child .v-timeline-item__opposite { padding-inline-end: 0; }