fix(VTimelineItem): fix flickering on clickable v-card

[ryoluo]

fix #14193

Description

The bug was caused by style property of v-card--link::before. It can be resolved by adding wedge style to an element: .v-timeline-item__body > .v-card:not(.v-card--flat)::before.

fixes #14193

Motivation and Context

The change itself helps fixing an UI behavior (#14156)

How Has This Been Tested?

visually

Markup:

<template>
  <v-container>
    <v-app id="inspire">
      <v-timeline dense>
        <v-timeline-item>
          <v-card hover outlined :disabled="disable" @click="">
            <v-card-text>I flicker when the card is disabled. I have a click handler.</v-card-text>
          </v-card>
        </v-timeline-item>
        <v-timeline-item>
          <v-card hover outlined :disabled="disable">
            <v-card-text>I do not flicker. I do not have a click handler.</v-card-text>
          </v-card>
        </v-timeline-item>
      </v-timeline>
      <v-btn @click="disable = !disable" color="secondary">toggle disable</v-btn>
    </v-app>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      disable: false,
    }),
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[johnleider]

The bottom image is the comparison with your changes.

[KaelWD]

Closing due to inactivity