feat(VBtn): add sass variables for padding ratio

resolves #10741
vuetifyjs · Mar 9, 2021 · e6168ad · e6168ad
1 parent edb5ff1
commit e6168ad
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 25 deletions.
diff --git a/packages/vuetify/src/components/VBtn/VBtn.sass b/packages/vuetify/src/components/VBtn/VBtn.sass
@@ -21,7 +21,7 @@
   vertical-align: $button-vertical-align
 
   @at-root
-    +sizes('v-btn', $button-sizes)
+    +button-sizes()
     +density('v-btn', 'height', $button-density)
 
   +states('.v-btn__overlay')

diff --git a/packages/vuetify/src/components/VBtn/_index.scss b/packages/vuetify/src/components/VBtn/_index.scss
@@ -1,2 +1,17 @@
 @import '../../styles/styles.sass';
 @import './variables';
+
+@mixin button-sizes {
+  @each $sizeName, $multiplier in $baseSizes {
+    $size: map-get($button-sizes, 'font-size') + (2 * $multiplier) / 16;
+    $height: map-get($button-sizes, 'height') + (8 * $multiplier);
+
+    .v-btn--size-#{$sizeName} {
+      --v-btn-size: #{$size};
+      --v-btn-height: #{$height};
+      font-size: $size;
+      min-width: round($height * $button-width-ratio);
+      padding: 0 ($height / $button-padding-ratio);
+    }
+  }
+}
diff --git a/packages/vuetify/src/components/VBtn/_variables.scss b/packages/vuetify/src/components/VBtn/_variables.scss
@@ -13,10 +13,12 @@ $button-icon-border-radius: map-get($rounded, 'circle') !default;
 $button-icon-font-size: 24px !default;
 $button-icon-size: 48px !default;
 $button-line-height: normal !default;
+$button-padding-ratio: 2.25 !default;
 $button-positions: absolute fixed !default;
 $button-text-letter-spacing: map-deep-get($headings, 'button', 'letter-spacing') !default;
 $button-text-transform: map-deep-get($headings, 'button', 'text-transform') !default;
 $button-vertical-align: middle !default;
+$button-width-ratio: 16/9 !default;
 
 $button-density: ('default': 0, 'comfortable': -2, 'compact': -3) !default;
 $button-icon-density: ('default': 3, 'comfortable': 0, 'compact': -2) !default;

diff --git a/packages/vuetify/src/styles/settings/_variables.scss b/packages/vuetify/src/styles/settings/_variables.scss
@@ -315,4 +315,12 @@ $sizes: (
   'default',
   'large',
   'x-large'
-);
+) !default;
+
+$size-scales: (
+  'x-small': -2,
+  'small': -1,
+  'default': 0,
+  'large': 1,
+  'x-large': 2
+) !default;
diff --git a/packages/vuetify/src/styles/tools/_index.sass b/packages/vuetify/src/styles/tools/_index.sass
@@ -8,7 +8,6 @@
 @import './_rounded'
 @import './_rtl'
 @import './_sheet'
-@import './_sizes'
 @import './_states'
 @import './_theme'
 @import './_utilities'

diff --git a/packages/vuetify/src/styles/tools/_sizes.scss b/packages/vuetify/src/styles/tools/_sizes.scss