[improvement] Badge: update info style (#2122)

packages/badge/demo/index.vue

@@ -16,7 +16,7 @@
         />
         <van-badge
           :title="$t('title')"
-          info="199"
+          info="99+"
         />
       </van-badge-group>
     </demo-block>

packages/badge/en-US.md

@@ -18,7 +18,7 @@ Use `active-key` prop to set index of chosen 'badge'
   <van-badge title="Title" />
   <van-badge title="Title" info="8" />
   <van-badge title="Title" info="99" />
-  <van-badge title="Title" info="199" />
+  <van-badge title="Title" info="99+" />
 </van-badge-group>
 ```
 

packages/badge/index.less

@@ -13,6 +13,10 @@
   background-color: @background-color;
   border-left: 3px solid transparent;
 
+  &__text {
+    position: relative;
+  }
+
   &:active {
     background-color: @active-color;
   }
@@ -36,11 +40,7 @@
     }
   }
 
-  &__info {
+  .van-info {
-    top: 7px;
+    right: 4px;
-    left: auto;
-    right: 5px;
-    font-size: 12px;
-    transform: scale(0.9);
   }
 }

packages/badge/index.vue

@@ -4,11 +4,13 @@
     :href="url"
     @click="onClick"
   >
+    <div :class="b('text')">
+      {{ title }}
       <van-info
         :info="info"
         :class="b('info')"
       />
-    {{ title }}
+    </div>
   </a>
 </template>
 

packages/badge/test/__snapshots__/demo.spec.js.snap

@@ -5,26 +5,34 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-hairline--top-bottom van-badge-group">
       <a class="van-badge van-badge--select van-hairline">
-        <!---->
+        <div class="van-badge__text">
           标签名称
+          <!---->
+        </div>
       </a>
       <a class="van-badge van-hairline">
+        <div class="van-badge__text">
+          标签名称
           <div class="van-info van-badge__info">
             8
           </div>
-        标签名称
+        </div>
       </a>
       <a class="van-badge van-hairline">
+        <div class="van-badge__text">
+          标签名称
           <div class="van-info van-badge__info">
             99
           </div>
-        标签名称
+        </div>
       </a>
       <a class="van-badge van-hairline">
-        <div class="van-info van-badge__info">
+        <div class="van-badge__text">
-          199
-        </div>
           标签名称
+          <div class="van-info van-badge__info">
+            99+
+          </div>
+        </div>
       </a>
     </div>
   </div>

packages/badge/zh-CN.md

@@ -19,7 +19,7 @@ Vue.use(BadgeGroup);
   <van-badge title="标签名称" />
   <van-badge title="标签名称" info="8" />
   <van-badge title="标签名称" info="99" />
-  <van-badge title="标签名称" info="199" />
+  <van-badge title="标签名称" info="99+" />
 </van-badge-group>
 ```
 

packages/info/index.less

@@ -1,19 +1,30 @@
 @import '../style/var';
 
+@van-info-size: 16px;
+@van-info-color: @white;
+@van-info-padding: 0 3px;
+@van-info-font-size: 12px;
+@van-info-font-weight: 500;
+@van-info-border-width: 1px;
+@van-info-background-color: @red;
+@van-info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
+
 .van-info {
-  left: 100%;
-  top: -.5em;
-  color: @white;
-  font-size: .6em;
-  font-weight: 500;
-  padding: 0 .25em;
-  text-align: center;
-  min-width: 1.4em;
-  line-height: 1.4;
   position: absolute;
-  border-radius: .7em;
+  right: 0;
+  top: -@van-info-size / 2;
+  color: @van-info-color;
+  font-size: @van-info-font-size;
+  font-weight: @van-info-font-weight;
+  font-family: @van-info-font-family;
+  text-align: center;
   box-sizing: border-box;
-  background-color: @red;
+  padding: @van-info-padding;
-  transform: translateX(-50%);
+  min-width: @van-info-size;
-  font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
+  line-height: @van-info-size - @van-info-border-width * 2;
+  border: @van-info-border-width solid @white;
+  border-radius: @van-info-size;
+  background-color: @van-info-background-color;
+  transform: translateX(50%);
+  transform-origin: 100%;
 }