From e5fc82e96b15b4499ab8c22072fa1bf010f0b5c7 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Wed, 10 Apr 2019 15:58:05 +0800
Subject: [PATCH] [improvement] Tabbar: add less vars (#3124)

---
 packages/style/var.less         | 12 ++++++++++++
 packages/tabbar-item/index.less | 14 +++++++-------
 packages/tabbar/index.less      |  6 +++---
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/style/var.less b/packages/style/var.less
index 28a9f3225..5eb7e33d4 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -210,6 +210,18 @@
 @tabs-line-height: 44px;
 @tabs-card-height: 30px;
 
+// Tabbar
+@tabbar-height: 50px;
+@tabbar-background-color: @white;
+
+// TabbarItem
+@tabbar-item-font-size: 12px;
+@tabbar-item-text-color: @gray-darker;
+@tabbar-item-active-color: @blue;
+@tabbar-item-line-height: 1;
+@tabbar-item-icon-size: 18px;
+@tabbar-item-margin-bottom: 5px;
+
 // Tag
 @tag-padding: .2em .5em;
 @tag-font-size: 10px;
diff --git a/packages/tabbar-item/index.less b/packages/tabbar-item/index.less
index 832095a59..48e73a342 100644
--- a/packages/tabbar-item/index.less
+++ b/packages/tabbar-item/index.less
@@ -3,17 +3,17 @@
 .van-tabbar-item {
   flex: 1;
   display: flex;
-  line-height: 1;
-  font-size: 12px;
-  color: @gray-darker;
+  color: @tabbar-item-text-color;
+  font-size: @tabbar-item-font-size;
+  line-height: @tabbar-item-line-height;
   align-items: center;
   flex-direction: column;
   justify-content: center;
 
   &__icon {
-    font-size: 18px;
     position: relative;
-    margin-bottom: 5px;
+    font-size: @tabbar-item-icon-size;
+    margin-bottom: @tabbar-item-margin-bottom;
 
     .van-icon {
       display: block;
@@ -34,13 +34,13 @@
     }
 
     img {
-      height: 18px;
       display: block;
+      height: @tabbar-item-icon-size;
     }
   }
 
   &--active {
-    color: @blue;
+    color: @tabbar-item-active-color;
   }
 
   .van-info {
diff --git a/packages/tabbar/index.less b/packages/tabbar/index.less
index 35e5170fa..5664ae146 100644
--- a/packages/tabbar/index.less
+++ b/packages/tabbar/index.less
@@ -1,10 +1,10 @@
 @import '../style/var';
 
 .van-tabbar {
-  width: 100%;
-  height: 50px;
   display: flex;
-  background-color: @white;
+  width: 100%;
+  height: @tabbar-height;
+  background-color: @tabbar-background-color;
 
   &--fixed {
     left: 0;