|
2 | 2 | @import './_variables.scss'
|
3 | 3 | @import './_mixins.sass'
|
4 | 4 |
|
| 5 | +/** |
| 6 | + * .v-timeline::before - center divider |
| 7 | + * .v-card::before - arrow shadow (conflicts with active link overlay) |
| 8 | + * .v-card::after - arrow |
| 9 | + */ |
| 10 | + |
5 | 11 | // Theme
|
6 | 12 | +theme(v-timeline) using ($material)
|
7 | 13 | &::before
|
|
12 | 18 | background: map-get($material, 'cards')
|
13 | 19 |
|
14 | 20 | .v-card
|
15 |
| - &::before |
| 21 | + &:not(.v-card--link)::before |
16 | 22 | border-right-color: $shadow-key-ambient-opacity
|
17 | 23 |
|
18 | 24 | // Elements
|
19 | 25 | .v-timeline
|
20 | 26 | padding-top: $timeline-item-padding
|
21 | 27 | position: relative
|
22 | 28 |
|
23 |
| - &:before |
| 29 | + &::before |
24 | 30 | bottom: 0
|
25 | 31 | content: ''
|
26 | 32 | height: 100%
|
|
85 | 91 | // Wedge
|
86 | 92 | .v-timeline-item__body
|
87 | 93 | > .v-card:not(.v-card--flat)
|
88 |
| - &:before, &:after |
| 94 | + &:not(.v-card--link)::before, |
| 95 | + &::after |
89 | 96 | content: ''
|
90 | 97 | position: absolute
|
91 | 98 | border-top: $timeline-wedge-size solid transparent
|
92 | 99 | border-bottom: $timeline-wedge-size solid transparent
|
93 | 100 | border-right: $timeline-wedge-size solid black
|
94 | 101 | top: calc(50% - #{$timeline-wedge-size})
|
95 | 102 |
|
96 |
| - &:after |
| 103 | + &::after |
97 | 104 | border-right-color: inherit
|
98 | 105 |
|
99 |
| - &:before |
| 106 | + &:not(.v-card--link)::before |
100 | 107 | top: calc(50% - #{$timeline-wedge-size} + 2px)
|
101 | 108 |
|
102 | 109 | // Modifiers
|
|
106 | 113 |
|
107 | 114 | .v-timeline-item__body
|
108 | 115 | > .v-card
|
109 |
| - &:before |
110 |
| - top: calc(0% + #{$timeline-wedge-size} + 2px) |
111 |
| - |
112 |
| - &:after |
| 116 | + &::after |
113 | 117 | top: calc(0% + #{$timeline-wedge-size})
|
114 | 118 |
|
| 119 | + &:not(.v-card--link)::before |
| 120 | + top: calc(0% + #{$timeline-wedge-size} + 2px) |
| 121 | + |
115 | 122 | .v-timeline:not(.v-timeline--dense):not(.v-timeline--reverse)
|
116 | 123 | +timeline-line-align($timeline-divider-center, left, right)
|
117 | 124 |
|
|
0 commit comments