fix(VBtn): correct font-size for different VBtn sizes (#8385)

* fix(VBtn): correct font-size for different VBtn sizes fixes #8358 * fix(VBtn): adjust font sizes
vuetifyjs · Aug 15, 2019 · c67b666 · c67b666
1 parent f676454
commit c67b666
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/packages/vuetify/src/components/VBtn/VBtn.sass b/packages/vuetify/src/components/VBtn/VBtn.sass
@@ -43,7 +43,6 @@
   border-radius: $btn-border-radius
   display: inline-flex
   flex: 0 0 auto
-  font-size: $btn-font-size
   font-weight: $btn-font-weight
   letter-spacing: $btn-letter-spacing
   justify-content: center
@@ -60,6 +59,10 @@
   vertical-align: middle
   white-space: nowrap
 
+  @each $name, $size in $btn-font-sizes
+    &.v-size--#{$name}
+      font-size: $size
+
   &:before
     border-radius: inherit
     bottom: 0

diff --git a/packages/vuetify/src/components/VBtn/_variables.scss b/packages/vuetify/src/components/VBtn/_variables.scss
@@ -1,7 +1,6 @@
 $btn-active-opacity: 0.18 !default;
 $btn-border-radius: 4px !default;
 $btn-focus-opacity: 0.24 !default;
-$btn-font-size: .875rem !default;
 $btn-font-weight: 500 !default;
 $btn-hover-opacity: 0.08 !default;
 $btn-letter-spacing: .0892857143em !default;
@@ -16,6 +15,13 @@ $btn-sizes: (
   'large': 44,
   'x-large': 52
 ) !default;
+$btn-font-sizes: (
+  'x-small': .625rem,
+  'small': .75rem,
+  'default': .875rem,
+  'large': 1rem,
+  'x-large': 1.125rem
+) !default;
 $fab-sizes: (
   'x-small': 32,
   'small': 40,