@kdcloudjs/kdesign 1.5.4 → 1.5.7

package/dist/kdesign.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/kdesign v1.5.3
+ *   @kdcloudjs/kdesign v1.5.6
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -2156,12 +2156,14 @@ template {
   z-index: var(--kd-g-z-index-apex, 9999);
   display: none;
   width: 100%;
-  padding: var(--kd-c-alert-sizing-padding-top, 8px) var(--kd-c-alert-sizing-padding-horizontal, 12px) var(--kd-c-alert-sizing-padding-bottom, 12px);
+  padding: var(--kd-c-alert-sizing-padding-vertical, 12px) var(--kd-c-alert-sizing-padding-horizontal, 20px);
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-transition: display 3s;
   transition: display 3s;
+  border-radius: var(--kd-c-alert-radius-border, 4px);
+  border: 1px solid;
 }
 .kd-alert-banner-container {
   display: -webkit-box;
@@ -2187,23 +2189,24 @@ template {
 .kd-alert.alert-info-bg-color {
   background-color: var(--kd-c-alert-color-background-info, var(--kd-g-color-background-ongoing, #f2f9ff));
 }
-.kd-alert.alert-success-font-color {
-  color: var(--kd-c-alert-color-text-success, var(--kd-g-color-success, #1ba854));
+.kd-alert.alert-success-border-color {
+  border-color: var(--kd-c-alert-color-border-success, #DCFAE4);
 }
-.kd-alert.alert-warning-font-color {
-  color: var(--kd-c-alert-color-text-warning, var(--kd-g-color-warning, #ff991c));
+.kd-alert.alert-warning-border-color {
+  border-color: var(--kd-c-alert-color-border-warning, #FFF1D4);
 }
-.kd-alert.alert-error-font-color {
-  color: var(--kd-c-alert-color-text-error, var(--kd-g-color-error, #fb2323));
+.kd-alert.alert-error-border-color {
+  border-color: var(--kd-c-alert-color-border-error, #FFDBE0);
 }
-.kd-alert.alert-info-font-color {
-  color: var(--kd-c-alert-color-text-info, var(--kd-g-color-ongoing, #276ff5));
+.kd-alert.alert-info-border-color {
+  border-color: var(--kd-c-alert-color-border-info, #E0EFFF);
 }
 .kd-alert-icon {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   cursor: default;
+  height: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
   margin-right: var(--kd-c-alert-message-icon-sizing-margin-right, 8px);
   font-size: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
 }
@@ -2211,9 +2214,22 @@ template {
   -ms-flex-item-align: center;
       align-self: center;
 }
+.kd-alert-icon.alert-success-icon-color {
+  color: var(--kd-c-alert-color-icon-success, var(--kd-g-color-success, #1ba854));
+}
+.kd-alert-icon.alert-warning-icon-color {
+  color: var(--kd-c-alert-color-icon-warning, var(--kd-g-color-warning, #ff991c));
+}
+.kd-alert-icon.alert-error-icon-color {
+  color: var(--kd-c-alert-color-icon-error, var(--kd-g-color-error, #fb2323));
+}
+.kd-alert-icon.alert-info-icon-color {
+  color: var(--kd-c-alert-color-icon-info, var(--kd-g-color-ongoing, #276ff5));
+}
 .kd-alert-message {
+  color: var(--kd-c-alert-color-text, var(--kd-g-color-text-primary, #212121));
   font-size: var(--kd-c-alert-message-font-size, var(--kd-g-font-size-small, 12px));
-  line-height: 18px;
+  line-height: 16px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -2243,10 +2259,10 @@ template {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  height: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
   margin-left: var(--kd-c-alert-close-icon-sizing-margin-left, 8px);
   color: var(--kd-c-alert-close-icon-color-text, var(--kd-g-color-text-secondary, #666));
   font-size: var(--kd-c-alert-close-icon-font-size, var(--kd-g-font-size-middle, 14px));
-  justify-self: flex-end;
   cursor: pointer;
 }
 .kd-alert-close-icon:hover {
@@ -6901,10 +6917,10 @@ template {
   opacity: 1;
   visibility: visible;
   z-index: var(--kd-g-z-index-popper, 1050);
-  background-color: var(--kd-g-color-background, #fff);
+  background-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
   border-radius: var(--kd-g-radius-border, 2px);
-  min-width: var(--kd-c-dropdown-menu-sizing-min-width, 136px);
-  max-width: var(--kd-c-dropdown-menu-sizing-max-width, 320px);
+  min-width: var(--kd-c-dropdown-menu-sizing-min-width, 64px);
+  max-width: var(--kd-c-dropdown-menu-sizing-max-width, 600px);
   -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
           box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
 }
@@ -6915,7 +6931,7 @@ template {
 .kd-dropdown.arrow::before {
   position: absolute;
   z-index: -2;
-  background: var(--kd-g-color-background, #fff);
+  background: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
   border-style: solid;
   border-width: var(--arrowSize);
   -webkit-transform: rotate(45deg);
@@ -6930,7 +6946,7 @@ template {
   bottom: 0;
   left: 0;
   content: '';
-  background: var(--kd-g-color-background, #fff);
+  background: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
   border-radius: var(--kd-g-radius-border, 2px);
 }
 .kd-dropdown.arrow.bottomLeft::before,
@@ -6940,7 +6956,7 @@ template {
   top: var(--arrowSpill);
   -webkit-box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
           box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
-  border-color: var(--kd-g-color-background, #fff) transparent transparent var(--kd-g-color-background, #fff);
+  border-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
 }
 .kd-dropdown.arrow.topLeft::before,
 .kd-dropdown.arrow.top::before,
@@ -6949,7 +6965,7 @@ template {
   bottom: var(--arrowSpill);
   -webkit-box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
           box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
-  border-color: transparent var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff) transparent;
+  border-color: transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent;
 }
 .kd-dropdown.arrow.leftTop::before,
 .kd-dropdown.arrow.left::before,
@@ -6958,7 +6974,7 @@ template {
   right: var(--arrowSpill);
   -webkit-box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
           box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
-  border-color: var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff) transparent transparent;
+  border-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent transparent;
 }
 .kd-dropdown.arrow.rightTop::before,
 .kd-dropdown.arrow.right::before,
@@ -6967,11 +6983,11 @@ template {
   left: var(--arrowSpill);
   -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
           box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
-  border-color: transparent transparent var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff);
+  border-color: transparent transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
 }
 .kd-dropdown-menu {
-  max-height: var(--kd-c-dropdown-menu-sizing-max-height, 336px);
-  padding: var(--kd-c-dropdown-menu-spacing-padding-vertical, 8px) 0;
+  max-height: var(--kd-c-dropdown-menu-sizing-max-height, 328px);
+  padding: var(--kd-c-dropdown-menu-spacing-padding-vertical, 4px) 0;
   overflow-y: auto;
 }
 .kd-dropdown-menu-item {
@@ -6998,12 +7014,11 @@ template {
 }
 .kd-dropdown-menu-item:not(.disabled):active,
 .kd-dropdown-menu-item:not(.disabled).selected {
-  color: var(--kd-g-color-theme, #5582f3);
-  background-color: var(--kd-c-dropdown-item-color-background-active, var(--kd-g-color-theme-1, #f2f8ff));
+  color: var(--kd-c-dropdown-item-color-text-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-dropdown-menu-item:not(.disabled):active > a,
 .kd-dropdown-menu-item:not(.disabled).selected > a {
-  color: var(--kd-g-color-theme, #5582f3);
+  color: var(--kd-c-dropdown-item-color-text-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-dropdown-menu-item.divided::before {
   content: '';
@@ -12640,6 +12655,9 @@ textarea {
   width: 100%;
   height: 100%;
 }
+.kd-radio-square-input[disabled] {
+  cursor: not-allowed;
+}
 .kd-radio-square:hover {
   color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
   border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
@@ -12747,6 +12765,9 @@ textarea {
   cursor: pointer;
   opacity: 0;
 }
+.kd-radio-button-input[disabled] {
+  cursor: not-allowed;
+}
 .kd-radio-button:hover {
   color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
 }
@@ -13491,13 +13512,13 @@ textarea {
           animation: animate_loading 1s infinite;
 }
 .kd-quick-search-npl-loading-item:nth-child(1) {
-  background-color: var(--kd-c-search-dot-color-first, var(--kd-g-color-logo-1, #2386ee));
+  background-color: var(--kd-c-search-dot-color-first, var(--kd-g-color-logo-1, #2486ee));
 }
 .kd-quick-search-npl-loading-item:nth-child(2) {
-  background-color: #00ccfe;
+  background-color: #02ccfe;
 }
 .kd-quick-search-npl-loading-item:nth-child(3) {
-  background-color: #05c8c8;
+  background-color: #05c8c7;
 }
 .kd-quick-search-npl-loading-item:nth-child(4) {
   background-color: #a06eff;
@@ -14923,9 +14944,9 @@ textarea {
 */
 /* -----------  zIndex  ——————---- end */
 .kd-spin-page .kd-spin-dot-spin {
-  width: 50px;
-  height: 50px;
-  padding: 5px;
+  width: var(--kd-c-spin-page-dot-spin-sizing-square, 48px);
+  height: var(--kd-c-spin-page-dot-spin-sizing-square, 48px);
+  padding: var(--kd-c-spin-page-dot-spin-spacing-padding, 4px);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -14940,23 +14961,22 @@ textarea {
       align-content: space-between;
 }
 .kd-spin-page .kd-spin-dot-item {
-  width: var(--kd-c-spin-page-sizing, 15px);
-  height: var(--kd-c-spin-page-sizing, 15px);
-  background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2386ee));
+  width: var(--kd-c-spin-page-dot-item-sizing-square, 16px);
+  height: var(--kd-c-spin-page-dot-item-sizing-square, 16px);
+  background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2486ee));
   border-radius: 50%;
 }
 .kd-spin-page .kd-spin-dot-item:nth-child(2n+1) {
-  margin-right: 10px;
   -webkit-animation: pageLoading 1s 0.3s ease-in-out infinite;
           animation: pageLoading 1s 0.3s ease-in-out infinite;
 }
 .kd-spin-page .kd-spin-dot-item:nth-child(2n+2) {
-  background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #00ccfe));
+  background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #02ccfe));
   -webkit-animation: pageLoading 1s 0.2s ease-in-out infinite;
           animation: pageLoading 1s 0.2s ease-in-out infinite;
 }
 .kd-spin-page .kd-spin-dot-item:nth-child(2n+3) {
-  background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c8));
+  background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c7));
   -webkit-animation: pageLoading 1s 0.1s ease-in-out infinite;
           animation: pageLoading 1s 0.1s ease-in-out infinite;
 }
@@ -14967,8 +14987,8 @@ textarea {
 }
 @-webkit-keyframes pageLoading {
   50% {
-    -webkit-transform: scale(1.3);
-            transform: scale(1.3);
+    -webkit-transform: scale(1.25);
+            transform: scale(1.25);
   }
   100% {
     -webkit-transform: scale(1);
@@ -14977,8 +14997,8 @@ textarea {
 }
 @keyframes pageLoading {
   50% {
-    -webkit-transform: scale(1.3);
-            transform: scale(1.3);
+    -webkit-transform: scale(1.25);
+            transform: scale(1.25);
   }
   100% {
     -webkit-transform: scale(1);
@@ -14999,9 +15019,9 @@ textarea {
           align-items: flex-end;
 }
 .kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item {
-  width: var(--kd-c-spin-dot-container-sizing, 5px);
-  height: var(--kd-c-spin-dot-container-sizing, 5px);
-  background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2386ee));
+  width: var(--kd-c-spin-dot-container-sizing-square, 5px);
+  height: var(--kd-c-spin-dot-container-sizing-square, 5px);
+  background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2486ee));
   border-radius: 50%;
 }
 .kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+1) {
@@ -15009,12 +15029,12 @@ textarea {
           animation: containerLoading 1s 0.6s ease-in-out infinite;
 }
 .kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+2) {
-  background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #00ccfe));
+  background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #02ccfe));
   -webkit-animation: containerLoading 1s 0.45s ease-in-out infinite;
           animation: containerLoading 1s 0.45s ease-in-out infinite;
 }
 .kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+3) {
-  background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c8));
+  background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c7));
   -webkit-animation: containerLoading 1s 0.3s ease-in-out infinite;
           animation: containerLoading 1s 0.3s ease-in-out infinite;
 }
@@ -15044,25 +15064,25 @@ textarea {
   }
 }
 .kd-spin-component .kd-spin-dot-spin {
-  width: 13px;
-  height: 13px;
-  border: 1px solid var(--kd-c-spin-component-dot-color-border, #e1e1e1);
+  width: var(--kd-c-spin-dot-component-sizing-square, 24px);
+  height: var(--kd-c-spin-dot-component-sizing-square, 24px);
+  border: var(--kd-c-spin-dot-component-sizing-border, 2px) solid var(--kd-c-spin-component-dot-color-border, #ebebeb);
   border-radius: 50%;
   position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
 .kd-spin-component .kd-spin-dot-spin .kd-spin-dot-item {
-  width: 13px;
-  height: 13px;
+  width: var(--kd-c-spin-dot-component-sizing-square, 24px);
+  height: var(--kd-c-spin-dot-component-sizing-square, 24px);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  border: 1px solid transparent;
+  border: var(--kd-c-spin-dot-component-sizing-border, 2px) solid transparent;
   border-right-color: var(--kd-c-spin-component-dot-item-color-border, var(--kd-g-color-theme, #5582f3));
   border-radius: 50%;
   position: absolute;
-  top: -1px;
-  left: -1px;
+  top: calc(-1 * var(--kd-c-spin-dot-component-sizing-border, 2px));
+  left: calc(-1 * var(--kd-c-spin-dot-component-sizing-border, 2px));
   -webkit-transform: rotate(-45deg);
           transform: rotate(-45deg);
   -webkit-animation: componentRotate 1s linear infinite;
@@ -17486,11 +17506,12 @@ textarea {
 .kd-timeline {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  padding: 0;
   font-variant: tabular-nums;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
   margin: 0;
-  padding: 0;
+  padding: 0 4px;
   overflow: hidden;
   list-style: none;
 }
@@ -17504,13 +17525,13 @@ textarea {
           font-feature-settings: 'tnum';
   position: relative;
   margin: 0;
-  padding-bottom: var(--kd-c-timeline-spacing-padding-bottom, 26px);
+  padding-bottom: var(--kd-c-timeline-spacing-padding-bottom, 24px);
   font-size: var(--kd-c-timeline-content-font-size, var(--kd-g-font-size-small, 12px));
 }
 .kd-timeline .kd-timeline-item-tail {
   position: absolute;
-  left: calc((9px - 1px) / 2);
-  height: calc(100% - 9px * 2 + 4px);
+  left: calc((var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
+  height: calc(100% - var(--kd-c-timeline-dot-sizing, 9px) * 2 + 4px);
   border-left: var(--kd-c-timeline-sizing-width, 1px) solid var(--kd-c-timeline-line-color, var(--kd-g-color-border-weak, #e5e5e5));
 }
 .kd-timeline .kd-timeline-item.pending .kd-timeline-item-dot {
@@ -17523,8 +17544,8 @@ textarea {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   position: absolute;
-  width: 9px;
-  height: 9px;
+  width: var(--kd-c-timeline-dot-sizing, 9px);
+  height: var(--kd-c-timeline-dot-sizing, 9px);
   border-radius: 50%;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
@@ -17547,7 +17568,7 @@ textarea {
 }
 .kd-timeline .kd-timeline-item-dot.custom {
   position: absolute;
-  left: calc(9px / 2);
+  left: calc(var(--kd-c-timeline-dot-sizing, 9px) / 2);
   width: auto;
   height: auto;
   margin-top: 0;
@@ -17562,7 +17583,7 @@ textarea {
 }
 .kd-timeline .kd-timeline-item-content {
   position: relative;
-  margin: 0 0 0 calc(2 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px);
+  margin: 0 0 0 calc(2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px);
   word-break: break-word;
   color: var(--kd-c-timeline-content-color-text, var(--kd-g-color-text-primary, #212121));
 }
@@ -17582,7 +17603,7 @@ textarea {
   left: 50%;
 }
 .kd-timeline.alternate .kd-timeline-item-dot {
-  margin-left: calc(-1 * (9px - 1px) / 2);
+  margin-left: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
 }
 .kd-timeline.alternate .kd-timeline-item-dot.custom {
   margin-left: 1px;
@@ -17604,24 +17625,24 @@ textarea {
   right: 4.5px;
 }
 .kd-timeline.right .kd-timeline-item-dot {
-  margin-right: calc(-1 * (9px - 1px) / 2);
+  margin-right: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
 }
 .kd-timeline.right .kd-timeline-item-dot.custom {
-  margin-right: 1px;
+  margin-right: -18px;
 }
 .kd-timeline.right .kd-timeline-item .kd-timeline-item-content {
   left: 0;
   text-align: right;
-  margin: 0 calc(2 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px) 0 0;
+  margin: 0 calc(2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px) 0 0;
   width: auto;
 }
 .kd-timeline.label.left .kd-timeline-item-tail,
 .kd-timeline.label.left .kd-timeline-item-dot,
 .kd-timeline.label.left .kd-timeline-item-dot.custom {
-  left: calc((2 * 8px) + (9px / 2));
+  left: calc((2 * 8px) + (var(--kd-c-timeline-dot-sizing, 9px) / 2));
 }
 .kd-timeline.label.left .kd-timeline-item-dot {
-  margin-left: calc(-1 * (9px - 1px) / 2);
+  margin-left: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
 }
 .kd-timeline.label.left .kd-timeline-item-dot.custom {
   margin-left: 1px;
@@ -17632,7 +17653,7 @@ textarea {
   color: var(--kd-c-timeline-label-color-text, #666666);
 }
 .kd-timeline.label.left .kd-timeline-item .kd-timeline-item-content {
-  left: calc(9px + 7.5px);
+  left: calc(var(--kd-c-timeline-dot-sizing, 9px) + 7.5px);
   text-align: left;
   margin-right: 16px;
 }
@@ -17640,13 +17661,13 @@ textarea {
 .kd-timeline.label.right .kd-timeline-item-dot,
 .kd-timeline.label.right .kd-timeline-item-dot.custom {
   left: auto;
-  right: calc((2 * 8px) + (9px / 2));
+  right: calc((2 * 8px) + (var(--kd-c-timeline-dot-sizing, 9px) / 2));
 }
 .kd-timeline.label.right .kd-timeline-item-dot {
-  margin-right: calc(-1 * (9px - 1px) / 2);
+  margin-right: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
 }
 .kd-timeline.label.right .kd-timeline-item-dot.custom {
-  right: calc(-1 * (9px - 1px) / 2);
+  right: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
 }
 .kd-timeline.label.right .kd-timeline-item .kd-timeline-item-label {
   position: absolute;
@@ -17655,7 +17676,7 @@ textarea {
 }
 .kd-timeline.label.right .kd-timeline-item .kd-timeline-item-content {
   left: auto;
-  right: calc(9px + 7.5px);
+  right: calc(var(--kd-c-timeline-dot-sizing, 9px) + 7.5px);
   text-align: right;
   margin-left: 17px;
 }
@@ -17666,8 +17687,8 @@ textarea {
 }
 .kd-timeline.label.alternate .kd-timeline-item:nth-child(2n) .kd-timeline-item-label {
   position: absolute;
-  left: calc(50% + (2 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px) - 9px / 2);
-  width: calc(50% - (2 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px) + 9px / 2);
+  left: calc(50% + (2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px) - var(--kd-c-timeline-dot-sizing, 9px) / 2);
+  width: calc(50% - (2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px) + var(--kd-c-timeline-dot-sizing, 9px) / 2);
   text-align: left;
 }
 .kd-timeline.pending .kd-timeline-item.last .kd-timeline-item-tail {
@@ -18339,6 +18360,24 @@ textarea {
     普通组件内部自身层级应设置在0-100间
 */
 /* -----------  zIndex  ——————---- end */
+.node-hover-hover {
+  -webkit-transition: background-color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: background-color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
+}
+.node-hover-hover:hover {
+  background-color: var(--kd-c-tree-node-color-backgroung-hover, var(--kd-g-color-hover, #f5f5f5));
+  cursor: pointer;
+}
+.node-selected {
+  background-color: var(--kd-c-tree-node-color-backgroung-checked, var(--kd-g-color-theme-3, #e3eeff)) !important;
+  color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
+}
+.node-selected .kd-tree-node-title {
+  color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
+}
+.node-selected .kd-tree-node-icon {
+  color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
+}
 .kd-tree {
   position: relative;
   overflow: auto;
@@ -18374,6 +18413,15 @@ textarea {
       -ms-flex-align: center;
           align-items: center;
 }
+.kd-tree-node-root .kd-spin-dot-spin {
+  border: none;
+  width: var(--kd-c-tree-expand-icon-loading-sizing-width, 16px);
+  height: var(--kd-c-tree-expand-icon-loading-sizing-height, 16px);
+}
+.kd-tree-node-root .kd-spin-dot-spin .kd-spin-dot-item {
+  width: var(--kd-c-tree-expand-icon-loading-sizing-width, 16px);
+  height: var(--kd-c-tree-expand-icon-loading-sizing-height, 16px);
+}
 .kd-tree-node-fb-children-pointerEvents * {
   pointer-events: none;
 }
@@ -18414,8 +18462,8 @@ textarea {
 }
 .kd-tree-node-icon {
   cursor: pointer;
-  height: var(--kd-c-tree-expand-icon-sizing-height, 22px);
-  width: var(--kd-c-tree-expand-icon-sizing-width, 22px);
+  height: var(--kd-c-tree-expand-icon-sizing-height, 16px);
+  width: var(--kd-c-tree-expand-icon-sizing-width, 16px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -18428,9 +18476,13 @@ textarea {
   font-size: var(--kd-c-tree-node-icon-font-size, 16px);
   color: var(--kd-c-tree-node-icon-color-text, #666666);
 }
+.kd-tree-node-icon-hover:hover {
+  background-color: var(--kd-c-tree-node-color-backgroung-hover, var(--kd-g-color-hover, #f5f5f5));
+  cursor: pointer;
+}
 .kd-tree-node-icon-hidden {
-  height: var(--kd-c-tree-node-icon-sizing-height, 20px);
-  width: var(--kd-c-tree-node-icon-sizing-width, 20px);
+  height: var(--kd-c-tree-node-icon-sizing-height, 16px);
+  width: var(--kd-c-tree-node-icon-sizing-width, 16px);
   -ms-flex-negative: 0;
       flex-shrink: 0;
   opacity: 0;
@@ -18471,10 +18523,28 @@ textarea {
       -ms-flex-align: center;
           align-items: center;
   height: 100%;
+  padding-left: 4px;
+}
+.kd-tree-node-title-wrap-hover {
+  -webkit-transition: background-color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: background-color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
+}
+.kd-tree-node-title-wrap-hover:hover {
+  background-color: var(--kd-c-tree-node-color-backgroung-hover, var(--kd-g-color-hover, #f5f5f5));
+  cursor: pointer;
+}
+.kd-tree-node-title-wrap-selected {
+  background-color: var(--kd-c-tree-node-color-backgroung-checked, var(--kd-g-color-theme-3, #e3eeff)) !important;
+  color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
+}
+.kd-tree-node-title-wrap-selected .kd-tree-node-title {
+  color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
+}
+.kd-tree-node-title-wrap-selected .kd-tree-node-icon {
+  color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
 }
 .kd-tree-node-title {
   white-space: nowrap;
-  margin-left: 6px;
 }
 .kd-tree-node-selected {
   background-color: var(--kd-c-tree-node-color-backgroung-checked, var(--kd-g-color-theme-3, #e3eeff)) !important;
@@ -18523,8 +18593,8 @@ textarea {
           transform: translateY(-50%);
 }
 .kd-tree-node-leaf-icon {
-  height: var(--kd-c-tree-node-icon-sizing-height, 20px);
-  width: var(--kd-c-tree-node-icon-sizing-width, 20px);
+  height: var(--kd-c-tree-node-icon-sizing-height, 16px);
+  width: var(--kd-c-tree-node-icon-sizing-width, 16px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;