[improvement] Progress、Search: add less vars

packages/progress/index.less

@@ -2,9 +2,9 @@
 
 .van-progress {
   position: relative;
-  height: 4px;
+  height: @progress-height;
-  background: @gray-light;
+  background: @progress-background-color;
-  border-radius: 4px;
+  border-radius: @progress-height;
 
   &__portion {
     position: absolute;
@@ -24,12 +24,12 @@
     right: 0;
     box-sizing: border-box;
     min-width: 2em;
-    padding: 0 5px;
+    padding: @progress-pivot-padding;
-    font-size: 10px;
+    font-size: @progress-pivot-font-size;
-    line-height: 1.6;
+    line-height: @progress-pivot-line-height;
     text-align: center;
     word-break: keep-all;
-    background-color: @gray-light;
+    background-color: @progress-pivot-background-color;
     border-radius: 1em;
     transform: translate(100%, -50%);
   }

packages/pull-refresh/index.less

@@ -10,14 +10,14 @@
 
   &__head {
     position: absolute;
-    top: -50px;
+    top: -@pull-refresh-head-height;
     left: 0;
     width: 100%;
-    height: 50px;
+    height: @pull-refresh-head-height;
     overflow: hidden;
-    color: @gray-dark;
+    color: @pull-refresh-head-text-color;
-    font-size: 14px;
+    font-size: @pull-refresh-head-font-size;
-    line-height: 50px;
+    line-height: @pull-refresh-head-height;
     text-align: center;
   }
 }

packages/search/index.less

@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  padding: 10px 16px;
+  padding: @search-padding;
 
   &__content {
     display: flex;
@@ -14,15 +14,15 @@
     border-radius: 2px;
 
     &--round {
-      border-radius: 17px;
+      border-radius: @search-input-height / 2;
     }
   }
 
   &__label {
-    padding: 0 5px;
+    padding: @search-label-padding;
-    color: @text-color;
+    color: @search-label-color;
-    font-size: 14px;
+    font-size: @search-label-font-size;
-    line-height: 34px;
+    line-height: @search-input-height;
   }
 
   .van-cell {
@@ -31,7 +31,7 @@
     background-color: transparent;
 
     &__left-icon {
-      color: @gray-dark;
+      color: @search-left-icon-color;
     }
   }
 
@@ -49,10 +49,10 @@
   }
 
   &__action {
-    padding: 0 10px;
+    padding: @search-action-padding;
-    color: @text-color;
+    color: @search-action-text-color;
-    font-size: 14px;
+    font-size: @search-action-font-size;
-    line-height: 34px;
+    line-height: @search-input-height;
 
     &:active {
       background-color: @active-color;

packages/style/var.less

@@ -363,6 +363,19 @@
 @popup-background-color: @white;
 @popup-transition: .3s ease-out;
 
+// Progress
+@progress-height: 4px;
+@progress-background-color: @gray-light;
+@progress-pivot-padding: 0 5px;
+@progress-pivot-font-size: 10px;
+@progress-pivot-line-height: 1.6;
+@progress-pivot-background-color: @gray-light;
+
+// PullRefresh
+@pull-refresh-head-height: 50px;
+@pull-refresh-head-font-size: 14px;
+@pull-refresh-head-text-color: @gray-dark;
+
 // Radio
 @radio-size: 20px;
 @radio-border-color: @gray-light;
@@ -377,6 +390,18 @@
 // Rate
 @rate-horizontal-padding: 2px;
 
+// Search
+@search-padding: 10px 16px;
+@search-background-color: #f7f8fA;
+@search-input-height: 34px;
+@search-label-padding: 0 5px;
+@search-label-color: @text-color;
+@search-label-font-size: 14px;
+@search-left-icon-color: @gray-dark;
+@search-action-padding: 0 10px;
+@search-action-text-color: @text-color;
+@search-action-font-size: 14px;
+
 // Sidebar
 @sidebar-width: 85px;
 
@@ -409,6 +434,30 @@
 @slider-button-background-color: @white;
 @slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
 
+// Stepper
+@stepper-active-color: #e8e8e8;
+@stepper-background-color: @active-color;
+@stepper-button-disabled-color: #f7f8fa;
+@stepper-input-disabled-color: @active-color;
+@stepper-border-radius: 4px;
+
+// SubmitBar
+@submit-bar-height: 50px;
+@submit-bar-z-index: 100;
+@submit-bar-background-color: @white;
+@submit-bar-button-width: 110px;
+@submit-bar-price-color: @red;
+@submit-bar-price-font-size: 18px;
+@submit-bar-currency-font-size: 14px;
+@submit-bar-text-color: @text-color;
+@submit-bar-text-font-size: 14px;
+@submit-bar-tip-padding: 10px;
+@submit-bar-tip-font-size: 12px;
+@submit-bar-tip-line-height: 1.5;
+@submit-bar-tip-color: #f56723;
+@submit-bar-tip-background-color: #fff7cc;
+@submit-bar-tip-icon-size: 12px;
+
 // Swipe
 @swipe-indicator-size: 6px;
 @swipe-indicator-margin: 10px;
@@ -477,33 +526,6 @@
 @toast-position-top-distance: 50px;
 @toast-position-bottom-distance: 50px;
 
-// Search
-@search-background-color: #f7f8fA;
-
-// Stepper
-@stepper-active-color: #e8e8e8;
-@stepper-background-color: @active-color;
-@stepper-button-disabled-color: #f7f8fa;
-@stepper-input-disabled-color: @active-color;
-@stepper-border-radius: 4px;
-
-// SubmitBar
-@submit-bar-height: 50px;
-@submit-bar-z-index: 100;
-@submit-bar-background-color: @white;
-@submit-bar-button-width: 110px;
-@submit-bar-price-color: @red;
-@submit-bar-price-font-size: 18px;
-@submit-bar-currency-font-size: 14px;
-@submit-bar-text-color: @text-color;
-@submit-bar-text-font-size: 14px;
-@submit-bar-tip-padding: 10px;
-@submit-bar-tip-font-size: 12px;
-@submit-bar-tip-line-height: 1.5;
-@submit-bar-tip-color: #f56723;
-@submit-bar-tip-background-color: #fff7cc;
-@submit-bar-tip-icon-size: 12px;
-
 // TreeSelect
 @tree-select-font-size: 14px;
 @tree-select-nav-background-color: @background-color-light;