@kdcloudjs/kdesign 1.0.4 → 1.1.2

package/dist/kdesign-complete.less

@@ -191,6 +191,7 @@
       margin-right: 10px;
       font-size: @anchor-icon-font-size;
       color: #666;
+      cursor: pointer;
       &:hover:not(&-disabled) {
         color: @anchor-color-theme;
       }
@@ -201,6 +202,7 @@
       margin-left: 10px;
       font-size: @anchor-icon-font-size;
       color: #666;
+      cursor: pointer;
       &:hover:not(&-disabled) {
         color: @anchor-color-theme;
       }
@@ -252,6 +254,7 @@
   &-advanced-arrows {
     color: @anchor-advanced-arrows-color;
     font-size: @anchor-icon-font-size;
+    cursor: pointer;
     &:hover {
       color: @anchor-color-theme;
     }
@@ -275,6 +278,7 @@
       padding: 0 8px 8px 0;
       font-size: @anchor-advanced-lock-size;
       color: @anchor-advanced-arrows-color;
+      cursor: pointer;
     }
 
     .@{anchor-prefix-cls} {
@@ -322,6 +326,7 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       line-height: 1.5;
+      cursor: pointer;
       &:only-child {
         margin-bottom: 0;
       }
@@ -469,12 +474,8 @@
 }
 @avatar-custom-prefix: '--@{kd-prefix}-c-avatar';
 
