@kdcloudjs/kdesign 1.5.2 → 1.5.5

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);
 
@@ -5111,6 +5139,10 @@ textarea {
       background-color: @input-background-color-disabled-inner;
       border-color: @input-border-color-disabled-inner;
       cursor: not-allowed;
+
+      .@{input-prefix-cls}-suffix, .@{input-prefix-cls}-prefix {
+        color: @input-color-disabled-inner;
+      }
     }
 	}
 	&-wrapper-textarea {
@@ -5205,6 +5237,7 @@ textarea {
 					&-disabled {
 						background-color: @input-background-color-disabled-inner;
 						border-color: @input-border-color-disabled-inner;
+            color: @input-color-disabled-inner;
 						cursor: not-allowed;
 					}
 				}
@@ -7828,6 +7861,10 @@ textarea {
     opacity: 0;
     width: 100%;
     height: 100%;
+
+    &[disabled] {
+      cursor: not-allowed;
+    }
   }
 
   // 悬停状态
@@ -7938,6 +7975,10 @@ textarea {
     z-index: 1;
     cursor: pointer;
     opacity: 0;
+
+    &[disabled]{
+      cursor: not-allowed;
+    }
   }
 
   // 悬停状态
@@ -7961,7 +8002,7 @@ textarea {
       color: @radio-color-background;
     }
 
-    &::before {
+    &:not(.@{radio-button-prefix-cls}-disabled)::before {
       background-color: @radio-color-theme;
     }
 
@@ -9540,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;
@@ -9552,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
       }
 
@@ -9576,7 +9616,7 @@ textarea {
 
       @keyframes pageLoading {
         50% {
-          transform: scale(1.3);
+          transform: scale(1.25);
         }
         100% {
           transform: scale(1);
@@ -9600,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);
@@ -9631,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;
 
@@ -9692,6 +9732,7 @@ textarea {
 }
 
 
+
 // code component mixin here
 .dot(@size, @color) {
   width: @size;
@@ -9709,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);
+
 
 
 
@@ -9969,6 +10017,7 @@ textarea {
 
     &-disabled {
       cursor: not-allowed;
+      color: @stepper-icon-color-disabled;
 
       .@{inputNumber-prefix-cls}-icon {
         color: unset !important;
@@ -10020,6 +10069,7 @@ textarea {
 
     &-disabled {
       cursor: not-allowed !important;
+      color: @stepper-icon-color-disabled;
 
       .@{inputNumber-prefix-cls}-icon {
         color: unset !important;
@@ -10055,15 +10105,14 @@ textarea {
 @stepper-icon-color-hover: var(~'@{stepper-prefix}-icon-color-hover', @color-theme);
 @stepper-color-border-strong: var(~'@{stepper-prefix}-color-border-strong', @color-border-strong);
 @stepper-embed-icon-color-background: var(~'@{stepper-prefix}-embed-icon-color-background', transparent);
+@stepper-icon-color-disabled: var(~'@{stepper-prefix}-icon-color-disabled', @color-disabled);
 
 // font
 @stepper-input-font-size: var(~'@{stepper-prefix}-input-font-size', 12px);
 
-
 // motion
 @stepper-motion-duration: var(~'@{stepper-prefix}-motion-duration', @duration-promptly);
 
-
 // sizing
 @stepper-input-small-sizing-height: var(~'@{stepper-prefix}-input-small-sizing-height', 20px);
 @stepper-input-middle-sizing-height: var(~'@{stepper-prefix}-input-middle-sizing-height', 28px);
@@ -11302,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;
@@ -12410,6 +12458,7 @@ template {
       min-width: 120px;
       height: 100%;
       font-size: 0;
+      border-top: 1px solid transparent;
       &::before, &::after {
         position: absolute;
         content: '';
@@ -12927,7 +12976,7 @@ template {
 .@{timeline-prefix-cls} {
   .reset-component;
   margin: 0;
-  padding: 0;
+  padding: 0 4px;
   overflow: hidden;
   list-style: none;
 
@@ -13066,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 {
@@ -13182,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);
@@ -13198,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);
 
@@ -13207,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);
 
 
 
@@ -13522,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;
@@ -13529,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 {
@@ -13564,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;
@@ -13593,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 {
@@ -13654,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';
 
@@ -13671,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);