tree.scss in tao_ui-0.2.10

- old
+ new

@@ -1,11 +1,9 @@
 @import 'tao/ui/globals';
 
-$tree-item-height: 2rem !default;
-$tree-item-font-size: 0.875rem !default;
-
 .tao-tree {
+  display: block;
 
   .tao-tree-item {
     display: block;
 
     .tao-tree-item-padding {
@@ -33,25 +31,28 @@
           display: block;
           border-bottom: 1px solid $light-border-color;
           position: absolute;
           left: 0.625rem;
           top: 0;
-          right: 0.5rem;
+          right: 0.6rem;
           bottom: 50%;
         }
       }
     }
 
+    &:first-child[depth='0'] > .tao-tree-item-content .tao-tree-item-padding .padding-item:last-child:before {
+      top: 50%;
+    }
+
     &:last-child > .tao-tree-item-content .tao-tree-item-padding .padding-item:last-child:before {
       bottom: 50%;
     }
 
     & > .tao-tree-item-content {
       display: flex;
       align-items: center;
       height: $tree-item-height;
-      line-height: $tree-item-height;
       font-size: $tree-item-font-size;
 
       .link-toggle-item {
         display: block;
         background: $white-color;
@@ -59,13 +60,14 @@
         height: 1.375rem;
         padding: 0.25rem;
         transition: transform 200ms;
         border: 1px solid $border-color;
         border-radius: 50%;
-        margin: 0 0.75rem 0 0;
+        margin: 0 0.75rem 0 -2rem;
         cursor: pointer;
         visibility: hidden;
+        position: relative;
 
         .icon {
           display: block;
           width: 0.75rem;
           height: 0.75rem;
@@ -109,10 +111,10 @@
       & > .tao-tree-item-content .link-toggle-item {
         visibility: visible;
       }
     }
 
-    &[expanded] {
+    &[expandable][expanded] {
       & > .tao-tree-item-content .link-toggle-item {
         transform: rotate(90deg);
       }
 
       & > .tao-tree-list {