From ee72cd5b9f621b22635988e5f529ea3b368a9be4 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Tue, 31 Oct 2017 16:53:36 +0800
Subject: [PATCH] Tree: expand hot area of arrow icon

---
 packages/theme-chalk/src/tree.scss | 13 ++++---------
 packages/tree/src/tree-node.vue    |  2 +-
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/theme-chalk/src/tree.scss b/packages/theme-chalk/src/tree.scss
index 27c3345c5..4018ea441 100644
--- a/packages/theme-chalk/src/tree.scss
+++ b/packages/theme-chalk/src/tree.scss
@@ -33,7 +33,7 @@
     cursor: pointer;
 
     & > .el-tree-node__expand-icon {
-      margin: 0 8px;
+      padding: 6px;
     }
     & > .el-checkbox {
       margin-right: 8px;
@@ -45,13 +45,8 @@
 
   @include e(expand-icon) {
     cursor: pointer;
-    width: 0;
-    height: 0;
-    margin-left: 10px;
-    border: 3.5px solid transparent;
-    border-right-width: 0;
-    border-left-color: $--tree-expand-icon-color;
-    border-left-width: 6px;
+    color: $--tree-expand-icon-color;
+    font-size: 12px;
 
     transform: rotate(0deg);
     transition: transform 0.3s ease-in-out;
@@ -61,7 +56,7 @@
     }
 
     &.is-leaf {
-      border-color: transparent;
+      color: transparent;
       cursor: default;
     }
   }
diff --git a/packages/tree/src/tree-node.vue b/packages/tree/src/tree-node.vue
index a7e893e84..b068c304e 100644
--- a/packages/tree/src/tree-node.vue
+++ b/packages/tree/src/tree-node.vue
@@ -10,7 +10,7 @@
     <div class="el-tree-node__content"
       :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
       <span
-        class="el-tree-node__expand-icon"
+        class="el-tree-node__expand-icon el-icon-caret-right"
         @click.stop="handleExpandIconClick"
         :class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }">
       </span>