411 lines
11 KiB
Sass
411 lines
11 KiB
Sass
@use 'sass:map'
|
|
@use 'sass:math'
|
|
@use '../../styles/settings'
|
|
@use '../../styles/tools'
|
|
@use './variables' as *
|
|
@use './mixins' as *
|
|
|
|
// VTimeline
|
|
.v-timeline
|
|
.v-timeline-divider__dot
|
|
background: $timeline-dot-divider-background
|
|
|
|
.v-timeline-divider__inner-dot
|
|
background: $timeline-inner-dot-divider-background
|
|
|
|
.v-timeline
|
|
display: grid
|
|
grid-auto-flow: dense
|
|
position: relative
|
|
|
|
@include horizontal(true)
|
|
grid-column-gap: $timeline-item-padding
|
|
width: 100%
|
|
|
|
.v-timeline-item:nth-child(2n)
|
|
.v-timeline-item__body
|
|
grid-row: 3
|
|
padding-block-start: $timeline-item-padding
|
|
|
|
.v-timeline-item__opposite
|
|
grid-row: 1
|
|
padding-block-end: $timeline-item-padding
|
|
align-self: flex-end
|
|
|
|
.v-timeline-item:nth-child(2n+1)
|
|
.v-timeline-item__body
|
|
grid-row: 1
|
|
padding-block-end: $timeline-item-padding
|
|
align-self: flex-end
|
|
|
|
.v-timeline-item__opposite
|
|
grid-row: 3
|
|
padding-block-start: $timeline-item-padding
|
|
|
|
@include vertical(true)
|
|
row-gap: $timeline-item-padding
|
|
height: 100%
|
|
|
|
@include timeline-first-item()
|
|
padding-block-start: $timeline-item-padding
|
|
|
|
@include timeline-last-item()
|
|
padding-block-end: $timeline-item-padding
|
|
|
|
.v-timeline-item:nth-child(2n)
|
|
.v-timeline-item__body
|
|
grid-column: 1
|
|
padding-inline-end: $timeline-item-padding
|
|
|
|
.v-timeline-item__opposite
|
|
grid-column: 3
|
|
padding-inline-start: $timeline-item-padding
|
|
|
|
.v-timeline-item:nth-child(2n+1)
|
|
.v-timeline-item__body
|
|
grid-column: 3
|
|
padding-inline-start: $timeline-item-padding
|
|
|
|
.v-timeline-item__opposite
|
|
grid-column: 1
|
|
justify-self: flex-end
|
|
padding-inline-end: $timeline-item-padding
|
|
|
|
// VTimelineItem
|
|
.v-timeline-item
|
|
display: contents
|
|
|
|
// VTimelineDivider
|
|
.v-timeline-divider
|
|
position: relative
|
|
display: flex
|
|
align-items: center
|
|
|
|
@include horizontal
|
|
flex-direction: row
|
|
grid-row: 2
|
|
width: 100%
|
|
|
|
@include vertical
|
|
height: 100%
|
|
flex-direction: column
|
|
grid-column: 2
|
|
|
|
$timeline-line-size: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
|
|
$timeline-line-start: math.div(-$timeline-item-padding, 2)
|
|
$timeline-line-size-first-last: calc(var(--v-timeline-line-size-base) - var(--v-timeline-line-inset) + var(--v-timeline-line-size-offset))
|
|
|
|
.v-timeline-divider__before
|
|
background: $timeline-divider-line-background
|
|
position: absolute
|
|
|
|
@include horizontal
|
|
height: $timeline-divider-line-thickness
|
|
width: $timeline-line-size
|
|
inset-inline-start: $timeline-line-start
|
|
inset-inline-end: initial
|
|
|
|
@include vertical
|
|
height: $timeline-line-size
|
|
width: $timeline-divider-line-thickness
|
|
top: $timeline-line-start
|
|
|
|
.v-timeline-divider__after
|
|
background: $timeline-divider-line-background
|
|
position: absolute
|
|
|
|
@include horizontal
|
|
height: $timeline-divider-line-thickness
|
|
width: $timeline-line-size
|
|
inset-inline-end: $timeline-line-start
|
|
inset-inline-start: initial
|
|
|
|
@include vertical
|
|
height: $timeline-line-size
|
|
width: $timeline-divider-line-thickness
|
|
bottom: $timeline-line-start
|
|
|
|
.v-timeline-item:first-child
|
|
.v-timeline-divider__before
|
|
@include vertical
|
|
height: $timeline-line-size
|
|
top: 0
|
|
|
|
@include horizontal
|
|
width: $timeline-line-size
|
|
inset-inline-start: 0
|
|
inset-inline-end: initial
|
|
|
|
.v-timeline-divider__after
|
|
@include vertical
|
|
height: $timeline-line-size-first-last
|
|
|
|
@include horizontal
|
|
width: $timeline-line-size-first-last
|
|
inset-inline-end: $timeline-line-start
|
|
inset-inline-start: initial
|
|
|
|
.v-timeline-item:last-child
|
|
.v-timeline-divider__before
|
|
@include vertical
|
|
height: $timeline-line-size-first-last
|
|
|
|
@include horizontal
|
|
width: $timeline-line-size-first-last
|
|
|
|
.v-timeline-divider__after
|
|
@include vertical
|
|
height: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
|
|
bottom: 0
|
|
|
|
@include horizontal
|
|
width: calc(var(--v-timeline-line-size-base) + #{math.div($timeline-item-padding, 2)} - var(--v-timeline-line-inset))
|
|
inset-inline-end: 0
|
|
inset-inline-start: initial
|
|
|
|
.v-timeline-item:only-child
|
|
.v-timeline-divider__after
|
|
@include vertical
|
|
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: $timeline-dot-border-radius
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
@include tools.elevation($timeline-divider-dot-elevation)
|
|
|
|
@each $name, $multiplier in settings.$size-scales
|
|
$size: $timeline-dot-size + (8 * $multiplier)
|
|
|
|
&--size-#{$name}
|
|
height: $size
|
|
width: $size
|
|
|
|
.v-timeline-divider__inner-dot
|
|
height: calc(100% - #{map.get($timeline-dot-border-sizes, $name)})
|
|
width: calc(100% - #{map.get($timeline-dot-border-sizes, $name)})
|
|
|
|
.v-timeline-divider__inner-dot
|
|
align-items: center
|
|
border-radius: $timeline-dot-border-radius
|
|
display: flex
|
|
justify-content: center
|
|
|
|
/** Modifiers **/
|
|
|
|
// Justify
|
|
.v-timeline--justify-center
|
|
@include horizontal(true)
|
|
grid-template-rows: $timeline-item-grid-template-center
|
|
|
|
@include vertical(true)
|
|
grid-template-columns: $timeline-item-grid-template-center
|
|
|
|
.v-timeline--justify-auto
|
|
@include horizontal(true)
|
|
grid-template-rows: $timeline-item-grid-template-auto
|
|
|
|
@include vertical(true)
|
|
grid-template-columns: $timeline-item-grid-template-auto
|
|
|
|
// Density
|
|
.v-timeline--density-comfortable
|
|
@include horizontal(true)
|
|
height: 100%
|
|
|
|
&.v-timeline--side-end
|
|
grid-template-rows: $timeline-density-comfortable-grid-template-end
|
|
|
|
&.v-timeline--side-start
|
|
grid-template-rows: $timeline-density-comfortable-grid-template-start
|
|
|
|
@include vertical(true)
|
|
width: 100%
|
|
|
|
&.v-timeline--side-end
|
|
grid-template-columns: $timeline-density-comfortable-grid-template-end
|
|
|
|
&.v-timeline--side-start
|
|
grid-template-columns: $timeline-density-comfortable-grid-template-start
|
|
|
|
.v-timeline--density-compact
|
|
@include horizontal(true)
|
|
&.v-timeline--side-end
|
|
grid-template-rows: $timeline-density-compact-grid-template-end
|
|
|
|
&.v-timeline--side-start
|
|
grid-template-rows: $timeline-density-compact-grid-template-start
|
|
|
|
.v-timeline-item__body
|
|
grid-row: 1
|
|
|
|
@include vertical(true)
|
|
&.v-timeline--side-end
|
|
grid-template-columns: $timeline-density-compact-grid-template-end
|
|
|
|
&.v-timeline--side-start
|
|
grid-template-columns: $timeline-density-compact-grid-template-start
|
|
|
|
.v-timeline-item__body
|
|
grid-column: 3
|
|
|
|
// Side
|
|
.v-timeline.v-timeline--side-end
|
|
.v-timeline-item
|
|
@include horizontal(true)
|
|
.v-timeline-item__body
|
|
grid-row: 3
|
|
padding-block-end: initial
|
|
padding-block-start: $timeline-item-padding
|
|
|
|
.v-timeline-item__opposite
|
|
grid-row: 1
|
|
padding-block-end: $timeline-item-padding
|
|
padding-block-start: initial
|
|
|
|
@include vertical(true)
|
|
.v-timeline-item__body
|
|
grid-column: 3
|
|
padding-inline-start: $timeline-item-padding
|
|
padding-inline-end: initial
|
|
justify-self: flex-start
|
|
|
|
.v-timeline-item__opposite
|
|
grid-column: 1
|
|
justify-self: flex-end
|
|
padding-inline-end: $timeline-item-padding
|
|
padding-inline-start: initial
|
|
|
|
.v-timeline.v-timeline--side-start
|
|
.v-timeline-item
|
|
@include horizontal(true)
|
|
.v-timeline-item__body
|
|
grid-row: 1
|
|
padding-block-end: $timeline-item-padding
|
|
padding-block-start: initial
|
|
|
|
.v-timeline-item__opposite
|
|
grid-row: 3
|
|
padding-block-end: initial
|
|
padding-block-start: $timeline-item-padding
|
|
|
|
@include vertical(true)
|
|
.v-timeline-item__body
|
|
grid-column: 1
|
|
justify-self: flex-end
|
|
padding-inline-end: $timeline-item-padding
|
|
|
|
.v-timeline-item__opposite
|
|
grid-column: 3
|
|
padding-inline-start: $timeline-item-padding
|
|
justify-self: flex-start
|
|
|
|
// Fill dot
|
|
.v-timeline-divider--fill-dot
|
|
.v-timeline-divider__inner-dot
|
|
height: inherit
|
|
width: inherit
|
|
|
|
// Alignment
|
|
.v-timeline--align-center
|
|
--v-timeline-line-size-base: 50%
|
|
--v-timeline-line-size-offset: 0px
|
|
|
|
@include horizontal(true)
|
|
justify-items: center
|
|
|
|
.v-timeline-item__body
|
|
padding-inline: math.div($timeline-item-padding, 2)
|
|
|
|
.v-timeline-item__opposite
|
|
padding-inline: math.div($timeline-item-padding, 2)
|
|
|
|
.v-timeline-divider
|
|
justify-content: center
|
|
|
|
@include vertical(true)
|
|
align-items: center
|
|
|
|
.v-timeline-divider
|
|
justify-content: center
|
|
|
|
.v-timeline--align-start
|
|
--v-timeline-line-size-base: 100%
|
|
--v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
|
|
|
|
$timeline-line-size-before: calc(var(--v-timeline-line-size-offset) + var(--v-timeline-dot-size) / 2 - var(--v-timeline-line-inset))
|
|
$timeline-line-size-after: 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-item:first-child
|
|
.v-timeline-divider__before
|
|
--v-timeline-line-size-offset: #{$timeline-item-padding}
|
|
|
|
.v-timeline-divider__after
|
|
--v-timeline-line-size-offset: -#{math.div($timeline-item-padding, 2)}
|
|
|
|
.v-timeline-item:last-child
|
|
.v-timeline-divider__after
|
|
--v-timeline-line-size-offset: 0px
|
|
|
|
@include horizontal(true)
|
|
justify-items: flex-start
|
|
|
|
.v-timeline-divider
|
|
justify-content: flex-start
|
|
|
|
.v-timeline-divider__before
|
|
width: $timeline-line-size-before
|
|
|
|
.v-timeline-divider__after
|
|
width: $timeline-line-size-after
|
|
|
|
@include vertical(true)
|
|
align-items: flex-start
|
|
|
|
.v-timeline-divider
|
|
justify-content: flex-start
|
|
|
|
.v-timeline-divider__before
|
|
height: $timeline-line-size-before
|
|
|
|
.v-timeline-divider__after
|
|
height: $timeline-line-size-after
|
|
|
|
// Truncate start
|
|
.v-timeline--truncate-line-start
|
|
.v-timeline-item:first-child
|
|
.v-timeline-divider__before
|
|
display: none
|
|
|
|
.v-timeline-divider__after
|
|
--v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
|
|
|
|
@include vertical(true)
|
|
@include timeline-first-item()
|
|
padding-block-start: 0
|
|
|
|
@include horizontal(true)
|
|
@include timeline-first-item()
|
|
padding-inline-start: 0
|
|
|
|
// Truncate end
|
|
.v-timeline--truncate-line-end
|
|
.v-timeline-item:last-child
|
|
.v-timeline-divider__after
|
|
display: none
|
|
|
|
.v-timeline-divider__before
|
|
--v-timeline-line-size-offset: #{math.div($timeline-item-padding, 2)}
|
|
|
|
@include vertical(true)
|
|
@include timeline-last-item()
|
|
padding-block-end: 0
|
|
|
|
@include horizontal(true)
|
|
@include timeline-last-item()
|
|
padding-inline-end: 0
|