From 9604318a890abc81d9eca3cb7781daefc48784e8 Mon Sep 17 00:00:00 2001 From: John Leider <9064066+johnleider@users.noreply.github.com> Date: Tue, 9 Aug 2022 05:28:03 -0400 Subject: [PATCH] fix(VToolbar): remove content padding (#15598) fixes #15597 --- .../src/components/VToolbar/VToolbar.sass | 18 ++++-------------- .../src/components/VToolbar/_variables.scss | 10 +++------- 2 files changed, 7 insertions(+), 21 deletions(-) diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.sass b/packages/vuetify/src/components/VToolbar/VToolbar.sass index dafbd355ac4..eed4cafe959 100644 --- 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 index fc58a9f0252..3178e4a59eb 100644 --- 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;