fix(VDialog): resolve style inconsistencies and structure

[johnleider]

Description

Move component level dialog styles to their respective sass files. Refactored to match MD2 spec.

Motivation and Context

• fix broken spec
• clean-up style implementation

Added the following sass variables:

• $card-avatar-dialog-padding
• $card-dialog-elevation
• $card-header-dialog-padding
• $card-header-dialog-text-padding-top
• $card-text-dialog-letter-spacing
• $card-text-dialog-padding
• $overlay-dialog-border-radius
• $overlay-dialog-max-height
• $overlay-dialog-max-width
• $overlay-dialog-min-width
• $overlay-dialog-mobile-breakpoint
• $overlay-dialog-mobile-max-width
• $sheet-dialog-elevation

BREAKING

Moved or removed the following sass variables:

• $dialog-border-radius -> $overlay-dialog-border-radius
• $dialog-card-actions-padding -> removed
• $dialog-card-subtitle-padding -> removed
• $dialog-card-text-padding -> $card-text-dialog-padding
• $dialog-card-title-font-size -> removed
• $dialog-card-title-font-weight -> removed
• $dialog-card-title-letter-spacing -> removed
• $dialog-card-title-padding -> $card-header-dialog-padding
• $dialog-elevation -> $card-dialog-elevation or $sheet-dialog-elevation
• $dialog-margin -> removed
• $dialog-max-height -> $overlay-dialog-max-height

How Has This Been Tested?

Markup:

<template>
  <v-app>
    <v-container style="height: 2500px">
      <v-dialog v-model="active">
        <template #activator="{ isActive, props }">
          <v-btn v-bind="props">{{ isActive ? 'Close' : 'Open' }} dialog</v-btn>
        </template>

        <!-- <v-sheet>
          <div class="pa-4">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum similique numquam consequatur excepturi dolorum molestiae repellendus dolore at, ipsum nobis sunt repudiandae sit dolores nulla repellat eius veniam, nisi sed.
          </div>
        </v-sheet> -->

        <v-card title="Dialog header" text="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut modi iusto ipsum molestiae doloribus rerum nulla amet eaque excepturi magni quaerat, libero porro, eligendi delectus neque sed quasi, quod sit!">
          <!-- <template #append>
              <v-btn variant="text" density="compact" icon="$close" @click="isActive.value = false" />
            </template> -->

          <template #actions>
            <v-spacer />

            <v-btn>Action 1</v-btn>

            <v-btn>Action 2</v-btn>
          </template>
        </v-card>
      </v-dialog>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      active: true,
    }),
  }
</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]

Requesting Initial comments from @vuetifyjs/core-team