refactor(VEmptyState): tweak text / icon styling

vuetifyjs · Apr 15, 2024 · 073e9ea · 073e9ea
1 parent 4015814
commit 073e9ea
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/packages/vuetify/src/labs/VEmptyState/VEmptyState.sass b/packages/vuetify/src/labs/VEmptyState/VEmptyState.sass
@@ -21,12 +21,16 @@
   text-align: center
   width: 100%
 
+  .v-icon
+    color: $empty-state-media-icon-color
+
 .v-empty-state__headline
   color: $empty-state-headline-color
   font-size: $empty-state-headline-font-size
   font-weight: $empty-state-headline-font-weight
   line-height: $empty-state-headline-line-height
   text-align: center
+  margin-bottom: $empty-state-headline-margin-bottom
 
   .v-empty-state--mobile &
     font-size: $empty-state-headline-mobile-font-size
@@ -35,6 +39,7 @@
   font-size: $empty-state-title-font-size
   font-weight: $empty-state-title-font-weight
   line-height: $empty-state-title-line-height
+  margin-bottom: $empty-state-title-margin-bottom
   text-align: center
 
 .v-empty-state__text

diff --git a/packages/vuetify/src/labs/VEmptyState/_variables.scss b/packages/vuetify/src/labs/VEmptyState/_variables.scss
@@ -8,16 +8,19 @@ $empty-state-actions-padding: 16px !default;
 $empty-state-content-padding: 24px 0 !default;
 $empty-state-headline-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
 $empty-state-headline-font-size: functions.map-deep-get(settings.$typography, 'h2', 'size') !default;
-$empty-state-headline-mobile-font-size: functions.map-deep-get(settings.$typography, 'h4', 'size') !default;
-$empty-state-headline-line-height: functions.map-deep-get(settings.$typography, 'h2', 'line-height') !default;
 $empty-state-headline-font-weight: functions.map-deep-get(settings.$typography, 'h2', 'weight') !default;
+$empty-state-headline-line-height: functions.map-deep-get(settings.$typography, 'h2', 'line-height') !default;
+$empty-state-headline-margin-bottom: 8px !default;
+$empty-state-headline-mobile-font-size: functions.map-deep-get(settings.$typography, 'h4', 'size') !default;
 $empty-state-image-padding: 16px !default;
 $empty-state-min-height: 100% !default;
+$empty-state-media-icon-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
 $empty-state-padding: 16px !default;
-$empty-state-text-font-size: functions.map-deep-get(settings.$typography, 'body-1', 'size') !default;
-$empty-state-text-font-weight: functions.map-deep-get(settings.$typography, 'body-1', 'weight') !default;
-$empty-state-text-line-height: functions.map-deep-get(settings.$typography, 'body-1', 'line-height') !default;
+$empty-state-text-font-size: functions.map-deep-get(settings.$typography, 'body-2', 'size') !default;
+$empty-state-text-font-weight: functions.map-deep-get(settings.$typography, 'body-2', 'weight') !default;
+$empty-state-text-line-height: functions.map-deep-get(settings.$typography, 'body-2', 'line-height') !default;
 $empty-state-text-padding: 0 16px !default;
 $empty-state-title-font-size: functions.map-deep-get(settings.$typography, 'h6', 'size') !default;
-$empty-state-title-line-height: functions.map-deep-get(settings.$typography, 'h6', 'line-height') !default;
 $empty-state-title-font-weight: functions.map-deep-get(settings.$typography, 'h6', 'weight') !default;
+$empty-state-title-line-height: functions.map-deep-get(settings.$typography, 'h6', 'line-height') !default;
+$empty-state-title-margin-bottom: 4px !default;