fix(VCardActions): space children with gap instead of margin

closes #20239 closes #20262
vuetifyjs · Aug 15, 2024 · 2194403 · 2194403
1 parent 046da8d
commit 2194403
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 10 deletions.
diff --git a/packages/vuetify/src/components/VBtn/VBtn.sass b/packages/vuetify/src/components/VBtn/VBtn.sass
@@ -231,12 +231,6 @@
     pointer-events: none
     @include tools.absolute()
 
-  // VCard
-  .v-btn
-    ~ .v-btn:not(.v-btn-toggle .v-btn)
-      .v-card-actions &
-        margin-inline-start: $button-card-actions-margin
-
   // VPagination
   .v-btn
     .v-pagination &

diff --git a/packages/vuetify/src/components/VBtn/_variables.scss b/packages/vuetify/src/components/VBtn/_variables.scss
@@ -18,7 +18,6 @@ $button-border-radius: settings.$border-radius-root !default;
 $button-border-style: settings.$border-style-root !default;
 $button-border-thin-width: thin !default;
 $button-border-width: 0 !default;
-$button-card-actions-margin: .5rem !default;
 $button-card-actions-padding: 0 8px !default; // @deprecated
 $button-content-transition: transform, opacity .2s settings.$standard-easing !default;
 $button-disabled-opacity: 0.26 !default;

diff --git a/packages/vuetify/src/components/VCard/VCard.sass b/packages/vuetify/src/components/VCard/VCard.sass
@@ -77,6 +77,7 @@
     flex: $card-actions-flex
     min-height: $card-actions-min-height
     padding: $card-actions-padding
+    gap: $card-actions-gap
 
   .v-card-item
     align-items: $card-item-align-items

diff --git a/packages/vuetify/src/components/VCard/_variables.scss b/packages/vuetify/src/components/VCard/_variables.scss
@@ -3,9 +3,6 @@
 @use '../../styles/tools';
 
 // VCard
-$card-actions-flex: none !default;
-$card-actions-min-height: 52px !default;
-$card-actions-padding: .5rem !default;
 $card-append-padding-inline-start: .5rem !default;
 $card-background: rgb(var(--v-theme-surface)) !default;
 $card-border-color: settings.$border-color-root !default;
@@ -31,6 +28,13 @@ $card-transition-duration: 0.28s !default;
 $card-transition-property: box-shadow, opacity, background !default;
 $card-transition-timing-function: settings.$standard-easing !default;
 
+// VCardActions
+$card-actions-flex: none !default;
+$card-actions-min-height: 52px !default;
+$card-actions-padding: .5rem !default;
+$button-card-actions-margin: .5rem !default; // deprecated
+$card-actions-gap: $button-card-actions-margin !default;
+
 // VCardHeader
 $card-header-flex: none !default;