-
-// sizing
-@avatar-size-x-small: var(~'@{avatar-custom-prefix}-size-x-small', 24px);
-@avatar-size-small: var(~'@{avatar-custom-prefix}-size-small', 32px);
-@avatar-size-base: var(~'@{avatar-custom-prefix}-size-base', 40px);
-@avatar-size-large: var(~'@{avatar-custom-prefix}-size-large', 60px);
+// color
+@avatar-color-background: var(~'@{avatar-custom-prefix}-color-background', #B2B2B2);
 
 // font
 @avatar-font-size-x-small: var(~'@{avatar-custom-prefix}-font-size-x-small', 14px);
@@ -482,11 +483,20 @@
 @avatar-font-size-base: var(~'@{avatar-custom-prefix}-font-size-base', 22px);
 @avatar-font-size-large: var(~'@{avatar-custom-prefix}-font-size-large', 36px);
 
+
 // radius
 @avatar-border-radius: var(~'@{avatar-custom-prefix}-border-radius', 2px);
 
-// color
-@avatar-color-background: var(~'@{avatar-custom-prefix}-color-background', #B2B2B2);
+// sizing
+@avatar-size-x-small: var(~'@{avatar-custom-prefix}-size-x-small', 24px);
+@avatar-size-small: var(~'@{avatar-custom-prefix}-size-small', 32px);
+@avatar-size-base: var(~'@{avatar-custom-prefix}-size-base', 40px);
+@avatar-size-large: var(~'@{avatar-custom-prefix}-size-large', 60px);
+
+
+
+
+
 
 
 
@@ -695,15 +705,20 @@
     background: @base-data-dropdown-color-background;
     overflow: auto;
     max-height: @base-data-dropdown-height;
+    color: @base-data-color-text;
 
     &-columns,
     &-options {
       display: flex;
       align-items: center;
 
+      &.selected {
+        color: @base-data-option-color-text-active;
+      }
+
       &-item {
         flex: 1;
-        padding: 0 12px;
+        padding: 0 @base-data-option-spacing-padding-vertical;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -747,7 +762,7 @@
     }
 
     &-columns {
-      height: 36px;
+      height: @base-data-dropdown-columns-height;
       background: @base-data-hover-bg;
     }
 
@@ -764,7 +779,7 @@
     }
 
     &-footer {
-      height: 40px;
+      height: @base-data-dropdown-footer-height;
       border-top: 1px solid @base-data-footer-color-border;
 
       &-btn {
@@ -837,6 +852,7 @@
 // color
 @base-data-border-color: var(~'@{base-data-custom-prefix}-color-border', #999);
 @base-data-hover-bg: var(~'@{base-data-custom-prefix}-color-background-hover', @color-hover);
+@base-data-color-text: var(~'@{base-data-custom-prefix}-color-text', #212121);
 @base-data-color-border-hover: var(~'@{base-data-custom-prefix}-border-color-hover', @color-theme);
 @base-data-dropdown-color-background: var(~'@{base-data-custom-prefix}-dropdown-radius-border', @color-background);
 @base-data-dropdown-icon-text-color: var(~'@{base-data-custom-prefix}-dropdown-icon-color-text', @color-warning);
@@ -846,6 +862,7 @@
 @base-data-footer-color-border: var(~'@{base-data-custom-prefix}-footer-color-border', @color-border-strong);
 @base-data-icon-text-color-hover: var(~'@{base-data-custom-prefix}-icon-color-text-hover', @color-theme);
 @base-data-footer-btn-text-color: var(~'@{base-data-custom-prefix}-footer-btn-color-text', @color-text-link);
+@base-data-option-color-text-active: var(~'@{base-data-custom-prefix}-option-color-text-active', @color-theme);
 
 // radius
 @base-data-dropdown-radius-border: var(~'@{base-data-custom-prefix}-dropdown-radius-border', @radius-border);
@@ -854,6 +871,11 @@
 @base-data-width: var(~'@{base-data-custom-prefix}-sizing-width', 230px);
 @base-data-dropdown-height: var(~'@{base-data-custom-prefix}-dropdown-sizing-height', 400px);
 @base-data-dropdown-options-height: var(~'@{base-data-custom-prefix}-dropdown-options-sizing-height', 32px);
+@base-data-dropdown-columns-height: var(~'@{base-data-custom-prefix}-dropdown-columns-height', 36px);
+@base-data-dropdown-footer-height: var(~'@{base-data-custom-prefix}-dropdown-footer-height', 40px);
+
+// spacing
+@base-data-option-spacing-padding-vertical: var(~'@{base-data-custom-prefix}-option-spacing-padding-vertical', 12px);
 
 // z-index
 @base-data-dropdown-z-index: var(~'@{base-data-custom-prefix}-dropdown-z-index', @z-index-popper);
@@ -936,7 +958,7 @@
 		&:disabled {
 			background-color: @btn-ghost-background-color-disabled !important;
 			border-color: @btn-ghost-border-color-disabled !important;
-			color: @btn-ghost-border-color-active !important;
+			color: @btn-ghost-border-color-disabled !important;
 		}
 	}
 	&-iconWrapper-left {
@@ -1123,16 +1145,16 @@
 @btn-ghost-border-color-disabled: var(~'@{button-custom-prefix}-ghost-color-border-disabled', @color-disabled); //幽灵disabled边框颜色
 @btn-ghost-font-color-disabled: var(~'@{button-custom-prefix}-ghost-color-text-disabled', @color-disabled); // 幽灵disabled按钮文字颜色
 
-@btn-second-background-color:  var(~'@{button-custom-prefix}-second-color-background', @color-background-3); // 次要背景颜色
+@btn-second-background-color: var(~'@{button-custom-prefix}-second-color-background', @color-background-3); // 次要背景颜色
 @btn-second-border-color: var(~'@{button-custom-prefix}-second-color-border', @color-border-strong-3); // 次要边框颜色
 @btn-second-font-color: var(~'@{button-custom-prefix}-second-color-text', @color-text-secondary-3); // 次要文字颜色
-@btn-second-background-color-hover:  var(~'@{button-custom-prefix}-second-color-background-hover', @color-white); // 次要hover背景颜色
+@btn-second-background-color-hover: var(~'@{button-custom-prefix}-second-color-background-hover', @color-white); // 次要hover背景颜色
 @btn-second-border-color-hover: var(~'@{button-custom-prefix}-second-color-border-hover', @color-border-strong); // 次要hover边框颜色
 @btn-second-font-color-hover: var(~'@{button-custom-prefix}-second-color-text-hover', @color-text-secondary); // 次要hover文字颜色
-@btn-second-background-color-active:  var(~'@{button-custom-prefix}-second-color-background-active', @color-white); // 次要active背景颜色
+@btn-second-background-color-active: var(~'@{button-custom-prefix}-second-color-background-active', @color-white); // 次要active背景颜色
 @btn-second-border-color-active: var(~'@{button-custom-prefix}-second-color-border-active', @color-border-strong); // 次要active边框颜色
 @btn-second-font-color-active: var(~'@{button-custom-prefix}-second-color-text-active', @color-text-secondary); // 次要active文字颜色
-@btn-second-background-color-disabled:  var(~'@{button-custom-prefix}-second-color-background-disabled', @color-background-3); // 次要disabled背景颜色
+@btn-second-background-color-disabled: var(~'@{button-custom-prefix}-second-color-background-disabled', @color-background-3); // 次要disabled背景颜色
 @btn-second-border-color-disabled: var(~'@{button-custom-prefix}-second-color-border-disabled', @color-text-secondary-3); // 次要disabled边框颜色
 @btn-second-font-color-disabled: var(~'@{button-custom-prefix}-second-color-text-disabled', @color-text-secondary-3); // 次要disabled文字颜色
 
@@ -1155,28 +1177,30 @@
 @btn-background-ghost-g-text-color: var(~'@{button-custom-prefix}-background-ghost-color-text', @color-theme);
 @btn-background-ghost-g-text-color-hover: var(~'@{button-custom-prefix}-background-ghost-color-text-hover', @color-white);
 
-// duration
-@btn-transition-fn: var(~'@{button-custom-prefix}-motion-timing-function', cubic-bezier(0.075, 0.82, 0.165, 1));
-@btn-duration-fade: var(~'@{button-custom-prefix}-motion-duration-fade', @duration-slowly);
-@btn-duration-wave: var(~'@{button-custom-prefix}-motion-duration-wave', @duration-quickly);
-
 // font
 @btn-g-font-weight: var(~'@{button-custom-prefix}-font-weight', @font-weight-light);
 @btn-small-font-size: var(~'@{button-custom-prefix}-font-size-small', @font-size-small); // 小号 文字大小
 @btn-middle-font-size: var(~'@{button-custom-prefix}-font-size-middle', @font-size-small); // 中号 文字大小
 @btn-large-font-size: var(~'@{button-custom-prefix}-font-size-large', @font-size-large); // 大号 文字大小
 
+// motion
+@btn-transition-fn: var(~'@{button-custom-prefix}-motion-timing-function', cubic-bezier(0.075, 0.82, 0.165, 1));
+@btn-duration-fade: var(~'@{button-custom-prefix}-motion-duration-fade', @duration-slowly);
+@btn-duration-wave: var(~'@{button-custom-prefix}-motion-duration-wave', @duration-quickly);
+
+
+
 // radius
-@btn-g-radius-border: var(~'@{button-custom-prefix}-radius-border', @radius-border);//圆角
+@btn-g-radius-border: var(~'@{button-custom-prefix}-radius-border', @radius-border); //圆角
 
 // sizing
 @btn-border-width: var(~'@{button-custom-prefix}-sizing-border', 1px);
 @btn-small-height: var(~'@{button-custom-prefix}-sizing-height-small', 24px); // 小号 高度
-@btn-small-min-width: var(~'@{button-custom-prefix}-sizing-min-height-small', 60px); // 小号 最小宽度
+@btn-small-min-width: var(~'@{button-custom-prefix}-sizing-min-width-small', 60px); // 小号 最小宽度
 @btn-middle-height: var(~'@{button-custom-prefix}-sizing-height-middle', 28px); // 中号 高度     高度配置
-@btn-middle-min-width: var(~'@{button-custom-prefix}-sizing-min-height-middle', 60px); // 中号 最小宽度
+@btn-middle-min-width: var(~'@{button-custom-prefix}-sizing-min-width-middle', 60px); // 中号 最小宽度
 @btn-large-height: var(~'@{button-custom-prefix}-sizing-height-large', 32px); // 大号 高度
-@btn-large-min-width: var(~'@{button-custom-prefix}-sizing-min-height-large', 80px); // 大号 最小宽度
+@btn-large-min-width: var(~'@{button-custom-prefix}-sizing-min-width-large', 80px); // 大号 最小宽度
 
 // spacing
 @btn-small-padding-vertical: var(~'@{button-custom-prefix}-spacing-padding-vertical-small', 3px); // 小号 内间距 纵向
@@ -1189,7 +1213,6 @@
 
 
 
-
 @card-prefix-cls: ~'@{kd-prefix}-card';
 
 .@{card-prefix-cls} {
@@ -1287,10 +1310,28 @@
 }
 
 
+.@{card-prefix-cls}-extra {
+  position: absolute;
+  top: 6px;
+  right: 4px;
+  i {
+    font-size: 22px;
+    width: 32px;
+    cursor: pointer;
+  }
+}
+
+.@{card-prefix-cls}-lists-icon {
+  font-size: 32px;
+  position: absolute;
+  top: 6px;
+  right: 40px;
+}
+
 
 @card-prefix: '--@{kd-prefix}-c-card';
 
-// shadow
+
 // color
 @card-color-background: var(~'@{card-prefix}-color-background', @color-white);
 @card-actions-color: var(~'@{card-prefix}-actions-color', @color-theme);
@@ -1299,21 +1340,21 @@
 @card-title-color: var(~'@{card-prefix}-title-color', @color-text-primary);
 @card-content-color: var(~'@{card-prefix}-content-color', @color-text-secondary);
 
+// font
+@card-title-font-size: var(~'@{card-prefix}-title-font-size', @font-size-middle);
+@card-content-font-size: var(~'@{card-prefix}-content-font-size', @font-size-small);
 
 // sizing
 @card-sizing-title-height: var(~'@{card-prefix}-sizing-title-height', 40px);
+
 // spacing
 @card-spacing-padding-horizontal: var(~'@{card-prefix}-spacing-padding-horizontal', 12px);
 @card-spacing-padding-vertical: var(~'@{card-prefix}-spacing-padding-vertical', 8px);
 
-// motion
-// font
-@card-title-font-size: var(~'@{card-prefix}-title-font-size', @font-size-middle);
-@card-content-font-size: var(~'@{card-prefix}-content-font-size', @font-size-small);
 
-// radius
-// line-height
-// z-index
+
+
+
 
 
 
@@ -1466,12 +1507,9 @@
 
 @carousel-prefix: '--@{kd-prefix}-c-carousel';
 
-// spacing
-@carousel-dots-margin-top: var(~'@{carousel-prefix}-spacing-margin-top', 15px); // 面板指示点到边界的边距
-@carousel-dots-margin-bottom: var(~'@{carousel-prefix}-spacing-margin-bottom', 15px); // 面板指示点到边界的边距
-@carousel-dots-margin-left: var(~'@{carousel-prefix}-spacing-margin-left', 15px); // 面板指示点到边界的边距
-@carousel-dots-margin-right: var(~'@{carousel-prefix}-spacing-margin-right', 15px); // 面板指示点到边界的边距
-@carousel-dots-marigin: var(~'@{carousel-prefix}-dots-spacing-margin', 4px); // 面板指示点的间距
+// color
+@carousel-dots-color-background: var(~'@{carousel-prefix}-dots-color-background', #D8D8D8); // 面板指示点的背景色
+@carousel-dots-color-background-active: var(~'@{carousel-prefix}-dots-color-hover', #666666); // 面板指示点的背景色
 
 // radius
 @carousel-dots-boder-radius: var(~'@{carousel-prefix}-dots-border-radius', 2px); // 面板指示点的圆角
@@ -1481,9 +1519,14 @@
 @carousel-dots-width: var(~'@{carousel-prefix}-dots-sizing-width', 12px); // 面板指示点的宽度
 @carousel-dots-height: var(~'@{carousel-prefix}-dots-sizing-height', 4px); // 面板指示点的高度
 
-// color
-@carousel-dots-color-background: var(~'@{carousel-prefix}-dots-color-background', #D8D8D8); // 面板指示点的背景色
-@carousel-dots-color-background-active: var(~'@{carousel-prefix}-dots-color-hover', #666666); // 面板指示点的背景色
+// spacing
+@carousel-dots-margin-top: var(~'@{carousel-prefix}-spacing-margin-top', 12px); // 面板指示点到边界的边距
+@carousel-dots-margin-bottom: var(~'@{carousel-prefix}-spacing-margin-bottom', 12px); // 面板指示点到边界的边距
+@carousel-dots-margin-left: var(~'@{carousel-prefix}-spacing-margin-left', 12px); // 面板指示点到边界的边距
+@carousel-dots-margin-right: var(~'@{carousel-prefix}-spacing-margin-right', 12px); // 面板指示点到边界的边距
+@carousel-dots-marigin: var(~'@{carousel-prefix}-dots-spacing-margin', 4px); // 面板指示点的间距
+
+
 
 
 
@@ -2282,19 +2325,19 @@
 @city-picker-background-color: var(~'@{city-picker-prefix}-color-background', @color-background-contain);
 @city-picker-background-hover-color: var(~'@{city-picker-prefix}-color-background-hover', @color-hover);
 
-// sizing
-@city-picker-panel-sizing-width: var(~'@{city-picker-prefix}-panel-sizing-width', 460px);
-@city-picker-panel-sizing-height: var(~'@{city-picker-prefix}-panel-sizing-height', 373px);
-// spacing
-// motion
 
 // font
 @city-picker-panel-font-size: var(~'@{city-picker-prefix}-panel-font-size', 12px);
 
 // radius
 @city-picker-panel-radius-border: var(~'@{city-picker-prefix}-panel-radius-border', @radius-border);
-// line-height
-// z-index
+
+// sizing
+@city-picker-panel-sizing-width: var(~'@{city-picker-prefix}-panel-sizing-width', 460px);
+@city-picker-panel-sizing-height: var(~'@{city-picker-prefix}-panel-sizing-height', 373px);
+
+
+
 
 
 
@@ -2528,7 +2571,7 @@
       bottom: -1px;
       height: 2px;
       margin-left: 11px;
-      background: #1890ff;
+      background: @date-bar-color-bg-active;
       opacity: 0;
       transition: all 0.3s ease-out;
       pointer-events: none;
@@ -2656,7 +2699,7 @@
 
             &:not(.@{datePicker-prefix-cls}-year-item-disabled) {
               .@{datePicker-prefix-cls}-year-text-selected {
-                background: #104ccc;
+                background: @date-square-item-color-selected;
               }
             }
           }
@@ -2712,7 +2755,7 @@
 
             &:not(.@{datePicker-prefix-cls}-month-item-disabled) {
               .@{datePicker-prefix-cls}-month-text-selected {
-                background: #104ccc;
+                background: @date-square-item-color-selected;
               }
             }
           }
@@ -2772,7 +2815,7 @@
 
             &:not(.@{datePicker-prefix-cls}-quarter-item-disabled) {
               .@{datePicker-prefix-cls}-quarter-text-selected {
-                background: #104ccc;
+                background: @date-square-item-color-selected;
               }
             }
           }
@@ -2839,7 +2882,7 @@
           }
 
           .@{datePicker-prefix-cls}-calendar-text-selected {
-            background: #104ccc !important;
+            background: @date-square-item-color-selected !important;
           }
         }
 
@@ -2902,7 +2945,7 @@
           &:hover {
             & .@{datePicker-prefix-cls}-calendar-item:not(.@{datePicker-prefix-cls}-calendar-item-disabled) {
               .@{datePicker-prefix-cls}-calendar-week-text::before {
-                background: #104ccc;
+                background: @date-square-item-color-selected;
               }
             }
           }
@@ -3018,7 +3061,7 @@
       height: 24px;
       width: 100%;
       margin: 0 -4px;
-      background: #e6f7ff;
+      background: @date-range-item-color-bg;
     }
   }
 
@@ -3112,7 +3155,7 @@
 
         .@{datePicker-prefix-cls}-time-cell-selected {
           .@{datePicker-prefix-cls}-time-cell-inner {
-            background: #e6f7ff;
+            background: @date-range-item-color-bg;
           }
         }
 
@@ -3324,7 +3367,6 @@
 
 @date-picker-custom-prefix: ~'--@{kd-prefix}-c-date-picker';
 
-// shadow
 // color
 @date-color-background-checked: var(~'@{date-picker-custom-prefix}-color-background-checked', @color-theme);
 @date-wrapper-color-background: var(~'@{date-picker-custom-prefix}-wrapper-color-background', @color-background);
@@ -3336,7 +3378,6 @@
 @date-input-color-background: var(~'@{date-picker-custom-prefix}-input-color-background', @color-white);
 @date-input-color-background-disabled: var(~'@{date-picker-custom-prefix}-input-color-background-disabled', @color-background-contain-disabled);
 @date-input-color-focus: var(~'@{date-picker-custom-prefix}-input-color-focused', @color-text-primary);
-
 @date-icon-color: var(~'@{date-picker-custom-prefix}-icon-color', @color-disabled);
 @date-clear-background-color: var(~'@{date-picker-custom-prefix}-clear-color-background', @color-background);
 @date-clear-background-color-hover: var(~'@{date-picker-custom-prefix}-clear-color-background-hover', @color-theme-5);
@@ -3344,8 +3385,10 @@
 @date-container-color: var(~'@{date-picker-custom-prefix}-container-color', @color-text-primary);
 @date-container-color-border: var(~'@{date-picker-custom-prefix}-container-color-border', @color-border-weak);
 @date-container-color-background: var(~'@{date-picker-custom-prefix}-container-color-background', @color-background-2);
-
 @date-footer-color-background: var(~'@{date-picker-custom-prefix}-footer-color-background', @color-background);
+@date-bar-color-bg-active: var(~'@{date-picker-custom-prefix}-bar-color-bg-active', @color-theme);
+@date-square-item-color-selected: var(~'@{date-picker-custom-prefix}-square-item-color-selected', @color-theme-hover);
+@date-range-item-color-bg: var(~'@{date-picker-custom-prefix}-range-item-color-bg', @color-theme-1);
 
 // sizing
 @date-width: var(~'@{date-picker-custom-prefix}-sizing-width', 230px);
@@ -3363,8 +3406,6 @@
 @date-large-padding-horizontal: var(~'@{date-picker-custom-prefix}-large-spacing-padding-horizontal', 9px); // 大号 内间距 横向
 @date-suffix-spacing-margin-left: var(~'@{date-picker-custom-prefix}-suffix-spacing-margin-left', 10px);
 
-
-// motion
 // font
 @date-container-font-size: var(~'@{date-picker-custom-prefix}-container-font-size', @font-size-small);
 @date-panel-font-size: var(~'@{date-picker-custom-prefix}-panel-font-size', @font-size-middle);
@@ -3376,22 +3417,6 @@
 @date-input-border-radius: var(~'@{date-picker-custom-prefix}-input-radius-border', @radius-border);
 @date-panel-border-radius: var(~'@{date-picker-custom-prefix}-panel-radius-border', @radius-border);
 
-// line-height
-// z-index
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -3426,17 +3451,17 @@
       position: absolute;
     }
   }
-  &-container-left {
-    .drawer-container-placement-horizontal();
-  }
+  &-container-left,
   &-container-right {
     .drawer-container-placement-horizontal();
   }
-  &-container-top {
-    .drawer-container-placement-vertical();
-  }
+  &-container-top,
   &-container-bottom {
     .drawer-container-placement-vertical();
+    .@{drawer-prefix-cls}-body {
+      max-height: @drawer-body-max-height-vertical;
+      overflow-y: auto;
+    }
   }
 
   &-container-box {
@@ -3450,10 +3475,9 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: @drawer-header-padding;
+      padding: @drawer-header-padding-vertical @drawer-header-padding-horizontal;
       border-bottom: @drawer-dividing-width solid @drawer-dividing-color;
       .@{drawer-prefix-cls}-title {
-        margin-left: 20px;
         letter-spacing: 0;
         line-height: 26px;
         font-size: @drawer-title-font-size;
@@ -3464,7 +3488,6 @@
           color: @drawer-close-icon-color;
           font-size: @drawer-close-icon-font-size;
         }
-        margin-right: 10px;
         cursor: pointer;
       }
     }
