From df42aad53fbcc831fe1e69067cd54f76586bd021 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Thu, 16 May 2019 16:57:45 +0800
Subject: [PATCH] [improvement] NumberKeyboard: add less vars

---
 packages/number-keyboard/index.less | 32 ++++++++++++++---------------
 packages/style/var.less             | 12 +++++++++++
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/packages/number-keyboard/index.less b/packages/number-keyboard/index.less
index 9b01f8a42..5569f8bc1 100644
--- a/packages/number-keyboard/index.less
+++ b/packages/number-keyboard/index.less
@@ -5,16 +5,16 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  background-color: @white;
+  background-color: @number-keyboard-background-color;
   animation-timing-function: ease-out;
   user-select: none;
 
   &__title {
     position: relative;
-    height: 30px;
-    color: @gray-darker;
-    font-size: 14px;
-    line-height: 30px;
+    height: @number-keyboard-title-height;
+    color: @number-keyboard-title-color;
+    font-size: @number-keyboard-title-font-size;
+    line-height: @number-keyboard-title-height;
     text-align: center;
 
     &-left {
@@ -30,12 +30,12 @@
   &__close {
     position: absolute;
     right: 0;
-    padding: 0 15px;
-    color: @blue;
-    font-size: 14px;
+    padding: @number-keyboard-close-padding;
+    color: @number-keyboard-close-color;
+    font-size: @number-keyboard-close-font-size;
 
     &:active {
-      background-color: @active-color;
+      background-color: @number-keyboard-key-active-color;
     }
   }
 
@@ -63,7 +63,7 @@
   display: inline-block;
   width: 100% / 3;
   height: @number-keyboard-key-height;
-  font-size: 24px;
+  font-size: @number-keyboard-key-font-size;
   font-style: normal;
   line-height: @number-keyboard-key-height;
   text-align: center;
@@ -85,19 +85,19 @@
 
   &--blue,
   &--delete {
-    font-size: 16px;
+    font-size: @number-keyboard-delete-font-size;
   }
 
   &--blue {
-    color: @white;
-    background-color: @blue;
+    color: @number-keyboard-button-text-color;
+    background-color: @number-keyboard-button-background-color;
 
     &.van-key--active {
-      background-color: @blue;
+      background-color: @number-keyboard-button-background-color;
     }
 
     &::after {
-      border-color: @blue;
+      border-color: @number-keyboard-button-background-color;
     }
   }
 
@@ -106,6 +106,6 @@
   }
 
   &--active {
-    background-color: @active-color;
+    background-color: @number-keyboard-key-active-color;
   }
 }
diff --git a/packages/style/var.less b/packages/style/var.less
index 572da03b2..cd53e9687 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -302,8 +302,20 @@
 @notify-line-height: 20px;
 
 // NumberKeyboard
+@number-keyboard-background-color: @white;
 @number-keyboard-key-height: 54px;
 @number-keyboard-key-background: #ebedf0;
+@number-keyboard-key-font-size: 24px;
+@number-keyboard-key-active-color: @active-color;
+@number-keyboard-delete-font-size: 16px;
+@number-keyboard-title-color: @gray-darker;
+@number-keyboard-title-height: 30px;
+@number-keyboard-title-font-size: 14px;
+@number-keyboard-close-padding: 0 15px;
+@number-keyboard-close-color: @blue;
+@number-keyboard-close-font-size: 14px;
+@number-keyboard-button-text-color: @white;
+@number-keyboard-button-background-color: @blue;
 
 // Overlay
 @overlay-background-color: rgba(0, 0, 0, 0.7);