fix: Various fixes

Author: rstoenescu

dev/components/css/shadows.vue

@@ -1,19 +1,20 @@
 <template>
-  <div>
-    <div class="layout-padding">
-      <div style="margin: 10px; text-align: center">
-        <div class="flex inline shadow-box items-center justify-center inset-shadow">.inset-shadow</div>
-        <div class="flex inline shadow-box items-center justify-center" v-for="n in 5" :class="['shadow-' + n]">.shadow-{{n}}</div>
-        <div class="flex inline shadow-box items-center justify-center" v-for="n in 5" :class="['shadow-up-' + n]">.shadow-up-{{n}}</div>
-      </div>
+  <div class="layout-padding">
+    <div style="margin: 10px; text-align: center">
+      <h1 class="text-left">Standard shadows</h1>
+      <div class="flex inline shadow-box items-center justify-center" v-for="n in 24" :class="['shadow-' + n]">.shadow-{{n}}</div>
+      <h1 class="text-left">Shadows pointing up</h1>
+      <div class="flex inline shadow-box items-center justify-center" v-for="n in 24" :class="['shadow-up-' + n]">.shadow-up-{{n}}</div>
+      <h1 class="text-left">Inset Shadow</h1>
+      <div class="flex inline shadow-box items-center justify-center inset-shadow doc-inset-shadow" border="1px solid grey">.inset-shadow</div>
     </div>
   </div>
 </template>
 
-<style lang="styl" scoped>
+<style lang="styl">
 .shadow-box
   width 100px
   height 100px
   margin 15px
-  border-radius 50%
+  border-radius 5px
 </style>

dev/components/test-layout/toolbar.vue

@@ -43,6 +43,15 @@
       <q-btn flat><q-icon name="sim_card" /></q-btn>
       <q-btn flat><q-icon name="gamepad" /></q-btn>
     </q-toolbar>
+    <q-toolbar color="yellow" class="text-dark">
+      <q-btn flat><q-icon name="assignment_ind" /></q-btn>
+      <q-toolbar-title>
+        Toolbar
+        <span slot="subtitle">Subtitle</span>
+      </q-toolbar-title>
+      <q-btn flat><q-icon name="sim_card" /></q-btn>
+      <q-btn flat><q-icon name="gamepad" /></q-btn>
+    </q-toolbar>
     <q-toolbar color="orange">
       <q-btn flat><q-icon name="mail" /></q-btn>
       <q-toolbar-title>
@@ -74,6 +83,15 @@
       <q-btn flat><q-icon name="sim_card" /></q-btn>
       <q-btn flat><q-icon name="gamepad" /></q-btn>
     </q-toolbar>
+    <q-toolbar inverted color="grey">
+      <q-btn flat><q-icon name="assignment_ind" /></q-btn>
+      <q-toolbar-title>
+        Toolbar
+        <span slot="subtitle">Subtitle</span>
+      </q-toolbar-title>
+      <q-btn flat><q-icon name="sim_card" /></q-btn>
+      <q-btn flat><q-icon name="gamepad" /></q-btn>
+    </q-toolbar>
     <q-toolbar inverted color="orange">
       <q-btn flat><q-icon name="mail" /></q-btn>
       <q-toolbar-title>
@@ -94,8 +112,3 @@
     </q-toolbar>
   </div>
 </template>
-
-<script>
-export default {
-}
-</script>

src/components/tab/QTab.vue

@@ -24,11 +24,13 @@
 import TabMixin from './tab-mixin'
 import Ripple from '../../directives/ripple'
 import { QIcon } from '../icon'
+import { QChip } from '../chip'
 
 export default {
   name: 'q-tab',
   components: {
-    QIcon
+    QIcon,
+    QChip
   },
   directives: {
     Ripple

src/css/core/elevation.styl

@@ -4,6 +4,8 @@
 for $z in 1..24
   .shadow-{$z}
     box-shadow $shadow-+$z
+  .shadow-up-{$z}
+    box-shadow $shadow-up-+$z
 
 .no-shadow, .shadow-0
   box-shadow none !important