From d18bc97debc57a982bdee76ab800db430378f3db Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Wed, 19 Apr 2017 20:11:18 +0800
Subject: [PATCH] fix mobile nav style

---
 docs/examples-dist/button.vue          |  2 +-
 docs/examples-dist/datetime-picker.vue | 12 +++++--
 docs/examples-dist/picker.vue          |  4 +--
 docs/examples-docs/button.md           |  2 +-
 docs/src/components/mobile-nav.vue     | 49 ++++++++++++++++----------
 5 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/docs/examples-dist/button.vue b/docs/examples-dist/button.vue
index 5304705f2..e35b0c13d 100644
--- a/docs/examples-dist/button.vue
+++ b/docs/examples-dist/button.vue
@@ -57,7 +57,7 @@
   </van-col>
 </van-row>
 
-              </example-block><example-block title="">
+              </example-block><example-block title="页面底部操作按钮">
                 <van-row>
   <van-col span="24">
     <van-button type="primary" bottom-action="">立即购买</van-button>
diff --git a/docs/examples-dist/datetime-picker.vue b/docs/examples-dist/datetime-picker.vue
index 6f099f3e2..a3eba9767 100644
--- a/docs/examples-dist/datetime-picker.vue
+++ b/docs/examples-dist/datetime-picker.vue
@@ -1,9 +1,17 @@
 <template><section class="demo-datetime"><h1 class="demo-title">Datetime Picker 时间选择</h1><example-block title="基础用法">
-                <zan-datetime-picker v-model="currentDate" type="datetime" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">  
-</zan-datetime-picker>
+                <van-datetime-picker v-model="currentDate" type="datetime" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">  
+</van-datetime-picker>
 
 
 
+              </example-block><example-block title="选择日期">
+                <van-datetime-picker v-model="currentDate" type="date" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">  
+</van-datetime-picker>
+
+              </example-block><example-block title="选择时间">
+                <van-datetime-picker v-model="currentDate" type="time" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">  
+</van-datetime-picker>
+
               </example-block></section></template>
 
 <script>
diff --git a/docs/examples-dist/picker.vue b/docs/examples-dist/picker.vue
index c36b8e07a..e9be813e4 100644
--- a/docs/examples-dist/picker.vue
+++ b/docs/examples-dist/picker.vue
@@ -1,10 +1,10 @@
 <template><section class="demo-picker"><h1 class="demo-title">Picker 选择器</h1><example-block title="基础用法">
-                <zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
+                <van-picker :columns="pickerColumns" @change="handlePickerChange"></van-picker>
 
 
 
               </example-block><example-block title="带toolbar的Picker">
-                <zan-picker :columns="pickerColumns" show-toolbar="" @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></zan-picker>
+                <van-picker :columns="pickerColumns" show-toolbar="" @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></van-picker>
 
 
 
diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md
index 81b2f5246..6f5117c4b 100644
--- a/docs/examples-docs/button.md
+++ b/docs/examples-docs/button.md
@@ -143,7 +143,7 @@ export default {
 
 一般用于`fixed`在底部的区域或是`popup`弹层的底部，一般只使用`primary`和`normal`两种状态。
 
-:::demo 
+:::demo 页面底部操作按钮
 ```html 
 <van-row>
   <van-col span="24">
diff --git a/docs/src/components/mobile-nav.vue b/docs/src/components/mobile-nav.vue
index 917e0d8b2..2e4e4a28e 100644
--- a/docs/src/components/mobile-nav.vue
+++ b/docs/src/components/mobile-nav.vue
@@ -8,22 +8,24 @@
       @click="isOpen = !isOpen">
       {{group.groupName}}
     </div>
-    <ul class="mobile-nav-group__list" :class="{ 'mobile-nav-group__list--open': isOpen }">
-      <template v-for="navItem in group.list">
-        <li
-          class="mobile-nav-group__title"
-          v-if="!navItem.disabled">
-          <router-link
-            active-class="active"
-            :to="base + navItem.path">
-            <p>
-              {{ navItem.title }}
-            </p>
-          </router-link>
-          <zan-icon name="arrow"></zan-icon>
-        </li>
-      </template>
-    </ul>
+    <div class="mobile-nav-group__list-wrapper" :class="{ 'mobile-nav-group__list-wrapper--open': isOpen }">
+      <ul class="mobile-nav-group__list" :class="{ 'mobile-nav-group__list--open': isOpen }">
+        <template v-for="navItem in group.list">
+          <li
+            class="mobile-nav-group__title"
+            v-if="!navItem.disabled">
+            <router-link
+              active-class="active"
+              :to="base + navItem.path">
+              <p>
+                {{ navItem.title }}
+              </p>
+            </router-link>
+            <van-icon name="arrow"></van-icon>
+          </li>
+        </template>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -86,7 +88,7 @@ export default {
         }
       }
 
-      .zan-icon-arrow {
+      .van-icon-arrow {
         position: absolute;
         font-size: 12px;
         line-height: 1;
@@ -95,15 +97,24 @@ export default {
       }
     }
 
-    @e list {
+    @e list-wrapper {
       height: 0;
-      transition: height .5s ease-out;
+      overflow: hidden;
 
       @m open {
         height: auto;
       }
     }
 
+    @e list {
+      transform: translateY(-50%);
+      transition: transform .2s ease-out;
+
+      @m open {
+        transform: translateY(0);
+      }
+    }
+
     li {
       list-style: none;
     }