From acbcd931f633436edce13b6f3b704799d09a39ca Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Wed, 17 Apr 2019 16:42:58 +0800
Subject: [PATCH] [improvement] Field: add less vars (#3168)

---
 packages/field/index.less | 28 ++++++++++++++--------------
 packages/style/var.less   | 14 ++++++++++++++
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/packages/field/index.less b/packages/field/index.less
index 0bb6fb209..f262898e5 100644
--- a/packages/field/index.less
+++ b/packages/field/index.less
@@ -2,7 +2,7 @@
 
 .van-field {
   &__label {
-    max-width: 90px;
+    max-width: @field-label-max-width;
 
     &--center {
       text-align: center;
@@ -25,17 +25,17 @@
     width: 100%;
     resize: none;
     display: block;
-    color: @text-color;
+    color: @field-input-text-color;
     box-sizing: border-box;
     background-color: transparent;
 
     &::placeholder {
-      color: @gray-dark;
+      color: @field-placeholder-text-color;
     }
 
     &:disabled {
       opacity: 1;
-      color: @gray-dark;
+      color: @field-input-disabled-text-color;
       background-color: transparent;
     }
 
@@ -51,7 +51,7 @@
     &[type="date"],
     &[type="time"],
     &[type="datetime-local"] {
-      min-height: 24px;
+      min-height: @cell-line-height;
     }
   }
 
@@ -70,15 +70,15 @@
   }
 
   &__clear {
-    color: @gray;
-    font-size: 16px;
+    color: @field-clear-icon-color;
+    font-size: @field-clear-icon-size;
   }
 
   &__left-icon .van-icon,
   &__right-icon .van-icon {
     display: block;
     min-width: 1em;
-    font-size: 16px;
+    font-size: @field-icon-size;
     line-height: inherit;
   }
 
@@ -87,7 +87,7 @@
   }
 
   &__right-icon {
-    color: @gray-dark;
+    color: @field-right-icon-color;
   }
 
   &__button {
@@ -95,8 +95,8 @@
   }
 
   &__error-message {
-    color: @red;
-    font-size: 12px;
+    color: @field-error-message-color;
+    font-size: @field-error-message-text-color;
     text-align: left;
 
     &--center {
@@ -110,7 +110,7 @@
 
   &--disabled {
     .van-field__control {
-      color: @gray-dark;
+      color: @field-input-disabled-text-color;
     }
   }
 
@@ -118,14 +118,14 @@
     .van-field__control {
       &,
       &::placeholder {
-        color: @red;
+        color: @field-input-error-text-color;
       }
     }
   }
 
   &--min-height {
     .van-field__control {
-      min-height: 60px;
+      min-height: @field-text-area-min-height;
     }
   }
 }
diff --git a/packages/style/var.less b/packages/style/var.less
index bc085ab97..4c9bcf2d9 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -165,6 +165,20 @@
 @dialog-has-title-message-padding-top: 12px;
 @dialog-confirm-button-text-color: @blue;
 
+// Field
+@field-label-max-width: 90px;
+@field-input-text-color: @text-color;
+@field-input-error-text-color: @red;
+@field-input-disabled-text-color: @gray-dark;
+@field-placeholder-text-color: @gray-dark;
+@field-icon-size: 16px;
+@field-clear-icon-size: 16px;
+@field-clear-icon-color: @gray;
+@field-right-icon-color: @gray-dark;
+@field-error-message-color: @red;
+@field-error-message-text-color: 12px;
+@field-text-area-min-height: 60px;
+
 // Info
 @info-size: 16px;
 @info-color: @white;