@@ -3512,10 +3535,12 @@
 @drawer-close-icon-font-size: var(~'@{drawer-custom-prefix}-close-icon-font-size', @font-size-large);
 
 // sizing
+@drawer-body-max-height-vertical: var(~'@{drawer-custom-prefix}-body-max-height-vertical', 470px);
 @drawer-dividing-width: var(~'@{drawer-custom-prefix}-dividing-sizing-width', 1px);
 
 // spacing
-@drawer-header-padding: var(~'@{drawer-custom-prefix}-header-sizing-padding', 12px);
+@drawer-header-padding-vertical: var(~'@{drawer-custom-prefix}-header-sizing-padding-vertical', 12px);
+@drawer-header-padding-horizontal: var(~'@{drawer-custom-prefix}-header-sizing-padding-horizontal', 16px);
 @drawer-body-padding: var(~'@{drawer-custom-prefix}-body-sizing-padding', 16px);
 
 
@@ -4077,13 +4102,12 @@
   position: relative;
   &-message {
     position: absolute;
-    left: 0;
+    left: -7px;
     right: 0;
     padding: @form-field-message-spacing-padding-horizontal @form-field-message-spacing-padding-vertical;
     font-size: @form-field-message-font-size;
     line-height: @form-field-message-line-height;
     color: @form-error-color;
-    background-color: @form-error-color-background;
     word-break: break-word;
     overflow: hidden;
     white-space: nowrap;
@@ -4095,29 +4119,24 @@
 
 @form-prefix: '--@{kd-prefix}-c-form';
 
-// shadow
 // color
 @form-field-color: var(~'@{form-prefix}-field-color', @color-text-secondary);
 @form-error-color: var(~'@{form-prefix}-error-color', @color-error);
-@form-error-color-background: var(~'@{form-prefix}-error-color-background', @color-background-error);
-
-// sizing
-// spacing
-@form-field-spacing-margin-right: var(~'@{form-prefix}-field-spacing-margin-right', 30px);
-@form-field-spacing-margin-bottom: var(~'@{form-prefix}-field-spacing-margin-bottom', 22px);
-@form-field-message-spacing-padding-horizontal: var(~'@{form-prefix}-field-message-spacing-padding-horizontal', 2px);
-@form-field-message-spacing-padding-vertical: var(~'@{form-prefix}-field-message-spacing-padding-vertical', 8px);
 
-// motion
 // font
 @form-field-label-font-size: var(~'@{form-prefix}-field-label-font-size',12px);
 @form-field-message-font-size: var(~'@{form-prefix}-field-message-font-size', 12px);
 
-// radius
 // line-height
 @form-field-label-line-height: var(~'@{form-prefix}-field-label-line-height', 18px);
 @form-field-message-line-height: var(~'@{form-prefix}-field-message-line-height', 18px);
-// z-index
+
+// spacing
+@form-field-spacing-margin-right: var(~'@{form-prefix}-field-spacing-margin-right', 30px);
+@form-field-spacing-margin-bottom: var(~'@{form-prefix}-field-spacing-margin-bottom', 22px);
+@form-field-message-spacing-padding-horizontal: var(~'@{form-prefix}-field-message-spacing-padding-horizontal', 2px);
+@form-field-message-spacing-padding-vertical: var(~'@{form-prefix}-field-message-spacing-padding-vertical', 8px);
+
 
 
 
@@ -4385,24 +4404,11 @@
 
 @image-prefix: '--@{kd-prefix}-c-image';
 
-
-
-
-
-
-
 @image-transition-duration: var(~'@{image-prefix}-transition-duration',@transition-duration);
-
 @image-motion-ease-out: var(~'@{image-prefix}-motion-ease-out',@motion-ease-out);
 @image-motion-ease-in: var(~'@{image-prefix}-motion-ease-out',@motion-ease-in);
-
-
-
 @image-z-index-masker: var(~'@{image-prefix}-z-index-masker',@z-index-masker);
-
 @image-border-radius: var(~'@{image-prefix}-radius-border',@radius-border);
-
-
 @image-action-transition: var(~'@{image-prefix}-action-transition',@duration-quickly);
 
 
@@ -5857,13 +5863,13 @@ textarea {
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  min-width: 280px;
-  max-width: 1000px;
-  margin: 0 auto 16px;
-  padding: 10px 20px;
+  min-width: @message-sizing-min-width;
+  max-width: @message-sizing-max-width;
+  margin: 0 auto @message-spacing-margin-bottom;
+  padding: @message-spacing-padding-horizontal @message-spacing-padding-vertical;
   color: @message-info-text-color;
   border: 1px solid @message-info-color-border;
-  border-radius: 4px;
+  border-radius: @message-border-radius;
   background-color: @message-info-color-background;
   pointer-events: all;
   animation: kdNoticeEffect calc(@transition-duration - 0.2s) @ease-out forwards;
@@ -5871,19 +5877,32 @@ textarea {
   &-content {
     display: flex;
     justify-content: space-between;
-    font-size: 12px;
+    font-size: @message-font-size;
+    line-height: @messgae-line-height;
 
     &-main{
       display: flex;
+    }
+
+    &-icon-wrapper{
+      font-size: @message-icon-font-size;
+      margin-right: @message-icon-spacing-margin-right;
+      align-self: flex-start;
+      display: inline-flex;
       align-items: center;
+    }
 
-      &>div:nth-child(1){
-        margin-right: 10px;
-      }
+    &-text {
+      max-height: @message-text-sizing-max-height;
+      overflow: auto;
     }
 
     &-close{
       cursor: pointer;
+      color: @message-close-color-text;
+      font-size: @message-close-font-size;
+      margin-left: @message-close-spacing-margin-left;
+      display: inline-flex;
 
       &:hover {
         color: @message-icon-text-color-hover;
@@ -5942,17 +5961,41 @@ textarea {
 // color
 @message-info-color-background: var(~'@{message-custom-prefix}-info-color-background', #e0efff);
 @message-info-color-border: var(~'@{message-custom-prefix}-info-color-border', #b3d5ff);
+@message-info-text-color: var(~'@{message-custom-prefix}-info-color-text', #0e5fd8);
 @message-success-color-background: var(~'@{message-custom-prefix}-success-color-background', #dcfae4);
 @message-success-color-border: var(~'@{message-custom-prefix}-success-color-border', #a1e6b5);
-@message-success-text-color: var(~'@{message-custom-prefix}-success-color-text', @color-success);
+@message-success-text-color: var(~'@{message-custom-prefix}-success-color-text', #1BA854);
 @message-warning-color-background: var(~'@{message-custom-prefix}-warning-color-background', #fff1d4);
 @message-warning-color-border: var(~'@{message-custom-prefix}-warning-color-border', #ffe0a6);
-@message-warning-text-color: var(~'@{message-custom-prefix}-warning-color-text', @color-warning);
+@message-warning-text-color: var(~'@{message-custom-prefix}-warning-color-text', #FF991C);
 @message-error-color-background: var(~'@{message-custom-prefix}-error-color-background', #ffdbe0);
 @message-error-color-border: var(~'@{message-custom-prefix}-error-color-border', #ffadb6);
-@message-error-text-color: var(~'@{message-custom-prefix}-error-color-text', @color-error);
-@message-icon-text-color-hover: var(~'@{message-custom-prefix}-icon-color-text-hover', @color-border-ongoing);
-@message-info-text-color: var(~'@{message-custom-prefix}-info-color-text', @color-text-link);
+@message-error-text-color: var(~'@{message-custom-prefix}-error-color-text', #FB2323);
+@message-close-color-text: var(~'@{message-custom-prefix}-close-color-text', #666);
+@message-icon-text-color-hover: var(~'@{message-custom-prefix}-close-color-text-hover', @color-theme-hover);
+
+// font
+@message-font-size: var(~'@{message-custom-prefix}-font-size', 14px);
+@message-icon-font-size: var(~'@{message-custom-prefix}-icon-font-size', 16px);
+@message-close-font-size: var(~'@{message-custom-prefix}-font-size', 16px);
+
+// line-height
+@messgae-line-height: var(~'@{message-custom-prefix}-line-height', 20px);
+
+// radius
+@message-border-radius: var(~'@{message-custom-prefix}-border-radius', 4px);
+
+// sizing
+@message-sizing-max-width: var(~'@{message-custom-prefix}-sizing-max-width', 1000px);
+@message-sizing-min-width: var(~'@{message-custom-prefix}-sizing-min-width', 280px);
+@message-text-sizing-max-height: var(~'@{message-custom-prefix}-text-sizing-max-height', 160px);
+
+// spacing
+@message-spacing-margin-bottom: var(~'@{message-custom-prefix}-spacing-margin-bottom', 16px);
+@message-spacing-padding-horizontal: var(~'@{message-custom-prefix}-spacing-padding-horizontal', 10px);
+@message-spacing-padding-vertical: var(~'@{message-custom-prefix}-spacing-padding-vertical', 20px);
+@message-icon-spacing-margin-right: var(~'@{message-custom-prefix}-icon-spacing-margin-right', 8px);
+@message-close-spacing-margin-left: var(~'@{message-custom-prefix}-close-spacing-margin-left', 12px);
 
 // z-index
 @message-z-index: var(~'@{message-custom-prefix}-z-index', @z-index-apex);
@@ -6211,7 +6254,7 @@ textarea {
       }
     }
 
-    &-main {
+    &-description {
       height: 46px;
       padding: 10px 20px;
       font-size: 12px;
@@ -6916,6 +6959,10 @@ textarea {
 @pagination-border-disabled-color: var(~'@{pagination-custom-prefix}-color-border-disabled', @color-border-strong);
 @pagination-button-disabled-background-color: var(~'@{pagination-custom-prefix}-button-color-background-disabled', @color-background-contain-disabled);
 
+// font
+@pagination-font-size: var(~'@{pagination-custom-prefix}-font-size', @font-size-small);
+@pagination-icon-size: var(~'@{pagination-custom-prefix}-icon-font-size', @font-size-large);
+
 // sizing
 @pagination-size: var(~'@{pagination-custom-prefix}-sizing-square', 24px);
 @pagination-nicety-size: var(~'@{pagination-custom-prefix}-nicety-sizing-square', 30px);
@@ -6924,9 +6971,7 @@ textarea {
 // spacing
 @pagination-button-spacing: var(~'@{pagination-custom-prefix}-button-spacing', 4px);
 
-// font
-@pagination-font-size: var(~'@{pagination-custom-prefix}-font-size', @font-size-small);
-@pagination-icon-size: var(~'@{pagination-custom-prefix}-icon-font-size', @font-size-large);
+
 
 
 
@@ -7241,15 +7286,8 @@ textarea {
 
 
 @progress-prefix: '--@{kd-prefix}-c-progress';
-
-
-
 @progress-transition-fn:  cubic-bezier(0.66, 0, 0.34, 1);
 
-
-
-
-
 // color
 @progress-remaining-color: var(~'@{progress-prefix}-color-remaining', #e5e5e5);//背景色
 @progress-default-color: var(~'@{progress-prefix}-color-default', #5582f3);//进度条 默认色
@@ -7269,7 +7307,6 @@ textarea {
 @progress-border-radius: var(~'@{progress-prefix}-radius-border', 100px);//线性进度条圆角
 
 
-
 // sizing
 @progress-line-stroke-width: var(~'@{progress-prefix}-line-stroke-sizing-width', 8px);
 @progress-circle-stroke-width: var(~'@{progress-prefix}-circle-stroke-sizing-width', 4px);
@@ -7611,19 +7648,9 @@ textarea {
 
 
 
-
 @radio-prefix: '--@{kd-prefix}-c-radio';
-
-
-
-
-
-
 @radio-transition-fn:  cubic-bezier(0.075, 0.82, 0.165, 1);
 
-
-
-
 // color
 @radio-font-color: var(~'@{radio-prefix}-color-font', @color-text-primary);//单选项字体颜色
 @radio-color-theme: var(~'@{radio-prefix}-color-theme', @color-theme);//悬停/选中跟随主题色
@@ -7636,19 +7663,13 @@ textarea {
 // font
 @radio-font-size: var(~'@{radio-prefix}-font-size', @font-size-small);//单选项字体大小
 
-
-
-
 //radius
 @radio-border-width:   var(~'@{radio-prefix}-radius-border-width',1px);
 
-
-
 // sizing
 @radio-circle-size:var(~'@{radio-prefix}-square-sizing-width-height',13px);//单选图标大小
 @radio-square-height:  var(~'@{radio-prefix}-square-sizing-height',32px);//单选框 高度
 
-
 // spacing
 @radio-margin-right:   var(~'@{radio-prefix}-spacing-margin-right',8px);
 @radio-square-padding-vertical: var(~'@{radio-prefix}-square-spacing-padding-vertical',0px); //内间距 纵向
@@ -8826,13 +8847,13 @@ textarea {
 @select-dropdown-bg: var(~'@{select-custom-prefix}-dropdown-color-background', @color-background);
 @select-disabled-option-bg: var(~'@{select-custom-prefix}-item-color-background-disabled', @color-background-contain-disabled);
 @select-item-active-bg: var(~'@{select-custom-prefix}-color-background', @color-hover);
-@select-item-selected-bg: var(~'@{select-custom-prefix}-color-background-selected', #f2f9ff);
+@select-item-selected-bg: var(~'@{select-custom-prefix}-color-background-selected', @color-theme-3);
 @select-g-color-border: var(~'@{select-custom-prefix}-color-border', @color-input);
 @select-g-color-border-foucs: var(~'@{select-custom-prefix}-color-border-foucs', @color-theme);
 @select-g-color-border-hover: var(~'@{select-custom-prefix}-color-border-hover', @color-theme);
 @select-border-g-color-border: var(~'@{select-custom-prefix}-border-color-border', @color-border-strong);
 @select-placeholder-color: var(~'@{select-custom-prefix}-placeholder-color-text', @color-text-third);
-@select-item-selected-color: var(~'@{select-custom-prefix}-item-color-text-selected', @color-ongoing);
+@select-item-selected-color: var(~'@{select-custom-prefix}-item-color-text-selected', @color-theme);
 @select-font-color: var(~'@{select-custom-prefix}-footer-color-text', @color-text-primary);
 @select-footer-g-text-color-selected: var(~'@{select-custom-prefix}-footer-color-text-selected', @color-text-link);
 @select-g-item-text-color-disabled: var(~'@{select-custom-prefix}-item-color-text-disabled', @color-disabled);
@@ -9333,7 +9354,7 @@ textarea {
         position: relative;
         width: 100%;
         height: 100%;
-        border: 1px solid @split-panel-trigger-border-color;
+        border: @split-panel-wrapper-border-width solid @split-panel-trigger-border-color;
         overflow: hidden;
     }
     &-panel {
@@ -9379,8 +9400,8 @@ textarea {
           transition: all calc(@transition-duration - 0.1s) @ease-out;
           &.is-active {
             .@{split-prefix-cls}-trigger-arrow {
-              border-color: @split-panel-trigger-border-color;
-              background: @split-panel-trigger-border-color;
+              border-color: @split-panel-trigger-arrow-color;
+              background: @split-panel-trigger-arrow-color;
               color: white;
             }
           }
@@ -9400,7 +9421,7 @@ textarea {
           &:not(.is-disabled) {
             &:hover{
               .@{split-prefix-cls}-trigger-arrow {
-                border-color: @split-panel-trigger-border-color;
+                border-color: @split-panel-trigger-arrow-color;
               }
             }
             .@{split-prefix-cls}-trigger-arrow:hover {
@@ -9418,61 +9439,42 @@ textarea {
           align-items: center;
           justify-content: center;
           transition: all calc(@transition-duration - 0.1s) @ease-out;
+          box-sizing: border-box;
+          border: @split-panel-arrow-border-width solid transparent;
           .@{kd-prefix}icon {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 12px;
-            height: 12px;
             font-size: 12px;
           }
           &.is-vertical {
-              width: 12px;
-              height: 16px;
+              width: @split-panel-arrow-vertical-width;
+              height: @split-panel-arrow-vertical-height;
               top: 50%;
               transform: translate(0, -50%);
-              .@{kd-prefix}icon {
-                height: 12px;
-                // position: absolute;
-                // top: 50%;
-                // transform: translate(0, -50%);
-              }
           }
           &.is-horizontal {
-              width: 16px;
-              height: 12px;
+              width: @split-panel-arrow-horizontal-width;
+              height: @split-panel-arrow-horizontal-height;
               left: 50%;
               transform: translate(-50%, 0);
-              .@{kd-prefix}icon {
-                width: 12px;
-                // position: absolute;
-                // left: 50%;
-                // transform: translate(-50%, 0);
-              }
           }
           &.top {
             bottom: 100%;
-            border: 1px solid transparent;
             border-bottom: none;
-            border-radius: 10px 10px 0 0;
+            border-radius: @split-panel-arrow-vertical-radius @split-panel-arrow-vertical-radius 0 0;
           }
           &.bottom {
             top: 100%;
-            border: 1px solid transparent;
             border-top: none;
-            border-radius: 0 0 10px 10px;
+            border-radius: 0 0 @split-panel-arrow-vertical-radius @split-panel-arrow-vertical-radius;
           }
           &.left {
             right: 100%;
-            border: 1px solid transparent;
             border-right: none;
-            border-radius: 10px 0 0 10px;
+            border-radius: @split-panel-arrow-horizontal-radius 0 0 @split-panel-arrow-horizontal-radius;
           }
           &.right {
             left: 100%;
-            border: 1px solid transparent;
             border-left: none;
-            border-radius: 0 10px 10px 0;
+            border-radius: 0 @split-panel-arrow-horizontal-radius @split-panel-arrow-horizontal-radius 0;
           }
         }
         &-vertical {
@@ -9519,13 +9521,24 @@ textarea {
 @split-panel-custom-prefix: ~'--@{kd-prefix}-c-split-panel';
 
 // color
-@split-panel-trigger-border-color: var(~'@{split-panel-custom-prefix}-trigger-color-border', @color-border-strong-2);
-@split-panel-trigger-arrow-color: var(~'@{split-panel-custom-prefix}-arrow-color-background', @color-input);
+@split-panel-trigger-border-color: var(~'@{split-panel-custom-prefix}-color-border', #d9d9d9);
+@split-panel-trigger-arrow-color: var(~'@{split-panel-custom-prefix}-arrow-color-background', #999);
 @split-panel-trigger-arrow-hover-color: var(~'@{split-panel-custom-prefix}-arrow-color-background-hover', @color-theme);
-@split-panel-trigger-line-color: var(~'@{split-panel-custom-prefix}-line-color-background', @color-border-strong-2);
+@split-panel-trigger-line-color: var(~'@{split-panel-custom-prefix}-line-color-background', #d9d9d9);
+
+// radius
+@split-panel-arrow-vertical-radius: var(~'@{split-panel-custom-prefix}-arrow-radius-border-vertical', 8px);
+@split-panel-arrow-horizontal-radius: var(~'@{split-panel-custom-prefix}-arrow-radius-border-horizontal', 8px);
 
 // sizing
-@split-panel-trigger-line-width: var(~'@{split-panel-custom-prefix}-line-sizing-width', 1px);
+@split-panel-wrapper-border-width: var(~'@{split-panel-custom-prefix}-wrapper-sizing-border', 1px);
+@split-panel-trigger-line-width: var(~'@{split-panel-custom-prefix}-line-sizing-border', 1px);
+@split-panel-arrow-border-width: var(~'@{split-panel-custom-prefix}-arrow-sizing-border', 1px);
+@split-panel-arrow-vertical-width: var(~'@{split-panel-custom-prefix}-arrow-sizing-width-vertical', 16px);
+@split-panel-arrow-vertical-height: var(~'@{split-panel-custom-prefix}-arrow-sizing-height-vertical', 16px);
+@split-panel-arrow-horizontal-width: var(~'@{split-panel-custom-prefix}-arrow-sizing-width-horizontal', 16px);
+@split-panel-arrow-horizontal-height: var(~'@{split-panel-custom-prefix}-arrow-sizing-height-horizontal', 16px);
+
 
 
 
@@ -9539,6 +9552,7 @@ textarea {
     text-align: center;
     color: @stepper-input-color;
     margin: 0 4px;
+    font-size: @stepper-input-font-size;
   }
 
   &-icon {
@@ -9659,10 +9673,8 @@ textarea {
 }
 
 
-
 @stepper-prefix: '--@{kd-prefix}-c-stepper';
 
-// shadow
 // color
 @stepper-input-color: var(~'@{stepper-prefix}-input-color', @color-text-primary);
 @stepper-icon-color: var(~'@{stepper-prefix}-icon-color', @color-text-secondary);
@@ -9670,6 +9682,14 @@ textarea {
 @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', #f6f7f9);
 
+// 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);
@@ -9678,14 +9698,6 @@ textarea {
 // spacing
 @stepper-input-spacing-padding-horizontal: var(~'@{stepper-prefix}-input-spacing-padding-horizontal', 9px);
 
-// motion
-@stepper-motion-duration: var(~'@{stepper-prefix}-motion-duration', @duration-promptly);
-
-// font
-// radius
-// line-height
-// z-index
-
 
 
 
@@ -11838,12 +11850,6 @@ template {
 @switch-prefix: '--@{kd-prefix}-c-switch';
 
 
-
-
-
-
-
-
 // color
 @switch-on-color: var(~'@{switch-prefix}-color-on', @color-theme);
 @switch-off-color: var(~'@{switch-prefix}-color-off', #999);
@@ -12849,11 +12855,7 @@ template {
 
 
 
-
-
 @timeline-prefix: '--@{kd-prefix}-c-timeline';
-
-
 @timeline-gap:  8px;
 
 // @timeline-dot-size: var(~'@{timeline-prefix}-dot-sizing',9px);
@@ -12861,10 +12863,6 @@ template {
 
 
 
-
-
-
-
 // color
 @timeline-finished-color:  var(~'@{timeline-prefix}-finished-color',@color-theme);
 @timeline-error-color:  var(~'@{timeline-prefix}-error-color',@color-error);
@@ -13123,9 +13121,13 @@ template {
       height: 28px;
       padding: 0 10px;
       box-sizing: border-box;
+      min-width:40px;
       & + .@{kd-prefix}-btn {
         margin-top: 20px;
       }
+      .@{kd-prefix}-btn-iconWrapper-left {
+        float: none;
+      }
     }
   }
 }
@@ -13161,7 +13163,7 @@ template {
 // text
 @transfer-list-item-checked: var(~'@{transfer-custom-prefix}-list-item-color-text-checked', @color-theme);
 @transfer-list-item-disabled: var(~'@{transfer-custom-prefix}-list-item-color-text-disabled', @color-disabled);
-@transfer-search-prefix-icon-color: var(~'@{transfer-custom-prefix}-search-icon-color-text-prefix', @color-theme);
+@transfer-search-prefix-icon-color: var(~'@{transfer-custom-prefix}-search-icon-color-text-prefix', #999);
 @transfer-search-suffix-icon-color: var(~'@{transfer-custom-prefix}-search-icon-color-text-suffix', #bbb);
 @transfer-search-suffix-icon-color-hover: var(~'@{transfer-custom-prefix}-search-icon-color-text-suffix-hover', #999);
 
@@ -13271,6 +13273,10 @@ template {
     .@{tree-node-prefix-cls}-title {
       color: @tree-node-checked-text-color;
     }
+
+    .@{tree-node-prefix-cls}-icon {
+      color: @tree-node-checked-text-color;
+    }
   }
 
   &-draggabled {
@@ -13307,8 +13313,8 @@ template {
 @tree-node-disabled-color: var(~'@{tree-prefix}-node-color-disabled', @color-disabled);
 @tree-node-disabled-border-color: var(~'@{tree-prefix}-node-color-border-disabled', @color-border-disabled);
 @tree-color-theme: var(~'@{tree-prefix}-color-theme', @color-theme);
-@tree-node-checked-bg-color: var(~'@{tree-prefix}-node-color-backgroung-checked', #E3EBFF);
-@tree-node-checked-text-color: var(~'@{tree-prefix}-node-color-text-checked', @color-theme-6);
+@tree-node-checked-bg-color: var(~'@{tree-prefix}-node-color-backgroung-checked', @color-theme-3);
+@tree-node-checked-text-color: var(~'@{tree-prefix}-node-color-text-checked', @color-theme);
 @tree-node-hover-bg-color: var(~'@{tree-prefix}-node-color-backgroung-hover', @color-hover);
 @tree-node-icon-color-text: var(~'@{tree-prefix}-node-icon-color-text', #666666);