From ce42e89a761cbfc9eb3c3651e7db40b9607d5eee Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 12 Sep 2016 03:16:10 -0300
Subject: [PATCH] Add possibility to have whiteframes inside tabs

---
 src/components/mdTabs/mdTabs.vue             |  33 ++---
 src/components/mdWhiteframe/mdWhiteframe.vue |   2 +-
 src/docs/pages/Tabs.vue                      | 121 +------------------
 3 files changed, 22 insertions(+), 134 deletions(-)

diff --git a/src/components/mdTabs/mdTabs.vue b/src/components/mdTabs/mdTabs.vue
index f11b8f0..742a295 100644
--- a/src/components/mdTabs/mdTabs.vue
+++ b/src/components/mdTabs/mdTabs.vue
@@ -1,19 +1,21 @@
 <template>
   <div class="md-tabs" :class="tabClasses">
-    <div class="md-tabs-navigation">
-      <button
-        v-for="(header, index) in tabs"
-        type="button"
-        class="md-tab-header"
-        :class="{ 'md-active': activeTab === index }"
-        @click="changeTab(index)"
-        v-md-ink-ripple
-        ref="tabHeader">
-        <md-icon v-if="header.icon">{{ header.icon }}</md-icon>
-        <span v-if="header.label">{{ header.label }}</span>
-      </button>
-      <span class="md-tab-indicator" ref="indicator"></span>
-    </div>
+    <md-whiteframe :md-elevation="mdElevation || 0">
+      <div class="md-tabs-navigation">
+        <button
+          v-for="(header, index) in tabs"
+          type="button"
+          class="md-tab-header"
+          :class="{ 'md-active': activeTab === index }"
+          @click="changeTab(index)"
+          v-md-ink-ripple
+          ref="tabHeader">
+          <md-icon v-if="header.icon">{{ header.icon }}</md-icon>
+          <span v-if="header.label">{{ header.label }}</span>
+        </button>
+        <span class="md-tab-indicator" ref="indicator"></span>
+      </div>
+    </md-whiteframe>
 
     <div class="md-tabs-content" ref="tabContent">
       <div class="md-tabs-wrapper" ref="tabWrapper">
@@ -31,7 +33,8 @@
   export default {
     props: {
       mdFixed: Boolean,
-      mdCentered: Boolean
+      mdCentered: Boolean,
+      mdElevation: [String, Number]
     },
     data() {
       return {
diff --git a/src/components/mdWhiteframe/mdWhiteframe.vue b/src/components/mdWhiteframe/mdWhiteframe.vue
index 76ddb6b..d97b386 100644
--- a/src/components/mdWhiteframe/mdWhiteframe.vue
+++ b/src/components/mdWhiteframe/mdWhiteframe.vue
@@ -13,7 +13,7 @@
     },
     data() {
       return {
-        elevation: this.mdElevation || 1
+        elevation: this.mdElevation === 0 ? 0 : this.mdElevation || 1
       };
     },
     computed: {
diff --git a/src/docs/pages/Tabs.vue b/src/docs/pages/Tabs.vue
index 73cb48b..aab504d 100644
--- a/src/docs/pages/Tabs.vue
+++ b/src/docs/pages/Tabs.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page-content">
-    <md-tabs class="page-tabs">
+    <md-tabs md-elevation="2" class="page-tabs">
       <md-tab md-label="Examples">
         <md-whiteframe class="cell-phone">
           <md-toolbar v-md-theme="'grey'">
@@ -121,120 +121,6 @@
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, at ullam. Est expedita doloremque facilis quae, debitis corporis blanditiis impedit laborum vero sit in magnam nobis, velit quia, asperiores minima.</p>
       </md-tab>
     </md-tabs>
-
-    <!-- <md-whiteframe md-elevation="2">
-      <md-toolbar class="md-dense">
-        <md-button>Examples</md-button>
-        <md-button>Code</md-button>
-        <md-button>API</md-button>
-      </md-toolbar>
-    </md-whiteframe>
-
-    <div class="main-content">
-      <md-whiteframe class="cell-phone">
-        <md-toolbar v-md-theme="'grey'">
-          <h2 class="md-title">Default</h2>
-        </md-toolbar>
-
-        <section>
-          <md-tabs>
-            <md-tab md-label="Movies">
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
-            </md-tab>
-
-            <md-tab md-label="Music">
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
-            </md-tab>
-
-            <md-tab md-label="Books">
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
-            </md-tab>
-
-            <md-tab md-label="Pictures">
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
-            </md-tab>
-          </md-tabs>
-        </section>
-      </md-whiteframe>
-
-      <md-whiteframe class="cell-phone">
-        <md-toolbar v-md-theme="'grey'">
-          <h2 class="md-title">Fixed</h2>
-        </md-toolbar>
-
-        <section>
-          <md-tabs md-fixed class="md-accent">
-            <md-tab md-label="Movies">
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
-            </md-tab>
-
-            <md-tab md-label="Music">
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
-            </md-tab>
-
-            <md-tab md-label="Books">
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
-            </md-tab>
-
-            <md-tab md-label="Pictures">
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
-            </md-tab>
-          </md-tabs>
-        </section>
-      </md-whiteframe>
-
-      <md-whiteframe class="cell-phone">
-        <md-toolbar v-md-theme="'grey'">
-          <h2 class="md-title">With icons and text</h2>
-        </md-toolbar>
-
-        <section>
-          <md-tabs md-fixed v-md-theme="'teal'">
-            <md-tab md-label="Movies" md-icon="ondemand_video">
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
-            </md-tab>
-
-            <md-tab md-label="Music" md-icon="music_note">
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
-            </md-tab>
-
-            <md-tab md-label="Books" md-icon="books">
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
-            </md-tab>
-
-            <md-tab md-label="Pictures" md-icon="photo">
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
-            </md-tab>
-          </md-tabs>
-        </section>
-      </md-whiteframe>
-
-      <md-whiteframe class="cell-phone">
-        <md-toolbar v-md-theme="'grey'">
-          <h2 class="md-title">Centered with only icon</h2>
-        </md-toolbar>
-
-        <section>
-          <md-tabs md-centered v-md-theme="'green'">
-            <md-tab md-icon="phone">
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
-            </md-tab>
-
-            <md-tab md-icon="favorite">
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
-            </md-tab>
-
-            <md-tab md-icon="near_me">
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
-            </md-tab>
-          </md-tabs>
-        </section>
-      </md-whiteframe>
-    </div> -->
   </div>
 </template>
 
@@ -242,7 +128,7 @@
   .page-tabs {
     flex: 1;
 
-    > .md-tabs-navigation {
+    > .md-whiteframe > .md-tabs-navigation {
       padding-left: 52px;
     }
 
@@ -252,10 +138,9 @@
 
     .cell-phone {
       width: 100%;
-      height: 732px;
       max-width: 412px;
+      height: auto;
       margin-right: 16px;
-      display: inline-block;
       position: relative;
       overflow: hidden;
       border: none;