Skip to content

Commit 27ba2c9

Browse files
committed
fix(VTimeline): disable arrow shadow on clickable cards
fixes #14193
1 parent 8c67ed8 commit 27ba2c9

File tree

2 files changed

+20
-12
lines changed

2 files changed

+20
-12
lines changed

Diff for: packages/vuetify/src/components/VTimeline/VTimeline.sass

+16-9
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22
@import './_variables.scss'
33
@import './_mixins.sass'
44

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+
511
// Theme
612
+theme(v-timeline) using ($material)
713
&::before
@@ -12,15 +18,15 @@
1218
background: map-get($material, 'cards')
1319

1420
.v-card
15-
&::before
21+
&:not(.v-card--link)::before
1622
border-right-color: $shadow-key-ambient-opacity
1723

1824
// Elements
1925
.v-timeline
2026
padding-top: $timeline-item-padding
2127
position: relative
2228

23-
&:before
29+
&::before
2430
bottom: 0
2531
content: ''
2632
height: 100%
@@ -85,18 +91,19 @@
8591
// Wedge
8692
.v-timeline-item__body
8793
> .v-card:not(.v-card--flat)
88-
&:before, &:after
94+
&:not(.v-card--link)::before,
95+
&::after
8996
content: ''
9097
position: absolute
9198
border-top: $timeline-wedge-size solid transparent
9299
border-bottom: $timeline-wedge-size solid transparent
93100
border-right: $timeline-wedge-size solid black
94101
top: calc(50% - #{$timeline-wedge-size})
95102

96-
&:after
103+
&::after
97104
border-right-color: inherit
98105

99-
&:before
106+
&:not(.v-card--link)::before
100107
top: calc(50% - #{$timeline-wedge-size} + 2px)
101108

102109
// Modifiers
@@ -106,12 +113,12 @@
106113

107114
.v-timeline-item__body
108115
> .v-card
109-
&:before
110-
top: calc(0% + #{$timeline-wedge-size} + 2px)
111-
112-
&:after
116+
&::after
113117
top: calc(0% + #{$timeline-wedge-size})
114118

119+
&:not(.v-card--link)::before
120+
top: calc(0% + #{$timeline-wedge-size} + 2px)
121+
115122
.v-timeline:not(.v-timeline--dense):not(.v-timeline--reverse)
116123
+timeline-line-align($timeline-divider-center, left, right)
117124

Diff for: packages/vuetify/src/components/VTimeline/_mixins.sass

+4-3
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@
99
width: $inner-dot-size
1010

1111
@mixin timeline-wedge-align($direction)
12-
.v-timeline-item__body
13-
> .v-card:before, .v-card:after
12+
.v-timeline-item__body > .v-card
13+
&:not(.v-card--link)::before,
14+
&::after
1415
+ltr()
1516
transform: rotate(if($direction == right, 180deg, 0))
1617
#{$direction}: -($timeline-wedge-size)
@@ -32,7 +33,7 @@
3233
text-align: if($direction == left, left, right)
3334

3435
@mixin timeline-line-align($center, $first, $second)
35-
&:before
36+
&::before
3637
+ltr()
3738
#{$first}: calc(#{$center} - #{$timeline-line-width / 2})
3839
#{$second}: initial

0 commit comments

Comments
 (0)