fix(VTimeline): disable arrow shadow on clickable cards

fixes #14193
vuetifyjs · Jun 15, 2022 · 27ba2c9 · 27ba2c9
1 parent 8c67ed8
commit 27ba2c9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/packages/vuetify/src/components/VTimeline/VTimeline.sass b/packages/vuetify/src/components/VTimeline/VTimeline.sass
@@ -2,6 +2,12 @@
 @import './_variables.scss'
 @import './_mixins.sass'
 
+/**
+ * .v-timeline::before - center divider
+ * .v-card::before - arrow shadow (conflicts with active link overlay)
+ * .v-card::after - arrow
+ */
+
 // Theme
 +theme(v-timeline) using ($material)
   &::before
@@ -12,15 +18,15 @@
       background: map-get($material, 'cards')
 
     .v-card
-      &::before
+      &:not(.v-card--link)::before
         border-right-color: $shadow-key-ambient-opacity
 
 // Elements
 .v-timeline
   padding-top: $timeline-item-padding
   position: relative
 
-  &:before
+  &::before
     bottom: 0
     content: ''
     height: 100%
@@ -85,18 +91,19 @@
 // Wedge
 .v-timeline-item__body
   > .v-card:not(.v-card--flat)
-    &:before, &:after
+    &:not(.v-card--link)::before,
+    &::after
       content: ''
       position: absolute
       border-top: $timeline-wedge-size solid transparent
       border-bottom: $timeline-wedge-size solid transparent
       border-right: $timeline-wedge-size solid black
       top: calc(50% - #{$timeline-wedge-size})
 
-    &:after
+    &::after
       border-right-color: inherit
 
-    &:before
+    &:not(.v-card--link)::before
       top: calc(50% - #{$timeline-wedge-size} + 2px)
 
 // Modifiers
@@ -106,12 +113,12 @@
 
   .v-timeline-item__body
     > .v-card
-      &:before
-        top: calc(0% + #{$timeline-wedge-size} + 2px)
-
-      &:after
+      &::after
         top: calc(0% + #{$timeline-wedge-size})
 
+      &:not(.v-card--link)::before
+        top: calc(0% + #{$timeline-wedge-size} + 2px)
+
 .v-timeline:not(.v-timeline--dense):not(.v-timeline--reverse)
   +timeline-line-align($timeline-divider-center, left, right)
 

diff --git a/packages/vuetify/src/components/VTimeline/_mixins.sass b/packages/vuetify/src/components/VTimeline/_mixins.sass
@@ -9,8 +9,9 @@
     width: $inner-dot-size
 
 @mixin timeline-wedge-align($direction)
-  .v-timeline-item__body
-    > .v-card:before, .v-card:after
+  .v-timeline-item__body > .v-card
+    &:not(.v-card--link)::before,
+    &::after
       +ltr()
         transform: rotate(if($direction == right, 180deg, 0))
         #{$direction}: -($timeline-wedge-size)
@@ -32,7 +33,7 @@
       text-align: if($direction == left, left, right)
 
 @mixin timeline-line-align($center, $first, $second)
-  &:before
+  &::before
     +ltr()
       #{$first}: calc(#{$center} - #{$timeline-line-width / 2})
       #{$second}: initial