fix(VToolbar): better scope v-tabs-bar background-color override

fixes #10308
vuetifyjs · Jan 27, 2020 · 6619c9c · 6619c9c
1 parent 7f8fa30
commit 6619c9c
Show file tree

Hide file tree

Showing 11 changed files with 20 additions and 28 deletions.
diff --git a/packages/docs/src/components/doc/ApiItems.vue b/packages/docs/src/components/doc/ApiItems.vue
@@ -53,7 +53,6 @@
       v-model="tab"
       :slider-color="computedTabs.length ? 'primary' : 'transparent'"
       :vertical="$vuetify.breakpoint.smAndUp"
-      background-color="transparent"
     >
       <v-tab
         v-for="(tab, i) in computedTabs"

diff --git a/packages/docs/src/examples/app-bars/complex/img-fade.vue b/packages/docs/src/examples/app-bars/complex/img-fade.vue
@@ -36,10 +36,7 @@
       </v-btn>
 
       <template v-slot:extension>
-        <v-tabs
-          align-with-title
-          background-color="transparent"
-        >
+        <v-tabs align-with-title>
           <v-tab>Tab 1</v-tab>
           <v-tab>Tab 2</v-tab>
           <v-tab>Tab 3</v-tab>

diff --git a/packages/docs/src/examples/app-bars/complex/menu.vue b/packages/docs/src/examples/app-bars/complex/menu.vue
@@ -56,10 +56,7 @@
       </v-menu>
 
       <template v-slot:extension>
-        <v-tabs
-          align-with-title
-          background-color="transparent"
-        >
+        <v-tabs align-with-title>
           <v-tab>Tab 1</v-tab>
           <v-tab>Tab 2</v-tab>
           <v-tab>Tab 3</v-tab>

diff --git a/packages/docs/src/examples/autocompletes/intermediate/advanced.vue b/packages/docs/src/examples/autocompletes/intermediate/advanced.vue
@@ -56,7 +56,6 @@
       <v-tabs
         v-model="tab"
         :hide-slider="!model"
-        background-color="transparent"
         color="blue-grey"
         slider-color="blue-grey"
       >

diff --git a/packages/docs/src/examples/floating-action-buttons/complex/lateral-screens.vue b/packages/docs/src/examples/floating-action-buttons/complex/lateral-screens.vue
@@ -19,7 +19,6 @@
         <v-tabs
           v-model="tabs"
           align-with-title
-          background-color="transparent"
         >
           <v-tab href="#one">Item One</v-tab>
           <v-tab href="#two">Item Two</v-tab>

diff --git a/packages/docs/src/examples/tabs/complex/dynamic-height.vue b/packages/docs/src/examples/tabs/complex/dynamic-height.vue
@@ -16,19 +16,19 @@
         solo-inverted
       ></v-text-field>
 
-      <v-tabs
-        slot="extension"
-        v-model="tabs"
-        background-color="transparent"
-        centered
-      >
-        <v-tab
-          v-for="n in 3"
-          :key="n"
+      <template v-slot:extension>
+        <v-tabs
+          v-model="tabs"
+          centered
         >
-          Item {{ n }}
-        </v-tab>
-      </v-tabs>
+          <v-tab
+            v-for="n in 3"
+            :key="n"
+          >
+            Item {{ n }}
+          </v-tab>
+        </v-tabs>
+      </template>
     </v-toolbar>
 
     <v-tabs-items v-model="tabs">

diff --git a/packages/docs/src/examples/tabs/complex/overflow-to-menu.vue b/packages/docs/src/examples/tabs/complex/overflow-to-menu.vue
@@ -22,7 +22,6 @@
       <template v-slot:extension>
         <v-tabs
           v-model="currentItem"
-          background-color="transparent"
           fixed-tabs
           slider-color="white"
         >

diff --git a/packages/docs/src/examples/tabs/intermediate/align-with-title.vue b/packages/docs/src/examples/tabs/intermediate/align-with-title.vue
@@ -23,7 +23,6 @@
         <v-tabs
           v-model="tab"
           align-with-title
-          background-color="transparent"
         >
           <v-tabs-slider color="yellow"></v-tabs-slider>
 

diff --git a/packages/docs/src/examples/tabs/intermediate/content.vue b/packages/docs/src/examples/tabs/intermediate/content.vue
@@ -24,7 +24,6 @@
           v-model="model"
           centered
           slider-color="yellow"
-          background-color="transparent"
         >
           <v-tab
             v-for="i in 3"

diff --git a/packages/docs/src/examples/tabs/simple/grow.vue b/packages/docs/src/examples/tabs/simple/grow.vue
@@ -23,7 +23,10 @@
         v-for="item in items"
         :key="item"
       >
-        <v-card flat color="basil">
+        <v-card
+          color="basil"
+          flat
+        >
           <v-card-text>{{ text }}</v-card-text>
         </v-card>
       </v-tab-item>

diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.sass b/packages/vuetify/src/components/VToolbar/VToolbar.sass
@@ -53,7 +53,8 @@
     margin-top: -#{$toolbar-content-padding-y}
     margin-bottom: -#{$toolbar-content-padding-y}
 
-    .v-tabs-bar
+    > .v-slide-group.v-tabs-bar
+      background-color: inherit
       height: inherit
 
     &:first-child