@aloudata/aloudata-design 1.10.14 → 2.0.0-beta.10

package/dist/Tree/style/index.less

@@ -6,21 +6,25 @@
 @import './reset.less';
 @import './checkbox.less';
 
-@tree-font-size-large: 13px;
-@tree-padding-large: 6px 4px;
+@tree-font-size-large: 14px;
+@tree-padding-large: 6px;
 @tree-line-height-large: 20px;
 
 @tree-font-size-default: 12px;
 @tree-padding-default: 4px;
 @tree-line-height-default: 16px;
 .aldCheckboxFn();
-
+@tree-prefix-cls: ~'@{ald-prefix}-tree';
 .@{tree-prefix-cls} {
   .antTreeFn(@tree-prefix-cls);
 }
 
 .ald-tree {
-  padding: 3px 0;
+  padding: 0;
+
+  &.ald-draggable-tree {
+    padding: 3px 0;
+  }
 
   .ald-tree-treenode.ald-tree-treenode-draggable {
     .ald-tree-draggable-icon {
@@ -34,8 +38,7 @@
   align-items: center;
   font-size: @tree-font-size-default;
   font-weight: 400;
-  color: #171717;
-  width: 100%;
+  color: var(--alias-colors-text-default, #1f2937);
 
   .ald-tree-draggable-icon {
     display: inline-flex;
@@ -59,6 +62,7 @@
     flex: 1;
     display: flex;
     align-items: center;
+    border-radius: 4px;
     // stylelint-disable-next-line
     .ald-tree-iconEle {
       display: inline-flex;
@@ -71,11 +75,9 @@
 
     .ald-tree-title {
       line-height: @tree-line-height-default;
-      border-radius: 2px;
       display: inline-flex;
       align-items: center;
       justify-content: space-between;
-      color: #171717;
       flex: 1;
 
       .ald-tree-tab-leader {
@@ -87,13 +89,23 @@
     }
 
     &:hover {
-      background: var(--colors-gray-97, #f8f8f8);
-      mix-blend-mode: multiply;
+      background: var(--alias-colors-bg-interaction-hover, rgba(0, 0, 0, 0.05));
     }
 
     &.ald-tree-node-selected {
-      border-radius: 2px;
-      background: var(--colors-blue-100, #f0f6ff);
+      background: var(--alias-colors-bg-selected-default, #e8f2fe);
+      color: var(--alias-colors-text-selected, #126fdd);
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 16px;
+    }
+  }
+
+  &.ald-tree-treenode-disabled {
+    .ald-tree-node-content-wrapper {
+      &:hover {
+        background: inherit;
+      }
     }
   }
 }
@@ -109,10 +121,17 @@
 
     .ald-tree-node-content-wrapper {
       padding: @tree-padding-large;
+      border-radius: var(--alias-radius-75, 6px);
 
       .ald-tree-title {
         line-height: @tree-line-height-large;
       }
+
+      &.ald-tree-node-selected {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+      }
     }
   }
 }

package/dist/Tree/style/mixin.less

@@ -68,7 +68,7 @@
           bottom: 0;
           border: 1px solid @primary-color;
           opacity: 0;
-          animation: ant-tree-node-fx-do-not-use 0.3s;
+          animation: ald-tree-node-fx-do-not-use 0.3s;
           animation-play-state: running;
           animation-fill-mode: forwards;
           content: '';
@@ -165,7 +165,7 @@
       display: inline-block;
       width: 100%;
       height: 100%;
-      // https://github.com/ant-design/ant-design/issues/31884
+
       &::before {
         position: absolute;
         top: 0;
@@ -229,7 +229,6 @@
     }
   }
 
-  // https://github.com/ant-design/ant-design/issues/28217
   &-unselectable &-node-content-wrapper:hover {
     background-color: transparent;
   }
@@ -278,7 +277,6 @@
       background: @component-background;
 
       &-line-icon {
-        // https://github.com/ant-design/ant-design/issues/32813
         vertical-align: -0.15em;
       }
     }
@@ -297,7 +295,7 @@
   }
 }
 
-@keyframes ant-tree-node-fx-do-not-use {
+@keyframes ald-tree-node-fx-do-not-use {
   0% {
     opacity: 0;
   }

package/dist/Tree/style/reset.less

@@ -9,3 +9,18 @@
   list-style: none;
   font-feature-settings: @font-feature-settings-base;
 }
+
+.ald-tree-list-scrollbar {
+  width: 6px;
+
+  .ald-tree-list-scrollbar-thumb {
+    background: #575757 !important;
+    border-radius: var(--scrollbar-size);
+    position: relative;
+    opacity: 0.2 !important;
+
+    &:hover {
+      opacity: 0.6 !important;
+    }
+  }
+}

package/dist/Tree/style/var.less

@@ -9,7 +9,7 @@
 @checkbox-size: 16px;
 @text-color: fade(#000, 85%);
 @font-size-base: 12px;
-@primary-color: @B40;
+@primary-color: #126fdd;
 @component-background: #141414;
 @border-radius-sm: 2px;
 @border-width-base: 1px;