fix(VToolbar): remove content padding (#15598)

fixes #15597
vuetifyjs · Aug 9, 2022 · 9604318 · 9604318
1 parent 9cc2c57
commit 9604318
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 21 deletions.
diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.sass b/packages/vuetify/src/components/VToolbar/VToolbar.sass
@@ -10,8 +10,7 @@
   justify-content: space-between
   max-width: 100%
   overflow: hidden
-  padding-inline-end: calc(#{$toolbar-padding-end} + var(--v-scrollbar-offset))
-  padding-inline-start: $toolbar-padding-start
+  padding-inline-end: var(--v-scrollbar-offset)
   position: relative
   transition: $toolbar-transition
   transition-property: height, transform, max-width
@@ -21,12 +20,6 @@
   @include tools.rounded($toolbar-border-radius)
   @include tools.theme($toolbar-theme...)
 
-  @at-root
-    @include tools.density('v-toolbar', $toolbar-density) using ($modifier)
-      .v-toolbar__content
-        padding-top: $toolbar-padding + $modifier
-        padding-bottom: $toolbar-padding + $modifier
-
   &--absolute
     position: absolute
 
@@ -65,12 +58,12 @@
   > .v-btn:first-child
     margin-inline-start: $toolbar-prepend-btn-margin-start
 
-    + .v-toolbar-title
-      padding-inline-start: $toolbar-title-padding
-
   > .v-btn:last-child
     margin-inline-end: $toolbar-append-btn-margin-end
 
+  > .v-toolbar-title
+      margin-inline-start: $toolbar-title-margin
+
   .v-toolbar--density-prominent &
     align-items: flex-start
 
@@ -87,9 +80,6 @@
   margin-inline-start: $toolbar-prepend-btn-margin-start
   margin-inline-end: auto
 
-  + .v-toolbar-title
-    padding-inline-start: $toolbar-title-padding
-
 .v-toolbar__append
   margin-inline-start: auto
   margin-inline-end: $toolbar-append-btn-margin-end

diff --git a/packages/vuetify/src/components/VToolbar/_variables.scss b/packages/vuetify/src/components/VToolbar/_variables.scss
@@ -16,20 +16,16 @@ $toolbar-collapsed-border-radius: 24px !default;
 $toolbar-collapsed-max-width: 112px !default;
 $toolbar-content-padding-x: 16px !default;
 $toolbar-content-padding-y: 4px !default;
-$toolbar-density: ( 'default': 0, 'comfortable': -1, 'compact': -2, 'prominent': -3 ) !default;
 $toolbar-elevation: 0 !default;
 $toolbar-flat-elevation: 0 !default;
 $toolbar-flex: 1 1 auto !default;
-$toolbar-padding-end: 16px !default;
-$toolbar-padding-start: 16px !default;
-$toolbar-padding: 16px !default;
-$toolbar-prepend-btn-margin-start: -6px !default;
-$toolbar-append-btn-margin-end: -6px !default;
+$toolbar-prepend-btn-margin-start: 10px !default;
+$toolbar-append-btn-margin-end: 10px !default;
 $toolbar-rounded-border-radius: variables.$border-radius-root !default;
 $toolbar-transition: .2s variables.$standard-easing !default;
 
 // VToolbarTitle
-$toolbar-title-padding: 20px !default;
+$toolbar-title-margin: 16px !default;
 $toolbar-title-extended-padding: 56px !default;
 $toolbar-title-font-size: 1.25rem !default;
 $toolbar-title-font-weight: 400 !default;