fix: component style should not depend on reset.css

docs/examples-docs/steps.md

@@ -12,6 +12,13 @@
   .van-steps__message + p {
     margin-bottom: 10px;
   }
+
+  p,
+  h3 {
+    margin: 0;
+    font-size: inherit;
+    font-weight: normal;
+  }
 }
 </style>
 

docs/src/components/demo-list.vue

@@ -29,33 +29,33 @@ export default {
 </script>
 
 <style>
-  .side-nav {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 90px 15px 20px;
-    position: relative;
-    z-index: 1;
+.side-nav {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 40px 15px 20px;
+  position: relative;
+  z-index: 1;
 
-    .zanui-title,
-    .zanui-desc {
-      text-align: center;
-      font-weight: normal;
-      user-select: none;
-    }
-
-    .zanui-title {
-      padding-top: 40px;
-      height: 0;
-      overflow: hidden;
-      background: url(https://img.yzcdn.cn/upload_files/2017/04/20/FjwR1mraVIqtHWb8YWDW_YzQ_Kh2.png) center center no-repeat;
-      background-size: 156px 40px;
-      margin-bottom: 10px;
-    }
-
-    .zanui-desc {
-      font-size: 14px;
-      color: #666;
-      margin-bottom: 50px;
-    }
+  .zanui-title,
+  .zanui-desc {
+    text-align: center;
+    font-weight: normal;
+    user-select: none;
   }
+
+  .zanui-title {
+    padding-top: 40px;
+    height: 0;
+    overflow: hidden;
+    background: url(https://img.yzcdn.cn/upload_files/2017/04/20/FjwR1mraVIqtHWb8YWDW_YzQ_Kh2.png) center center no-repeat;
+    background-size: 156px 40px;
+    margin-bottom: 10px;
+  }
+
+  .zanui-desc {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 50px;
+  }
+}
 </style>

packages/actionsheet/index.vue

@@ -2,7 +2,7 @@
   <transition name="van-actionsheet-float">
     <div :class="['van-actionsheet', { 'van-actionsheet--withtitle': title }]" v-show="value">
       <div class="van-actionsheet__header van-hairline--top-bottom" v-if="title">
-        <h3 v-text="title" />
+        <div v-text="title" />
         <van-icon name="close" @click.stop="$emit('input', false)" />
       </div>
       <ul v-if="!title" class="van-actionsheet__list">

packages/card/index.vue

@@ -8,14 +8,14 @@
     <div class="van-card__content">
       <slot name="title">
         <div class="van-card__row" v-if="title || price !== undefined">
-          <h4 v-if="title" class="van-card__title">{{ title }}</h4>
-          <p v-if="price !== undefined" class="van-card__price">¥ {{ price }}</p>
+          <div v-if="title" class="van-card__title">{{ title }}</div>
+          <div v-if="price !== undefined" class="van-card__price">¥ {{ price }}</div>
         </div>
       </slot>
       <slot name="desc">
         <div class="van-card__row" v-if="desc || num !== undefined">
-          <p v-if="desc" class="van-card__desc">{{ desc }}</p>
-          <p v-if="num !== undefined" class="van-card__num">x {{ num }}</p>
+          <div v-if="desc" class="van-card__desc">{{ desc }}</div>
+          <div v-if="num !== undefined" class="van-card__num">x {{ num }}</div>
         </div>
       </slot>
       <slot name="tags"></slot>

packages/number-keyboard/index.vue

@@ -10,9 +10,9 @@
       @touchcancel="blurKey"
       @animationend="onAnimationEnd"
     >
-      <h3 class="van-number-keyboard__title van-hairline--top">
+      <div class="van-number-keyboard__title van-hairline--top">
         <span>{{ title }}</span>
-      </h3>
+      </div>
       <i 
         v-for="(key, index) in keys" 
         v-text="key"

packages/panel/index.vue

@@ -2,7 +2,7 @@
   <div class="van-panel van-hairline--top-bottom">
     <div class="van-panel__header van-hairline--bottom">
       <slot name="header">
-        <h4 class="van-panel__title" v-text="title"></h4>
+        <div class="van-panel__title" v-text="title"></div>
         <span class="van-panel__desc" v-if="desc" v-text="desc"></span>
         <span class="van-panel__status" v-if="status" v-text="status"></span>
       </slot>

packages/picker/index.vue

@@ -4,7 +4,7 @@
       <slot>
         <a href="javascript:void(0)" class="van-picker__cancel" @click="handlePickerCancel">取消</a>
         <a href="javascript:void(0)" class="van-picker__confirm" @click="handlePickerConfirm">完成</a>
-        <p v-if="title" class="van-picker__title">{{ title }}</p>
+        <div v-if="title" class="van-picker__title">{{ title }}</div>
       </slot>
     </div>
     <div class="van-picker__columns" :class="['van-picker__columns--' + columns.length]">

packages/steps/index.vue

@@ -8,8 +8,8 @@
       </div>
       <div class="van-steps__message">
         <div class="van-steps__message-wrapper">
-          <h4 class="van-steps__title" v-text="title"></h4>
-          <p class="van-steps__desc" v-text="description"></p>
+          <div class="van-steps__title" v-text="title"></div>
+          <div class="van-steps__desc" v-text="description"></div>
         </div>
       </div>
       <slot name="message-extra">

packages/vant-css/src/base.css

@@ -6,4 +6,3 @@
 @import "./common/normalize.css";
 @import "./common/hairline.css";
 @import "./common/animation.css";
-

packages/vant-css/src/common/normalize.css

@@ -6,6 +6,10 @@ html {
   -webkit-tap-highlight-color: transparent;
 }
 
+body {
+  margin: 0;
+}
+
 a {
   text-decoration: none;
 }

packages/vant-css/src/goods-action.css

@@ -17,6 +17,7 @@
     height: 50px;
     font-size: 10px;
     min-width: 15%;
+    line-height: 1;    
     text-align: center;
     background-color: $white;
     flex-direction: column;