feat(VCard): improve density support

vuetifyjs · May 26, 2021 · 4de13d1 · 4de13d1
1 parent 6e64b01
commit 4de13d1
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 19 deletions.
diff --git a/packages/vuetify/src/components/VCard/VCard.sass b/packages/vuetify/src/components/VCard/VCard.sass
@@ -67,7 +67,7 @@
   letter-spacing: $card-title-letter-spacing
   text-transform: $card-title-text-transform
 
-  @include card-densities($card-title-densities)
+  @include card-line-height-densities($card-title-densities)
 
 .v-card-subtitle
   align-items: center
@@ -76,29 +76,19 @@
   font-size: $card-subtitle-font-size
   font-weight: $card-subtitle-font-weight
   letter-spacing: $card-subtitle-letter-spacing
-  line-height: $card-subtitle-line-height
   text-transform: $card-subtitle-text-transform
 
-  .v-card--density-comfortable &
-    line-height: 1.125rem
-
-  .v-card--density-compact &
-    line-height: 1rem
+  @include card-line-height-densities($card-subtitle-densities)
 
 .v-card-text
   color: $card-text-color
   font-size: $card-text-font-size
   font-weight: $card-text-font-weight
   letter-spacing: $card-text-letter-spacing
-  line-height: $card-text-line-height
   padding: $card-text-padding
   text-transform: $card-text-text-transform
 
-  .v-card--density-comfortable &
-    line-height: 1.2rem
-
-  .v-card--density-compact &
-    line-height: 1.15rem
+  @include card-line-height-densities($card-text-densities)
 
 .v-card-actions
   align-items: center
@@ -145,10 +135,10 @@
   align-items: center
   display: flex
   padding: $card-item-padding
-  height: 72px
+  height: $card-item-height
 
   .v-card--density-comfortable &
-    height: 64px
+    height: $card-item-comfortable-height
 
   .v-card--density-compact &
-    height: 56px
+    height: $card-item-compact-height
diff --git a/packages/vuetify/src/components/VCard/_mixins.scss b/packages/vuetify/src/components/VCard/_mixins.scss
@@ -1,4 +1,4 @@
-@mixin card-densities ($map) {
+@mixin card-line-height-densities ($map) {
   @each $density, $lineHeight in $map {
     @if $density == null {
       .v-card & {

diff --git a/packages/vuetify/src/components/VCard/_variables.scss b/packages/vuetify/src/components/VCard/_variables.scss
@@ -14,16 +14,23 @@ $card-color: var(--v-theme-on-surface) !default;
 $card-disabled-opacity: 0.6 !default;
 $card-elevation: 1 !default;
 $card-hover-elevation: 8 !default;
+$card-item-comfortable-height: 64px !default;
+$card-item-compact-height: 56px !default;
+$card-item-height: 72px !default;
 $card-item-padding: .5rem 1rem !default;
 $card-positions: absolute fixed !default;
 $card-subtitle-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
+$card-subtitle-comfortable-line-height: 1.125rem !default;
+$card-subtitle-compact-line-height: 1rem !default;
 $card-subtitle-font-size: map-deep-get($typography, 'body-2', 'size') !default;
 $card-subtitle-font-weight: map-deep-get($typography, 'body-2', 'weight') !default;
 $card-subtitle-letter-spacing: map-deep-get($typography, 'body-2', 'letter-spacing') !default;
 $card-subtitle-line-height: map-deep-get($typography, 'body-2', 'line-height') !default;
 $card-subtitle-padding: 0 16px !default;
 $card-subtitle-text-transform: none !default;
 $card-text-color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)) !default;
+$card-text-comfortable-line-height: 1.2rem !default;
+$card-text-compact-line-height: 1.15rem !default;
 $card-text-font-size: map-deep-get($typography, 'body-2', 'size') !default;
 $card-text-font-weight: map-deep-get($typography, 'body-2', 'weight') !default;
 $card-text-letter-spacing: map-deep-get($typography, 'body-2', 'letter-spacing') !default;
@@ -32,13 +39,14 @@ $card-text-padding-bottom: 16px !default;
 $card-text-padding: 1rem !default;
 $card-text-text-transform: map-deep-get($typography, 'body-2', 'text-transform') !default;
 $card-tile-border-radius: 0 !default;
+$card-title-comfortable-line-height: 1.75rem !default;
+$card-title-compact-line-height: 1.55rem !default;
 $card-title-font-size: map-deep-get($typography, 'h6', 'size') !default;
 $card-title-font-weight: map-deep-get($typography, 'h6', 'weight') !default;
 $card-title-letter-spacing: map-deep-get($typography, 'h6', 'letter-spacing') !default;
 $card-title-line-height: map-deep-get($typography, 'h6', 'line-height') !default;
 $card-title-padding-top: 16px !default;
 $card-title-padding: 1rem 1rem 0 !default;
-$card-title-comfortable-line-height: 1.75rem !default;
 $card-title-text-transform: none !default;
 
 $card-border: () !default;
@@ -52,7 +60,21 @@ $card-title-densities: () !default;
 $card-title-densities: (
   null: $card-title-line-height,
   'comfortable': $card-title-comfortable-line-height,
-  'compact': 1.55rem
+  'compact': $card-title-compact-line-height
+);
+
+$card-subtitle-densities: () !default;
+$card-subtitle-densities: (
+  null: $card-subtitle-line-height,
+  'comfortable': $card-subtitle-comfortable-line-height,
+  'compact': $card-subtitle-compact-line-height
+);
+
+$card-text-densities: () !default;
+$card-text-densities: (
+  null: $card-text-line-height,
+  'comfortable': $card-text-comfortable-line-height,
+  'compact': $card-text-compact-line-height
 );
 
 $card-theme: () !default;