@kdcloudjs/kdesign 1.5.4 → 1.5.5

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+## [1.5.4](https://github.com/kdcloudone/kdesign/compare/v1.5.3...v1.5.4) (2022-08-04)
+
+
+### Bug Fixes
+
+* [cli] 更改统一导航菜单 ([505bbde](https://github.com/kdcloudone/kdesign/commit/505bbdea8cdfa1b9a793398d96af0cb42d19f087))
+* [cli] 更新footer的图片 ([1850985](https://github.com/kdcloudone/kdesign/commit/18509858492013208c1f4eff36db71bf8d4721a4))
+* [drawer] 修复纵向抽屉无法设置高度问题 ([dd3b9e1](https://github.com/kdcloudone/kdesign/commit/dd3b9e1b1696904d6b75f796fc9719b862a98f8e))
+* [Dropdown]dropdown组件item里面包含标签时点击无响应的bug ([d9368eb](https://github.com/kdcloudone/kdesign/commit/d9368ebda7e1e7a67b3b4b80d287183f7329cf24))
+* [Filter]修复Filter组件demo展示问题 ([9e1e807](https://github.com/kdcloudone/kdesign/commit/9e1e807243098f73eab16543a4f63286ca49853c))
+* [radio] 修复单选组合禁用状态样式问题 ([41782c2](https://github.com/kdcloudone/kdesign/commit/41782c28ef61ad2e9b13625e02513b86c1dbb34a))
+* [select] 解决allowClear模式下 value为0时清空按钮被渲染为0的问题 ([4a383f4](https://github.com/kdcloudone/kdesign/commit/4a383f46155f4b9051a891f910cf85506ace4fa3))
+* [stepper] 修复步进器禁用状态无效问题 ([7d9cc6b](https://github.com/kdcloudone/kdesign/commit/7d9cc6bed19ba400d4b9f49c29231566e519de8d))
+* [tabs] 修复页签border宽度问题 ([a005a7b](https://github.com/kdcloudone/kdesign/commit/a005a7b20a62fa4c604e55ccd6e9280cb86a13e8))
+* [Tooltip]组件-子组件的ref获取不到bug ([81b69f4](https://github.com/kdcloudone/kdesign/commit/81b69f4214e2e0d8e461bcb0a3eca0124b375fcd))
+* [tree] 调整demo展开收起图标 ([4e87537](https://github.com/kdcloudone/kdesign/commit/4e87537ce8059217327d636393308ee0f07095fb))
+* [tree] 增加节点过滤功能api ([c88575a](https://github.com/kdcloudone/kdesign/commit/c88575a8020183fb5ba3aa4d03f894e0462e663e))
+
+
+### Features
+
+* [Dropdown]子元素的ref获取不到的bug ([b8bdabd](https://github.com/kdcloudone/kdesign/commit/b8bdabdc38b3ec66fd010e4c9d5dcc288a9a2a26))
+* [icon] 新增展开收起图标 ([0915da7](https://github.com/kdcloudone/kdesign/commit/0915da77c5eb782f125e6cef9a72cd578cb79996))
+
+
+### Performance Improvements
+
+* [tree] 去除重复遍历计算树结构数据的层级 ([14c3f20](https://github.com/kdcloudone/kdesign/commit/14c3f209face4a8f2ffdf761e671a11237e25ec6))
+* [tree] 优化大数据虚模式下的节点过滤 ([874f1b0](https://github.com/kdcloudone/kdesign/commit/874f1b07bde6b6b3ccd2b1d2d904fdee63011b48))
+
+
+
+## [1.5.3](https://github.com/kdcloudone/kdesign/compare/v1.5.2...v1.5.3) (2022-07-29)
+
+
+### Bug Fixes
+
+* [input]修复禁用状态下样式问题 ([3ff40ea](https://github.com/kdcloudone/kdesign/commit/3ff40ea0f9f250b3470c8668f177269f0220285b))
+
+
+
 ## [1.5.2](https://github.com/kdcloudone/kdesign/compare/v1.5.1...v1.5.2) (2022-07-28)
 
 

package/dist/default-theme.js

@@ -49,15 +49,14 @@ module.exports = {
   "bg2": "#f2f2f2",
   "bg3": "rgba(255, 255, 255, 0.65)",
   "contain-bg": "#fafafa",
-  "radius-size": "2px",
   "input-color": "#999",
   "strong-border-color": "#d9d9d9",
   "strong-border-color-1": "#d9d9d9",
   "strong-border-color-2": "rgba(217, 217, 217, 0.65)",
   "weak-border-color": "#e5e5e5",
-  "logo-color-1": "#2386ee",
-  "logo-color-2": "#00ccfe",
-  "logo-color-3": "#05c8c8",
+  "logo-color-1": "#2486ee",
+  "logo-color-2": "#02ccfe",
+  "logo-color-3": "#05c8c7",
   "logo-color-4": "#a06eff",
   "white": "#fff",
   "ease-out": "cubic-bezier(0,.4,.4,1)",
@@ -73,6 +72,7 @@ module.exports = {
   "large-font-size": "16px",
   "xlarge-font-size": "18px",
   "xxlarge-font-size": "20px",
+  "radius-size": "2px",
   "zIndex-below": "-1",
   "zIndex-popper": "1050",
   "zIndex-dialog": "1050",

package/dist/kdesign-complete.less

@@ -16,11 +16,18 @@
   @info: @alert-info-bg-color;
 }
 
-.alert-font-type-set() {
-  @success: @alert-success-font-color;
-  @warning: @alert-warning-font-color;
-  @error: @alert-error-font-color;
-  @info: @alert-info-font-color;
+.alert-icon-type-set() {
+  @success: @alert-success-icon-color;
+  @warning: @alert-warning-icon-color;
+  @error: @alert-error-icon-color;
+  @info: @alert-info-icon-color;
+}
+
+.alert-border-type-set() {
+  @success: @alert-success-border-color;
+  @warning: @alert-warning-border-color;
+  @error: @alert-error-border-color;
+  @info: @alert-info-border-color;
 }
 
 @alert-transition-fn: cubic-bezier(0.32, 0.94, 0.6, 1);
@@ -36,9 +43,11 @@
     z-index: @z-index-apex;
     display: none;
     width: 100%;
-    padding: @alert-padding-top @alert-padding-horizontal @alert-padding-bottom;
+    padding: @alert-padding-vertical @alert-padding-horizontal;
     align-items: center;
     transition: display 3s;
+    border-radius: @alert-radius-border;
+    border: 1px solid;
   }
   &-banner-container {
     display: flex;
@@ -50,19 +59,24 @@
   each(.alert-bg-type-set(), {
     .alert-bg-type(@key, @value);
   });
-  each(.alert-font-type-set(), {
-    .alert-font-type(@key, @value);
+  each(.alert-border-type-set(), {
+    .alert-border-type(@key, @value);
   });
   &-icon {
     display: flex;
     cursor: default;
     .icon-center();
+    height: @alert-message-icon-font-size;
     margin-right: @alert-message-icon-margin-right;
     font-size: @alert-message-icon-font-size;
+    each(.alert-icon-type-set(), {
+      .alert-icon-type(@key, @value);
+    });
   }
   &-message {
+    color: @alert-message-color-text;
     font-size: @alert-message-font-size;
-    line-height: 18px;
+    line-height: 16px;
     display: flex;
     flex-grow: 1;
     cursor: default;
@@ -86,10 +100,10 @@
   }
   &-close-icon {
     display: flex;
+    height: @alert-message-icon-font-size;
     margin-left: @alert-close-icon-margin-left;
     color: @alert-close-icon-color;
     font-size: @alert-close-icon-font-size;
-    justify-self: flex-end;
     cursor: pointer;
     &:hover {
       color: @alert-close-icon-color-hover;
@@ -122,12 +136,18 @@
   }
 }
 
-.alert-font-type(@type, @color) {
-  &.alert-@{type}-font-color {
+.alert-icon-type(@type, @color) {
+  &.alert-@{type}-icon-color {
     color: @color
   }
 }
 
+.alert-border-type(@type, @color) {
+  &.alert-@{type}-border-color {
+    border-color: @color
+  }
+}
+
 .square(@side-length) {
   width: @side-length;
   height: @side-length;
@@ -142,10 +162,16 @@
 @alert-error-bg-color: var(~'@{alert-custom-prefix}-color-background-error', @color-background-error); // 反馈浮层错误提示的背景色
 @alert-info-bg-color: var(~'@{alert-custom-prefix}-color-background-info', @color-background-ongoing); // 反馈浮层一般提示的背景色
 
-@alert-success-font-color: var(~'@{alert-custom-prefix}-color-text-success', @color-success); // 反馈浮层成功提示的文字色
-@alert-warning-font-color: var(~'@{alert-custom-prefix}-color-text-warning', @color-warning); // 反馈浮层警告提示的文字色 
-@alert-error-font-color: var(~'@{alert-custom-prefix}-color-text-error', @color-error); // 反馈浮层错误提示的文字色
-@alert-info-font-color: var(~'@{alert-custom-prefix}-color-text-info', @color-ongoing); // 反馈浮层一般提示的文字色
+@alert-message-color-text: var(~'@{alert-custom-prefix}-color-text', @color-text-primary); // 反馈浮层提示的文字色
+@alert-success-icon-color: var(~'@{alert-custom-prefix}-color-icon-success', @color-success); // 反馈浮层成功提示的图标颜色
+@alert-warning-icon-color: var(~'@{alert-custom-prefix}-color-icon-warning', @color-warning); // 反馈浮层警告提示的图标颜色
+@alert-error-icon-color: var(~'@{alert-custom-prefix}-color-icon-error', @color-error); // 反馈浮层错误提示的图标颜色
+@alert-info-icon-color: var(~'@{alert-custom-prefix}-color-icon-info', @color-ongoing); // 反馈浮层一般提示的图标颜色
+
+@alert-success-border-color: var(~'@{alert-custom-prefix}-color-border-success', #DCFAE4); // 反馈浮层成功提示的边框色
+@alert-warning-border-color: var(~'@{alert-custom-prefix}-color-border-warning', #FFF1D4); // 反馈浮层警告提示的边框色 
+@alert-error-border-color: var(~'@{alert-custom-prefix}-color-border-error', #FFDBE0); // 反馈浮层错误提示的边框色
+@alert-info-border-color: var(~'@{alert-custom-prefix}-color-border-info', #E0EFFF); // 反馈浮层一般提示的边框色
 
 @alert-close-icon-color: var(~'@{alert-custom-prefix}-close-icon-color-text', @color-text-secondary); 
 @alert-close-icon-color-hover: var(~'@{alert-custom-prefix}-close-icon-color-text-hover', @color-theme-hover); 
@@ -156,12 +182,14 @@
 @alert-close-icon-font-size: var(~'@{alert-custom-prefix}-close-icon-font-size', @font-size-middle);
 
 // spacing
-@alert-padding-top: var(~'@{alert-custom-prefix}-sizing-padding-top', 8px);
-@alert-padding-bottom: var(~'@{alert-custom-prefix}-sizing-padding-bottom', 12px);
-@alert-padding-horizontal: var(~'@{alert-custom-prefix}-sizing-padding-horizontal', 12px);
+@alert-padding-vertical: var(~'@{alert-custom-prefix}-sizing-padding-vertical', 12px);
+@alert-padding-horizontal: var(~'@{alert-custom-prefix}-sizing-padding-horizontal', 20px);
 @alert-message-icon-margin-right: var(~'@{alert-custom-prefix}-message-icon-sizing-margin-right', 8px);
 @alert-close-icon-margin-left: var(~'@{alert-custom-prefix}-close-icon-sizing-margin-left', 8px);
 
+// radius
+@alert-radius-border: var(~'@{alert-custom-prefix}-radius-border', 4px);
+
 
 @anchor-prefix-cls: ~'@{kd-prefix}-anchor';
 
@@ -3808,7 +3836,7 @@
   opacity: 1;
   visibility: visible;
   z-index: @z-index-popper;
-  background-color: @color-background;
+  background-color: @dropdown-color-background;
   border-radius: @radius-border;
   min-width: @dropdown-menu-min-width;
   max-width: @dropdown-menu-max-width;
@@ -3820,7 +3848,7 @@
   }
 
   // 箭头样式
-  .popperArrow(@color-background, @dropdown-item-horizontal-gap, @dropdown-box-shadow-blur);
+  .popperArrow(@dropdown-color-background, @dropdown-item-horizontal-gap, @dropdown-box-shadow-blur);
 
   &-menu {
     max-height: @dropdown-menu-max-height;
@@ -3851,11 +3879,10 @@
 
       &:not(.disabled):active,
       &:not(.disabled).selected {
-        color: @color-theme;
-        background-color: @dropdown-item-active-bg-color;
+        color: @dropdown-item-active-color;
 
         > a {
-          color: @color-theme;
+          color: @dropdown-item-active-color;
         }
       }
 
@@ -3907,22 +3934,23 @@
 
 // color
 @dropdown-item-hover-bg-color: var(~'@{dropdown-custom-prefix}-item-color-background-hover', @color-hover);
-@dropdown-item-active-bg-color: var(~'@{dropdown-custom-prefix}-item-color-background-active', @color-theme-light-active);
+@dropdown-item-active-color: var(~'@{dropdown-custom-prefix}-item-color-text-active', @color-theme);
 @dropdown-item-color-disabled: var(~'@{dropdown-custom-prefix}-item-color-text-disabled', @color-disabled);
 @dropdown-item-color-text-danger: var(~'@{dropdown-custom-prefix}-item-color-text-danger', @color-error);
 @dropdown-item-color-background-danger-hover: var(~'@{dropdown-custom-prefix}-item-color-background-danger-hover', @color-error);
 @dropdown-item-hover-color-text: var(~'@{dropdown-custom-prefix}-item-color-text-hover', @color-text-primary);
 @dropdown-divided-color-bg: var(~'@{dropdown-custom-prefix}-divided-color-background', @color-border-weak);
 @dropdown-color: var(~'@{dropdown-custom-prefix}-menu-item-color-text', @color-text-primary);
+@dropdown-color-background: var(~'@{dropdown-custom-prefix}-menu-color-background', @color-background);
 
 // sizing
-@dropdown-menu-min-width: var(~'@{dropdown-custom-prefix}-menu-sizing-min-width', 136px);
-@dropdown-menu-max-width: var(~'@{dropdown-custom-prefix}-menu-sizing-max-width', 320px);
-@dropdown-menu-max-height: var(~'@{dropdown-custom-prefix}-menu-sizing-max-height', 336px);
+@dropdown-menu-min-width: var(~'@{dropdown-custom-prefix}-menu-sizing-min-width', 64px);
+@dropdown-menu-max-width: var(~'@{dropdown-custom-prefix}-menu-sizing-max-width', 600px);
+@dropdown-menu-max-height: var(~'@{dropdown-custom-prefix}-menu-sizing-max-height', 328px);
 @dropdown-divided-height: var(~'@{dropdown-custom-prefix}-divided-sizing-height', 1px);
 
 // spacing
-@dropdown-menu-padding-vertical: var(~'@{dropdown-custom-prefix}-menu-spacing-padding-vertical', 8px);
+@dropdown-menu-padding-vertical: var(~'@{dropdown-custom-prefix}-menu-spacing-padding-vertical', 4px);
 @dropdown-item-vertical-gap: var(~'@{dropdown-custom-prefix}-item-spacing-padding-vertical', 7px);
 @dropdown-item-horizontal-gap: var(~'@{dropdown-custom-prefix}-item-spacing-padding-horizontal', 12px);
 
@@ -7833,6 +7861,10 @@ textarea {
     opacity: 0;
     width: 100%;
     height: 100%;
+
+    &[disabled] {
+      cursor: not-allowed;
+    }
   }
 
   // 悬停状态
@@ -7943,6 +7975,10 @@ textarea {
     z-index: 1;
     cursor: pointer;
     opacity: 0;
+
+    &[disabled]{
+      cursor: not-allowed;
+    }
   }
 
   // 悬停状态
@@ -9545,9 +9581,9 @@ textarea {
     // right: 0;
 
     .@{spin-prefix-cls}-dot-spin {
-      width: 50px;
-      height: 50px;
-      padding: 5px;
+      width: @spin-page-dot-spin-sizing;
+      height: @spin-page-dot-spin-sizing;
+      padding: @spin-page-dot-spin-spacing-padding;
       // background: @logo-color-1;
       box-sizing: border-box;
       display: flex;
@@ -9557,10 +9593,9 @@ textarea {
     }
 
     .@{spin-prefix-cls}-dot-item {
-      .dot(@spin-page-size, @spin-dot-color-first);
+      .dot(@spin-page-dot-item-sizing, @spin-dot-color-first);
 
       &:nth-child(2n+1) {
-        margin-right: 10px;
         animation: pageLoading 1s .3s ease-in-out infinite
       }
 
@@ -9581,7 +9616,7 @@ textarea {
 
       @keyframes pageLoading {
         50% {
-          transform: scale(1.3);
+          transform: scale(1.25);
         }
         100% {
           transform: scale(1);
@@ -9605,22 +9640,22 @@ textarea {
         &:nth-child(2n+1) {
           animation: containerLoading 1s .6s ease-in-out infinite
         }
-  
+
         &:nth-child(2n+2) {
           background-color: @spin-dot-color-second;
           animation: containerLoading 1s .45s ease-in-out infinite
         }
-  
+
         &:nth-child(2n+3) {
           background-color: @spin-dot-color-third;
           animation: containerLoading 1s .3s ease-in-out infinite
         }
-  
+
         &:nth-child(2n+4) {
           background-color: @spin-dot-color-fourth;
           animation: containerLoading 1s .15s ease-in-out infinite
         }
-  
+
         @keyframes containerLoading {
           50% {
             transform: translateY(-10px);
@@ -9636,24 +9671,24 @@ textarea {
   // 组件加载动画
   &-component {
     .@{spin-prefix-cls}-dot-spin {
-      width: 13px;
-      height: 13px;
-      border: 1px solid @spin-component-dot-color-border;
+      width: @spin-component-spin-size;
+      height: @spin-component-spin-size;
+      border: @spin-component-spin-border solid @spin-component-dot-color-border;
       border-radius: 50%;
       position: relative;
       box-sizing: border-box;
 
       .@{spin-prefix-cls}-dot-item {
-        width: 13px;
-        height: 13px;
+        width: @spin-component-spin-size;
+        height: @spin-component-spin-size;
         box-sizing: border-box;
-        border: 1px solid transparent;
+        border: @spin-component-spin-border solid transparent;
         // border-top-color: #5582f3;
         border-right-color: @spin-component-dot-item-color-border;
         border-radius: 50%;
         position: absolute;
-        top: -1px;
-        left: -1px;
+        top: calc(-1 * @spin-component-spin-border);
+        left: calc(-1 * @spin-component-spin-border);
         transform: rotate(-45deg);
         animation: componentRotate 1s linear infinite;
 
@@ -9697,6 +9732,7 @@ textarea {
 }
 
 
+
 // code component mixin here
 .dot(@size, @color) {
   width: @size;
@@ -9714,12 +9750,19 @@ textarea {
 @spin-dot-color-second: var(~'@{spin-custom-prefix}-dot-color-backgroung-second', @color-logo-2);
 @spin-dot-color-third: var(~'@{spin-custom-prefix}-dot-color-backgroung-third', @color-logo-3);
 @spin-dot-color-fourth: var(~'@{spin-custom-prefix}-dot-color-backgroung-fourth', @color-logo-4);
-@spin-component-dot-color-border: var(~'@{spin-custom-prefix}-component-dot-color-border', #e1e1e1);
+@spin-component-dot-color-border: var(~'@{spin-custom-prefix}-component-dot-color-border', #ebebeb);
 @spin-component-dot-item-color-border: var(~'@{spin-custom-prefix}-component-dot-item-color-border', @color-theme);
 
 // sizing
-@spin-page-size: var(~'@{spin-custom-prefix}-page-sizing', 15px);
-@spin-container-size: var(~'@{spin-custom-prefix}-dot-container-sizing', 5px);
+@spin-page-dot-item-sizing: var(~'@{spin-custom-prefix}-page-dot-item-sizing-square', 16px);
+@spin-page-dot-spin-sizing: var(~'@{spin-custom-prefix}-page-dot-spin-sizing-square', 48px);
+@spin-container-size: var(~'@{spin-custom-prefix}-dot-container-sizing-square', 5px);
+@spin-component-spin-size: var(~'@{spin-custom-prefix}-dot-component-sizing-square', 24px);
+@spin-component-spin-border: var(~'@{spin-custom-prefix}-dot-component-sizing-border', 2px);
+
+// spacing
+@spin-page-dot-spin-spacing-padding: var(~'@{spin-custom-prefix}-page-dot-spin-spacing-padding', 4px);
+
 
 
 
@@ -11308,15 +11351,14 @@ template {
 @bg2: #f2f2f2; // 底色灰背景
 @bg3: rgba(255, 255, 255, 0.65); // 次级底色背景
 @contain-bg: #fafafa; // 容器内的灰背景
-@radius-size: 2px; // 圆角值
 @input-color: #999; // 线型录入的默认态
 @strong-border-color: #d9d9d9; // 强线条 --带操作
 @strong-border-color-1: #d9d9d9; // 强线条 --分割内容/容器包裹线
 @strong-border-color-2: rgba(217, 217, 217, 0.65); // 次级边框
 @weak-border-color: #e5e5e5; // 弱线条 -- 需要多层级时
-@logo-color-1: #2386ee;
-@logo-color-2: #00ccfe;
-@logo-color-3: #05c8c8;
+@logo-color-1: #2486ee;
+@logo-color-2: #02ccfe;
+@logo-color-3: #05c8c7;
 @logo-color-4: #a06eff;
 // @shadow-on-hover: ; // 悬停时阴影
 @white: #fff;
@@ -12934,7 +12976,7 @@ template {
 .@{timeline-prefix-cls} {
   .reset-component;
   margin: 0;
-  padding: 0;
+  padding: 0 4px;
   overflow: hidden;
   list-style: none;
 
@@ -13073,7 +13115,7 @@ template {
         margin-right:calc(-1 * (@timeline-dot-size - 1px) / 2) ;
 
         &.custom {
-          margin-right: 1px;
+          margin-right: -18px;
         }
       }
       .@{timeline-item-prefix-cls}-content {
@@ -13189,12 +13231,10 @@ template {
 
 
 @timeline-prefix: '--@{kd-prefix}-c-timeline';
-@timeline-gap:  8px;
-
-// @timeline-dot-size: var(~'@{timeline-prefix}-dot-sizing',9px);
-@timeline-dot-size: 9px;
-
+@timeline-gap: 8px;
 
+@timeline-dot-size: var(~'@{timeline-prefix}-dot-sizing',9px);
+// @timeline-dot-size: 9px;
 
 // color
 @timeline-finished-color:  var(~'@{timeline-prefix}-finished-color',@color-theme);
@@ -13205,7 +13245,6 @@ template {
 @timeline-label-color-text: var(~'@{timeline-prefix}-label-color-text',#666666);
 @timeline-content-color-text: var(~'@{timeline-prefix}-content-color-text',@color-text-primary);
 
-
 // font
 @timeline-content-font-size-small: var(~'@{timeline-prefix}-content-font-size',@font-size-small);
 
@@ -13214,7 +13253,7 @@ template {
 @timeline-width: var(~'@{timeline-prefix}-sizing-width',1px);
 
 // spacing
-@timeline-item-padding-bottom: var(~'@{timeline-prefix}-spacing-padding-bottom',26px);
+@timeline-item-padding-bottom: var(~'@{timeline-prefix}-spacing-padding-bottom',24px);
 
 
 
@@ -13529,6 +13568,17 @@ template {
     display: flex;
     justify-content: flex-start;
     align-items: center;
+
+    .@{kd-prefix}-spin-dot-spin {
+      border: none;
+      width: @tree-expand-icon-loading-width;
+      height: @tree-expand-icon-loading-height;
+
+      .@{kd-prefix}-spin-dot-item {
+        width: @tree-expand-icon-loading-width;
+        height: @tree-expand-icon-loading-height;
+      }
+    }
   }
   &-fb-children-pointerEvents * {
     pointer-events: none;
@@ -13536,13 +13586,8 @@ template {
   &-item {
     display: flex;
     align-items: center;
-  }
-  &-item-hover {
-    transition: background-color @tree-transition-duration, color @tree-transition-duration;
-  }
-  &-item-hover:hover {
-    background-color: @tree-node-hover-bg-color;
-    cursor: pointer;
+
+    .node-hover()
   }
 
   &-indent {
@@ -13571,6 +13616,11 @@ template {
     align-items: center;
     font-size: @tree-node-icon-size;
     color: @tree-node-icon-color-text;
+
+    &-hover:hover {
+      background-color: @tree-node-hover-bg-color;
+      cursor: pointer;
+    }
   }
   &-icon-hidden {
     height: @tree-node-icon-height;
@@ -13600,22 +13650,19 @@ template {
     display: flex;
     align-items: center;
     height: 100%;
+    padding-left: 4px;
+
+    .node-hover();
+
+    &-selected {
+      .node-selected()
+    }
   }
   &-title {
     white-space: nowrap;
-    margin-left: 6px;
   }
   &-selected {
-    background-color: @tree-node-checked-bg-color !important;
-    color: @tree-node-checked-text-color;
-
-    .@{tree-node-prefix-cls}-title {
-      color: @tree-node-checked-text-color;
-    }
-
-    .@{tree-node-prefix-cls}-icon {
-      color: @tree-node-checked-text-color;
-    }
+    .node-selected()
   }
 
   &-draggabled {
@@ -13661,6 +13708,31 @@ template {
 
 
 
+.node-hover {
+  &-hover {
+    transition: background-color @tree-transition-duration, color @tree-transition-duration;
+
+    &:hover {
+      background-color: @tree-node-hover-bg-color;
+      cursor: pointer;
+    }
+  }
+}
+
+.node-selected {
+  background-color: @tree-node-checked-bg-color !important;
+  color: @tree-node-checked-text-color;
+
+  .@{tree-node-prefix-cls}-title {
+    color: @tree-node-checked-text-color;
+  }
+
+  .@{tree-node-prefix-cls}-icon {
+    color: @tree-node-checked-text-color;
+  }
+}
+
+
 
 @tree-prefix: '--@{kd-prefix}-c-tree';
 
@@ -13678,10 +13750,12 @@ template {
 @tree-node-drag-line-border-color: var(~'@{tree-prefix}-node-drag-line-color-background', #276FF5);
 
 // sizing
-@tree-expand-icon-height: var(~'@{tree-prefix}-expand-icon-sizing-height', 22px);
-@tree-expand-icon-width: var(~'@{tree-prefix}-expand-icon-sizing-width', 22px);
-@tree-node-icon-height: var(~'@{tree-prefix}-node-icon-sizing-height', 20px);
-@tree-node-icon-width: var(~'@{tree-prefix}-node-icon-sizing-width', 20px);
+@tree-expand-icon-height: var(~'@{tree-prefix}-expand-icon-sizing-height', 16px);
+@tree-expand-icon-width: var(~'@{tree-prefix}-expand-icon-sizing-width', 16px);
+@tree-expand-icon-loading-height: var(~'@{tree-prefix}-expand-icon-loading-sizing-height', 16px);
+@tree-expand-icon-loading-width: var(~'@{tree-prefix}-expand-icon-loading-sizing-width', 16px);
+@tree-node-icon-height: var(~'@{tree-prefix}-node-icon-sizing-height', 16px);
+@tree-node-icon-width: var(~'@{tree-prefix}-node-icon-sizing-width', 16px);
 
 // font
 @tree-font-size: var(~'@{tree-prefix}-font-size', @font-size-small);