From dd3b3544a412de3f560624a1fe0e78c019158e7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Wed, 15 May 2019 10:26:03 +0800
Subject: [PATCH] [improvement] CouponList: add less vars

---
 packages/coupon-cell/index.less       |  2 +-
 packages/coupon-list/index.less       | 18 +++++++++---------
 packages/goods-action-icon/index.less | 12 ++++++------
 packages/goods-action/index.less      |  2 +-
 packages/style/var.less               | 21 +++++++++++++++++++++
 5 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/packages/coupon-cell/index.less b/packages/coupon-cell/index.less
index 10430b38d..c7e50c86d 100644
--- a/packages/coupon-cell/index.less
+++ b/packages/coupon-cell/index.less
@@ -2,6 +2,6 @@
 
 .van-coupon-cell {
   &--selected {
-    color: @text-color;
+    color: @coupon-cell-selected-text-color;
   }
 }
diff --git a/packages/coupon-list/index.less b/packages/coupon-list/index.less
index b14365b5f..179a4d772 100644
--- a/packages/coupon-list/index.less
+++ b/packages/coupon-list/index.less
@@ -3,15 +3,15 @@
 .van-coupon-list {
   position: relative;
   height: 100%;
-  background-color: @background-color;
+  background-color: @coupon-list-background-color;
 
   &__field {
-    padding: 7px 15px;
+    padding: @coupon-list-field-padding;
   }
 
   &__exchange {
-    height: 32px;
-    line-height: 30px;
+    height: @coupon-list-exchange-button-height;
+    line-height: @coupon-list-exchange-button-height - 2px;
   }
 
   &__list {
@@ -34,14 +34,14 @@
 
     p {
       margin: 15px 0;
-      color: @gray-dark;
-      font-size: 14px;
-      line-height: 20px;
+      color: @coupon-list-empty-tip-color;
+      font-size: @coupon-list-empty-tip-font-size;
+      line-height: @coupon-list-empty-tip-line-height;
     }
 
     img {
-      width: 200px;
-      height: 200px;
+      width: @coupon-list-empty-image-size;
+      height: @coupon-list-empty-image-size;
     }
   }
 }
diff --git a/packages/goods-action-icon/index.less b/packages/goods-action-icon/index.less
index 00f15adb8..1b6e7a217 100644
--- a/packages/goods-action-icon/index.less
+++ b/packages/goods-action-icon/index.less
@@ -4,10 +4,10 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  min-width: 15%;
-  height: 50px;
-  color: @gray-darker;
-  font-size: 10px;
+  min-width: @goods-action-icon-width;
+  height: @goods-action-icon-height;
+  color: @goods-action-icon-color;
+  font-size: @goods-action-icon-font-size;
   line-height: 1;
   text-align: center;
   background-color: @white;
@@ -17,12 +17,12 @@
   }
 
   &:active {
-    background-color: @active-color;
+    background-color: @goods-action-icon-active-color;
   }
 
   &__icon {
     width: 1em;
     margin: 0 auto 5px;
-    font-size: 20px;
+    font-size: @goods-action-icon-size;
   }
 }
diff --git a/packages/goods-action/index.less b/packages/goods-action/index.less
index 7fdffd760..7ecc676cf 100644
--- a/packages/goods-action/index.less
+++ b/packages/goods-action/index.less
@@ -6,7 +6,7 @@
   bottom: 0;
   left: 0;
   display: flex;
-  background-color: @white;
+  background-color: @goods-action-background-color;
 
   &--safe-area-inset-bottom {
     padding-bottom: constant(safe-area-inset-bottom);
diff --git a/packages/style/var.less b/packages/style/var.less
index 9522a5879..0d4e00a80 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -184,6 +184,18 @@
 @coupon-description-background-color: @background-color-light;
 @coupon-description-border-color: @border-color;
 
+// CouponCell
+@coupon-cell-selected-text-color: @text-color;
+
+// CouponList
+@coupon-list-background-color: @background-color;
+@coupon-list-field-padding: 7px 15px;
+@coupon-list-exchange-button-height: 32px;
+@coupon-list-empty-image-size: 200px;
+@coupon-list-empty-tip-color: @gray-dark;
+@coupon-list-empty-tip-font-size: 14px;
+@coupon-list-empty-tip-line-height: 20px;
+
 // Dialog
 @dialog-width: 85%;
 @dialog-font-size: 16px;
@@ -220,6 +232,15 @@
 @field-error-message-text-color: 12px;
 @field-text-area-min-height: 60px;
 
+// GoodsAction
+@goods-action-background-color: @white;
+@goods-action-icon-width: 15%;
+@goods-action-icon-height: 50px;
+@goods-action-icon-color: @gray-darker;
+@goods-action-icon-size: 20px;
+@goods-action-icon-font-size: 10px;
+@goods-action-icon-active-color: @active-color;
+
 // Info
 @info-size: 16px;
 @info-color: @white;