Skip to content

Commit

Permalink
fix(VTimeline): disable arrow shadow on clickable cards
Browse files Browse the repository at this point in the history
fixes #14193
  • Loading branch information
KaelWD committed Jun 15, 2022
1 parent 8c67ed8 commit 27ba2c9
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 12 deletions.
25 changes: 16 additions & 9 deletions packages/vuetify/src/components/VTimeline/VTimeline.sass
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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%
Expand Down Expand Up @@ -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
Expand All @@ -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)

Expand Down
7 changes: 4 additions & 3 deletions packages/vuetify/src/components/VTimeline/_mixins.sass
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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
Expand Down

0 comments on commit 27ba2c9

Please sign in to comment.