fix(VBtnToggle): restructure styles, improve v-btn color override (#7515

) * fix(VBtnToggle): restructure styles allow manual override of btn color/size, improve state visual clarity fixes #7420 * refactor(VBtnToggle): add sass variables
vuetifyjs · Jun 16, 2019 · 4b4b1a1 · 4b4b1a1
1 parent 7e2e2a4
commit 4b4b1a1
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/packages/vuetify/src/components/VBtnToggle/VBtnToggle.sass b/packages/vuetify/src/components/VBtnToggle/VBtnToggle.sass
@@ -4,6 +4,9 @@
 
 // Theme
 +theme(v-btn-toggle) using ($material)
+  background: map-get($material, 'cards')
+  color: map-deep-get($material, 'text', 'primary')
+
   .v-btn.v-btn
     border-color: map-get($material, 'dividers') !important
 
@@ -15,19 +18,27 @@
 
 // Block
 .v-btn-toggle
-  border-radius: 2px
+  border-radius: $btn-toggle-border-radius
   display: inline-flex
 
+  > .v-btn
+    opacity: $btn-toggle-btn-opacity
+
+    &--active
+      color: inherit
+      opacity: 1
+
+    &.v-size--default
+      height: $btn-toggle-btn-height
+      min-height: 0
+      min-width: $btn-toggle-btn-width
+      padding: $btn-toggle-btn-padding
+
   > .v-btn.v-btn
-    background-color: transparent !important
     border-radius: 0
     border-style: solid
     border-width: thin
     box-shadow: none
-    min-height: 0
-    min-width: $btn-toggle-btn-width
-    padding: $btn-toggle-btn-padding
-    height: $btn-toggle-btn-height
 
     &:first-child
       border-top-left-radius: inherit
@@ -40,9 +51,6 @@
     &:after
       display: none
 
-    &--active
-      color: inherit
-
 // Modifiers
 .v-btn-toggle--rounded
   border-radius: $btn-toggle-round-radius
diff --git a/packages/vuetify/src/components/VBtnToggle/VBtnToggle.ts b/packages/vuetify/src/components/VBtnToggle/VBtnToggle.ts
@@ -25,6 +25,7 @@ export default mixins(
         ...ButtonGroup.options.computed.classes.call(this),
         'v-btn-toggle': true,
         'v-btn-toggle--rounded': this.rounded,
+        ...this.themeClasses,
       }
     },
   },

diff --git a/packages/vuetify/src/components/VBtnToggle/_variables.sass b/packages/vuetify/src/components/VBtnToggle/_variables.sass
@@ -1,4 +1,6 @@
+$btn-toggle-border-radius: 2px
 $btn-toggle-btn-height: 48px !default
 $btn-toggle-btn-padding: 0 12px !default
 $btn-toggle-btn-width: 48px !default
+$btn-toggle-btn-opacity: 0.8
 $btn-toggle-round-radius: 24px !default