routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+443
@@ -0,0 +1,443 @@
|
||||
@use 'sass:map'
|
||||
@use 'sass:math'
|
||||
@use '../../styles/settings'
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
@use './mixins' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
// VTimeline
|
||||
.v-timeline
|
||||
.v-timeline-divider__dot
|
||||
background: $timeline-dot-divider-background
|
||||
|
||||
@include tools.layer('trumps')
|
||||
@media (forced-colors: active)
|
||||
border: 2px solid
|
||||
|
||||
.v-timeline-divider__inner-dot
|
||||
background: $timeline-inner-dot-divider-background
|
||||
|
||||
@include tools.layer('trumps')
|
||||
@media (forced-colors: active)
|
||||
background-color: transparent
|
||||
|
||||
.v-timeline
|
||||
--v-timeline-dot-border-size: #{map.get($timeline-dot-border-sizes, 'default')}
|
||||
|
||||
display: grid
|
||||
grid-auto-flow: dense
|
||||
position: relative
|
||||
|
||||
@include horizontal(true)
|
||||
grid-column-gap: $timeline-item-padding
|
||||
width: 100%
|
||||
|
||||
.v-timeline--side-end > .v-timeline-item,
|
||||
&:not(.v-timeline--side-start) > .v-timeline-item--side-end,
|
||||
&:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start)
|
||||
.v-timeline-item__body
|
||||
grid-row: 3
|
||||
align-self: flex-start
|
||||
padding-block-start: $timeline-item-padding
|
||||
|
||||
.v-timeline-item__opposite
|
||||
grid-row: 1
|
||||
align-self: flex-end
|
||||
padding-block-end: $timeline-item-padding
|
||||
|
||||
.v-timeline--side-start > .v-timeline-item,
|
||||
&:not(.v-timeline--side-end) > .v-timeline-item--side-start,
|
||||
&:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end)
|
||||
.v-timeline-item__body
|
||||
grid-row: 1
|
||||
align-self: flex-end
|
||||
padding-block-end: $timeline-item-padding
|
||||
|
||||
.v-timeline-item__opposite
|
||||
grid-row: 3
|
||||
align-self: flex-start
|
||||
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--side-start > .v-timeline-item,
|
||||
&:not(.v-timeline--side-end) > .v-timeline-item--side-start,
|
||||
&:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end)
|
||||
.v-timeline-item__body
|
||||
grid-column: 1
|
||||
justify-self: flex-end
|
||||
padding-inline-end: $timeline-item-padding
|
||||
|
||||
.v-timeline-item__opposite
|
||||
grid-column: 3
|
||||
justify-self: flex-start
|
||||
padding-inline-start: $timeline-item-padding
|
||||
|
||||
.v-timeline--side-end > .v-timeline-item,
|
||||
&:not(.v-timeline--side-start) > .v-timeline-item--side-end,
|
||||
&:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start)
|
||||
.v-timeline-item__body
|
||||
grid-column: 3
|
||||
justify-self: flex-start
|
||||
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
|
||||
|
||||
@media (forced-colors: active)
|
||||
background: canvastext
|
||||
|
||||
.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
|
||||
|
||||
@media (forced-colors: active)
|
||||
background: canvastext
|
||||
|
||||
.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}
|
||||
--v-timeline-dot-border-size: #{map.get($timeline-dot-border-sizes, $name)}
|
||||
height: $size
|
||||
width: $size
|
||||
|
||||
.v-timeline-divider__inner-dot
|
||||
align-items: center
|
||||
border-radius: $timeline-dot-border-radius
|
||||
display: flex
|
||||
justify-content: center
|
||||
height: calc(100% - var(--v-timeline-dot-border-size))
|
||||
width: calc(100% - var(--v-timeline-dot-border-size))
|
||||
|
||||
/** 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
|
||||
align-self: flex-start
|
||||
padding-block-end: initial
|
||||
padding-block-start: $timeline-item-padding
|
||||
|
||||
.v-timeline-item__opposite
|
||||
grid-row: 1
|
||||
align-self: flex-end
|
||||
padding-block-end: $timeline-item-padding
|
||||
padding-block-start: initial
|
||||
|
||||
@include vertical(true)
|
||||
.v-timeline-item__body
|
||||
grid-column: 3
|
||||
justify-self: flex-start
|
||||
padding-inline-start: $timeline-item-padding
|
||||
padding-inline-end: initial
|
||||
|
||||
.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
|
||||
align-self: flex-end
|
||||
padding-block-end: $timeline-item-padding
|
||||
padding-block-start: initial
|
||||
|
||||
.v-timeline-item__opposite
|
||||
grid-row: 3
|
||||
align-self: flex-start
|
||||
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
|
||||
justify-self: flex-start
|
||||
padding-inline-start: $timeline-item-padding
|
||||
|
||||
// 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
|
||||
Reference in New Issue
Block a user