Improve tree showLine styles

components/style/themes/default.less

@@ -266,10 +266,6 @@
 @rate-star-color: #f5a623;
 @rate-star-bg: #e9e9e9;
 
-// Tree
-// ---
-@tree-icon-color: #999;
-
 // Card
 // ---
 @card-head-height: 48px;

components/tree-select/style/index.less

@@ -77,13 +77,13 @@
         &.@{select-tree-prefix-cls}-center_open,
         &.@{select-tree-prefix-cls}-bottom_open,
         &.@{select-tree-prefix-cls}-noline_open {
-          .antTreeSwitcherIcon("open");
+          .antTreeSwitcherIcon();
         }
         &.@{select-tree-prefix-cls}-roots_close,
         &.@{select-tree-prefix-cls}-center_close,
         &.@{select-tree-prefix-cls}-bottom_close,
         &.@{select-tree-prefix-cls}-noline_close {
-          .antTreeSwitcherIcon("close");
+          .antTreeSwitcherIcon();
         }
       }
     }

components/tree/demo/customized-icon.md

@@ -56,16 +56,10 @@ ReactDOM.render(<Demo />, mountNode);
 }
 #components-tree-demo-customized-icon .ant-tree-iconEle::after {
   font-size: 12px;
-  font-size: 8px \9;
-  transform: scale(0.66666667) rotate(0deg);
-  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
   zoom: 1;
   display: inline-block;
   font-family: 'anticon';
   text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: bold;
   color: #999;
   transition: transform .3s ease;
   margin-top: 2px;

components/tree/style/index.less

@@ -72,7 +72,8 @@
     }
     span {
       &.@{tree-prefix-cls}-checkbox {
-        margin: 0 4px 0 0;
+        margin: 0 4px 0 2px;
+        vertical-align: middle;
       }
       &.@{tree-prefix-cls}-switcher,
       &.@{tree-prefix-cls}-iconEle {
@@ -102,13 +103,17 @@
         &.@{tree-prefix-cls}-center_open,
         &.@{tree-prefix-cls}-bottom_open,
         &.@{tree-prefix-cls}-noline_open {
-          .antTreeSwitcherIcon("open");
+          .antTreeSwitcherIcon();
         }
         &.@{tree-prefix-cls}-roots_close,
         &.@{tree-prefix-cls}-center_close,
         &.@{tree-prefix-cls}-bottom_close,
         &.@{tree-prefix-cls}-noline_close {
-          .antTreeSwitcherIcon("close");
+          .antTreeSwitcherIcon();
+          .ie-rotate(3);
+          &:after {
+            transform: rotate(270deg) scale(0.59);
+          }
         }
       }
     }
@@ -159,7 +164,19 @@
         &.@{tree-prefix-cls}-switcher {
           background: @component-background;
           &.@{tree-prefix-cls}-switcher-noop {
-            .antTreeSwitcherIcon("doc");
+            .antTreeShowLineIcon("tree-doc-icon");
+          }
+          &.@{tree-prefix-cls}-roots_open,
+          &.@{tree-prefix-cls}-center_open,
+          &.@{tree-prefix-cls}-bottom_open,
+          &.@{tree-prefix-cls}-noline_open {
+            .antTreeShowLineIcon("tree-showline-open-icon");
+          }
+          &.@{tree-prefix-cls}-roots_close,
+          &.@{tree-prefix-cls}-center_close,
+          &.@{tree-prefix-cls}-bottom_close,
+          &.@{tree-prefix-cls}-noline_close {
+            .antTreeShowLineIcon("tree-showline-close-icon");
           }
         }
       }
@@ -171,7 +188,7 @@
       height: 100%;
       position: absolute;
       left: 6px;
-      margin: 16px 0;
+      margin: 18px 0;
     }
   }
 }

components/tree/style/mixin.less

@@ -1,16 +1,29 @@
 @import "../../style/mixins/index";
 
-@open: "\e621";
-@close: "\e645";
-@doc: "\e664";
+@tree-default-open-icon: "\e606";
+@tree-showline-open-icon: "\e621";
+@tree-showline-close-icon: "\e645";
+@tree-doc-icon: "\e664";
+@tree-showline-icon-color: @text-color-secondary;
 
-.antTreeSwitcherIcon(@type) {
+.antTreeSwitcherIcon(@type: "tree-default-open-icon") {
   &:after {
-    .iconfont-size-under-12px(8px);
+    .iconfont-size-under-12px(7px);
     display: inline-block;
     .iconfont-font(@@type);
     font-weight: bold;
-    color: @tree-icon-color;
+    color: @text-color;
+    transition: transform .3s ease;
+  }
+}
+
+.antTreeShowLineIcon(@type) {
+  &:after {
+    .iconfont-size-under-12px(12px);
+    display: inline-block;
+    .iconfont-font(@@type);
+    font-weight: normal;
+    color: @tree-showline-icon-color;
     transition: transform .3s ease;
   }
 }