[improvement] optimize single line ellipsis (#334)

* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [bugfix] Search box-sizing wrong

* [Doc] update vant-demo respo

* [Doc] translate theme & demo pages

* [Doc] add Internationalization document

* [bugfix] remove unnecessary props

* [fix] optimize clickoutside

* [new feature] optimize find-parent

* [new feature]: change document title accordinng to language

* [new feature] Pagination code review

* [improvement] adjust icon-font unicode

* [improvement] Icon spinner color inherit

* [improvement] icon default width

* [bugfix] DateTimePicker validate date props

* [bugfix] Tab item text ellipsis

* [improvement] optimize single line ellipsis

packages/steps/index.vue

@@ -7,11 +7,9 @@
         </slot>
       </div>
       <div class="van-steps__message">
-        <div class="van-steps__message-wrapper">
         <div class="van-steps__title" v-text="title" />
         <div class="van-steps__desc" v-text="description" />
       </div>
-      </div>
       <slot name="message-extra" />
     </div>
     <div class="van-steps__items" :class="{ 'van-steps__items--alone': !title && !description }">

packages/vant-css/src/card.css

@@ -64,7 +64,7 @@
     color: $gray-darker;
     font-size: 12px;
     max-height: 20px;
-    @mixin multi-ellipsis 1;
+    @mixin ellipsis;
   }
 
   &__price,

packages/vant-css/src/coupon-list.css

@@ -157,7 +157,8 @@
         margin: 0;
         font-size: 14px;
         font-weight: 300;
-        @mixin multi-ellipsis 1;
+        max-width: 90px;
+        @mixin ellipsis;
       }
     }
 
@@ -191,7 +192,7 @@
       h2,
       span {
         line-height: 1.4;
-        @mixin multi-ellipsis 1;
+        @mixin ellipsis;
       }
     }
 

packages/vant-css/src/mixins/ellipsis.css

@@ -5,3 +5,9 @@
   -webkit-line-clamp: $lines;
   -webkit-box-orient: vertical;
 }
+
+@define-mixin ellipsis {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}

packages/vant-css/src/radio.css

@@ -1,11 +1,13 @@
 @import "./common/var.css";
 
+$van-radio-size: 20px;
+
 .van-radio {
   overflow: hidden;
 
   &__input {
     position: relative;
-    height: 22px;
+    height: $van-radio-size;
     float: left;
   }
 
@@ -13,21 +15,20 @@
     position: absolute;
     top: 0;
     left: 0;
-    width: 22px;
+    width: $van-radio-size;
-    height: 22px;
+    height: $van-radio-size;
     opacity: 0;
     margin: 0;
   }
 
   &__label {
-    line-height: 22px;
+    line-height: $van-radio-size;
     display: block;
     margin-left: 37px;
   }
 
   .van-icon {
-    font-size: 22px;
+    font-size: $van-radio-size;
-    line-height: 1;
   }
 
   .van-icon-checked {

packages/vant-css/src/steps.css

@@ -32,31 +32,24 @@
 
   .van-icon {
     font-size: 40px;
-    line-height: 1;
   }
 
   &__message {
-    display: table;
     height: 40px;
     margin: 15px 0;
-
-    .van-steps__message-wrapper {
-      display: table-cell;
-      vertical-align: middle;
-    }
   }
 
   &__title {
     font-size: 14px;
     color: $text-color;
+    padding-top: 4px;
   }
 
   &__desc {
     font-size: 12px;
     line-height: 1.5;
     color: $gray-dark;
-    max-height: 18px;
+    @mixin ellipsis;
-    @mixin multi-ellipsis 1;
   }
 }
 
@@ -140,7 +133,6 @@
       .van-icon {
         font-size: 12px;
         color: $green;
-        line-height: 1;
         display: block;
       }
     }

packages/vant-css/src/tab.css

@@ -84,7 +84,13 @@
   cursor: pointer;
   text-align: center;
   flex: 1;
-  @mixin multi-ellipsis 1;
+  padding: 0 5px;
+  min-width: 0; /* hack for flex ellipsis */
+
+  span {
+    display: block;
+    @mixin ellipsis;
+  }
 
   &--active {
     color: $red;

packages/vant-css/src/tree-select.css

@@ -22,7 +22,7 @@
     line-height: 44px;
     padding: 0 15px;
     background-color: $white;
-    @mixin multi-ellipsis 1;
+    @mixin ellipsis;
 
     &--active {
       background-color: $background-color;
@@ -41,7 +41,7 @@
     line-height: 44px;
     padding-left: 5px;
     padding-right: 18px;
-    @mixin multi-ellipsis 1;
+    @mixin ellipsis;
     
     &--active {
       color: $button-danger-background-color;