@kdcloudjs/kdesign 1.1.2 → 1.1.3

package/dist/kdesign-complete.less

@@ -1749,19 +1749,11 @@
   box-sizing: border-box;
   font-size: @checkbox-font-size;
   color: @checkbox-font-color;
-  height: @checkbox-middle-size-height;
+  line-height: 18px;
   &-no-child {
     height: @checkbox-default-input-height;
     width: @checkbox-default-input-width;
-  }
-  &-small {
-    height: @checkbox-small-size-height;
-  }
-  &-middle {
-    height: @checkbox-middle-size-height;
-  }
-  &-large {
-    height: @checkbox-large-size-height;
+    box-sizing: border-box;
   }
   &-group > *:not(:last-child) {
     margin-right: @checkbox-group-margin-right;
@@ -1789,7 +1781,7 @@
 .@{checkbox-prefix-cls}-square {
   border-radius: 2px;
   border: 1px solid @checkbox-border-color;
-  padding: @checkbox-square-padding;
+  padding: @checkbox-square-padding-horizontal @checkbox-square-padding-vertical;
   transition: color @checkbox-transition-duration, border-color @checkbox-transition-duration;
   &:not(&-disabled)::after {
     content: '';
@@ -1844,13 +1836,14 @@
     animation: kdZoomLeaveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1);
   }
   &-triangle-disabled {
-    border-bottom-color: @checkbox-disabled-bg-color;
+    border-bottom-color: @checkbox-disabled-text-color;
   }
 
   &-disabled,
   &-disabled:hover {
     border-color: @checkbox-border-color;
-    color: @checkbox-font-color;
+    color: @checkbox-disabled-text-color;
+    background-color: @checkbox-disabled-bg-color;
     cursor: not-allowed !important;
   }
   &-checked {
@@ -1878,6 +1871,11 @@
     box-sizing: border-box;
     opacity: 0;
   }
+  &.checked {
+    .@{checkbox-prefix-cls}-children {
+      color: @checkbox-font-color;
+    }
+  }
 }
 
 .@{checkbox-prefix-cls}-default {
@@ -1893,7 +1891,7 @@
   &-disabled,
   &-disabled:hover,
   &-disabled:hover &-wrapper {
-    color: @checkbox-font-color;
+    color: @checkbox-disabled-text-color;
     border-color: @checkbox-border-color;
     cursor: not-allowed !important;
   }
@@ -1931,9 +1929,13 @@
     width: 100%;
   }
   &-checked-disabled {
-    background-color: @checkbox-disabled-bg-color !important;
-    border-color: @checkbox-disabled-bg-color !important;
+    background-color: @checkbox-default-disabled-color-bg !important;
+    border-color: @checkbox-default-disabled-color-border !important;
     cursor: not-allowed !important;
+
+    .@{checkbox-prefix-cls}-default-inner {
+      color: @checkbox-disabled-text-color;
+    }
   }
   &-checked {
     background-color: @checkbox-checked-border-color;
@@ -1967,64 +1969,68 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    width: 8px;
-    height: 8px;
+    width: @checkbox-default-indeterminate-square;
+    height: @checkbox-default-indeterminate-square;
     background-color: @checkbox-checked-border-color;
     border: 0;
     transform: translate(-50%,-50%) scale(1);
     opacity: 1;
     content: " ";
   }
+  &.checked {
+    .@{checkbox-prefix-cls}-children {
+      color: @checkbox-font-color;
+    }
+  }
 }
 
 
 
 @checkbox-prefix: '--@{kd-prefix}-c-checkbox';
 
-// font-size
-@checkbox-font-size: var(~'@{checkbox-prefix}-font-size', @font-size-small); //默认字体大小
-@checkbox-default-input-icon-size: var(~'@{checkbox-prefix}-default-input-icon-font-size', 14px); // 勾选输入框勾勾图标大小
-@checkbox-square-input-icon-size: var(~'@{checkbox-prefix}-default-input-icon-font-size', 12px); // 边框类型三角内勾选输入框勾勾图标大小
-
 // colors
 @checkbox-color-theme: var(~'@{checkbox-prefix}-color-theme', @color-theme);
-@checkbox-font-color: var(~'@{checkbox-prefix}-color-text-primary', @color-text-primary);
-@checkbox-border-color: var(~'@{checkbox-prefix}-color-border', @color-border-strong);
-@checkbox-checked-border-color: var(~'@{checkbox-prefix}-color-border-active',  @color-theme);
-@checkbox-checked-font-color: var(~'@{checkbox-prefix}-color-text-hover',  @color-theme);
-@checkbox-default-input-icon-color: var(~'@{checkbox-prefix}-default-input-icon-color',  #fff); // 勾选输入框边勾勾图标颜色
-@checkbox-square-input-icon-color: var(~'@{checkbox-prefix}-square-input-icon-color',  #fff); // 边框类型三角内勾选输入框勾勾图标颜色
-@checkbox-bg-color: var(~'@{checkbox-prefix}-color-background',  @color-background);
-@checkbox-disabled-bg-color: var(~'@{checkbox-prefix}-color-background-disabled',  @color-disabled);
+@checkbox-font-color: var(~'@{checkbox-prefix}-color-text-primary', #212121);
+@checkbox-border-color: var(~'@{checkbox-prefix}-color-border', #d9d9d9);
+@checkbox-checked-border-color: var(~'@{checkbox-prefix}-color-border-active', @color-theme);
+@checkbox-checked-font-color: var(~'@{checkbox-prefix}-color-text-hover', @color-theme);
+@checkbox-default-input-icon-color: var(~'@{checkbox-prefix}-default-input-icon-color', #fff); // 勾选输入框边勾勾图标颜色
+@checkbox-square-input-icon-color: var(~'@{checkbox-prefix}-square-input-icon-color', #fff); // 边框类型三角内勾选输入框勾勾图标颜色
+@checkbox-bg-color: var(~'@{checkbox-prefix}-color-background', @color-background);
+@checkbox-disabled-bg-color: var(~'@{checkbox-prefix}-color-background-disabled', @color-background-contain-disabled);
+@checkbox-disabled-border-color: var(~'@{checkbox-prefix}-color-border-disabled', @color-border-disabled);
+@checkbox-disabled-text-color: var(~'@{checkbox-prefix}-color-text-disabled', @color-disabled);
+@checkbox-default-disabled-color-bg: var(~'@{checkbox-prefix}-default-color-background-disabled', #e5e5e5);
+@checkbox-default-disabled-color-border: var(~'@{checkbox-prefix}-default-color-background-disabled', #d9d9d9);
 
-// sizing
-@checkbox-small-size-height: var(~'@{checkbox-prefix}-sizing-height-small',  32px); // 小尺寸复选框
-@checkbox-middle-size-height: var(~'@{checkbox-prefix}-sizing-height-middle',  36px); // 中尺寸复选框
-@checkbox-large-size-height: var(~'@{checkbox-prefix}-sizing-height-large',  40px); // 大尺寸复选框
+// font
+@checkbox-font-size: var(~'@{checkbox-prefix}-font-size', @font-size-small); //默认字体大小
+@checkbox-default-input-icon-size: var(~'@{checkbox-prefix}-default-input-icon-font-size', 12px); // 勾选输入框勾勾图标大小
+@checkbox-square-input-icon-size: var(~'@{checkbox-prefix}-default-input-icon-font-size', 12px); // 边框类型三角内勾选输入框勾勾图标大小
 
-// @checkbox-border-width: 1px; // 边框类型边框大小
-@checkbox-border-width: var(~'@{checkbox-prefix}-border-width',  1px); // 边框类型边框大小
+// motion
+@checkbox-transition-duration: var(~'@{checkbox-prefix}-motion-duration', @duration-promptly);
 
-@checkbox-default-input-height: var(~'@{checkbox-prefix}-default-input-sizing-height',  16px); // 勾选输入框高度
-@checkbox-default-input-width: var(~'@{checkbox-prefix}-default-input-sizing-width',  16px); // 勾选输入框宽度
+// radius
+@checkbox-default-input-border-radius: var(~'@{checkbox-prefix}-default-input-radius-border', 2px); // 勾选输入框圆角
 
-// @checkbox-default-input-border-width: 1px; // 勾选输入框边框大小
-@checkbox-default-input-border-width: var(~'@{checkbox-prefix}-default-input-border-width',  1px); // 勾选输入框边框大小 不需要
+// sizing
+@checkbox-border-width: var(~'@{checkbox-prefix}-border-width', 1px); // 边框类型边框大小
+@checkbox-default-input-height: var(~'@{checkbox-prefix}-default-input-sizing-height', 14px); // 勾选输入框高度
+@checkbox-default-input-width: var(~'@{checkbox-prefix}-default-input-sizing-width', 14px); // 勾选输入框宽度
+@checkbox-default-input-border-width: var(~'@{checkbox-prefix}-default-input-border-width', 1px); // 勾选输入框边框大小 不需要
+@checkbox-square-triangle-height: var(~'@{checkbox-prefix}-square-triangle-sizing-height', 18px); // 边框类型右下角三角高度
+@checkbox-square-triangle-width: var(~'@{checkbox-prefix}-square-triangle-sizing-width', 18px); // 边框类型右下角三角宽度
+@checkbox-default-indeterminate-square: var(~'@{checkbox-prefix}-default-indeterminate-sizing-square', 6px); // 半选框的大小
 
-@checkbox-square-triangle-height: var(~'@{checkbox-prefix}-square-triangle-sizing-height',  18px); // 边框类型右下角三角高度
-@checkbox-square-triangle-width: var(~'@{checkbox-prefix}-square-triangle-sizing-width',  18px); // 边框类型右下角三角宽度
 
 // spacing
-@checkbox-group-margin-right: var(~'@{checkbox-prefix}-group-spacing-margin-right',  8px); // 按钮组的间距
-@checkbox-default-padding: var(~'@{checkbox-prefix}-default-spacing-padding',  0); // 默认类型复选框内边距
-@checkbox-default-input-margin-right: var(~'@{checkbox-prefix}-default-input-spacing-margin-right',  8px); // 勾选输入框与右侧内容间距
-@checkbox-square-padding: var(~'@{checkbox-prefix}-square-spacing-padding',  0 20px); // 边框类型内边距
-
-// radius
-@checkbox-default-input-border-radius: var(~'@{checkbox-prefix}-default-input-radius-border',  2px); // 勾选输入框圆角
+@checkbox-group-margin-right: var(~'@{checkbox-prefix}-group-spacing-margin-right', 12px); // 按钮组的间距
+@checkbox-default-padding: var(~'@{checkbox-prefix}-default-spacing-padding', 0); // 默认类型复选框内边距
+@checkbox-default-input-margin-right: var(~'@{checkbox-prefix}-default-input-spacing-margin-right', 4px); // 勾选输入框与右侧内容间距
+@checkbox-square-padding-horizontal: var(~'@{checkbox-prefix}-square-spacing-padding-horizontal', 7px); // 边框类型内边距
+@checkbox-square-padding-vertical: var(~'@{checkbox-prefix}-square-spacing-padding-vertical', 12px); // 边框类型内边距
 
-// motion
-@checkbox-transition-duration: var(~'@{checkbox-prefix}-motion-duration', @duration-promptly);
 
 
 
@@ -4819,12 +4825,13 @@ textarea {
 	&-disabled {
 		background-color: @input-background-color-disabled-inner;
 		border-color: @input-border-color-disabled-inner;
-		color: @input-color-disabled-inner;
+    color: @input-affix-color;
 		cursor: not-allowed;
 	}
 	&-underline&-disabled {
+    color: @input-color-disabled-inner;
 		background-color: @input-background-color-inner;
-		border-color: @input-border-color-disabled-inner;
+		border-color: @input-underline-border-color-disabled-inner;
 	}
 	&-size-small {
 		.input-size(@input-small-height-inner, @input-small-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
@@ -4854,6 +4861,7 @@ textarea {
 				align-items: center;
 				justify-content: center;
 				word-break: keep-all;
+        color: @input-affix-color;
 			}
 			&-suffix {
 				margin-left: 4px;
@@ -4942,7 +4950,7 @@ textarea {
 				}
 				.@{input-prefix-cls}-group-addon {
 					position: relative;
-					color: @input-font-color-inner;
+					color: @input-affix-color;
 					padding: 0 9px;
 					font-weight: 400;
 					font-size: 14px;
@@ -4974,7 +4982,6 @@ textarea {
 					&-disabled {
 						background-color: @input-background-color-disabled-inner;
 						border-color: @input-border-color-disabled-inner;
-						color: @input-color-disabled-inner;
 						cursor: not-allowed;
 					}
 				}
@@ -5066,6 +5073,7 @@ textarea {
   border: none;
   border-bottom: 1px solid @input-color-border;
   border-radius: 0 !important;
+  padding-left: 0;
 }
 
 
@@ -5074,40 +5082,43 @@ textarea {
 
 
 // color
-@input-font-color-inner: var(~'@{input-prefix}-color', @color-text-secondary);
-@input-placeholder-color-inner: var(~'@{input-prefix}-color-placeholder', @color-text-third);
+@input-font-color-inner: var(~'@{input-prefix}-color-text', @color-text-primary);
+@input-placeholder-color-inner: var(~'@{input-prefix}-placeholder-color-text', @color-text-placeholder);
 @input-color-border: var(~'@{input-prefix}-color-border', #999);
 @input-background-color-inner: var(~'@{input-prefix}-color-background', @color-white);
 @input-background-color-disabled-inner: var(~'@{input-prefix}-color-background-disabled', @color-background-contain-disabled);
 @input-border-color-focused: var(~'@{input-prefix}-color-border-focused', @color-theme);
 @input-border-color-disabled-inner: var(~'@{input-prefix}-color-border-disabled', @color-border-strong);
+@input-underline-border-color-disabled-inner: var(~'@{input-prefix}-underline-color-border-disabled', @color-border-weak);
 @input-color-disabled-inner: var(~'@{input-prefix}-color-disabled', @color-disabled);
+@input-affix-color: var(~'@{input-prefix}-affix-color-text', @color-text-primary);
 
-// sizing
-@input-small-height-inner: var(~'@{input-prefix}-small-sizing-height', 20px);
-@input-middle-height-inner: var(~'@{input-prefix}-middle-sizing-height', 30px);
-@input-large-height-inner: var(~'@{input-prefix}-large-sizing-height', 36px);
-@input-border-width-inner: var(~'@{input-prefix}-sizing-border', 1px);
-
-// spacing
-@input-small-padding-vertical-inner: var(~'@{input-prefix}-small-spacing-padding-vertical', 3px);
-@input-small-padding-horizontal-inner: var(~'@{input-prefix}-small-spacing-padding-horizontal', 9px);
-@input-middle-padding-vertical-inner: var(~'@{input-prefix}-middle-spacing-padding-vertical', 5px);
-@input-middle-padding-horizontal-inner: var(~'@{input-prefix}-middle-spacing-padding-horizontal', 9px);
-@input-large-padding-vertical-inner: var(~'@{input-prefix}-large-spacing-padding-vertical', 8px);
-@input-large-padding-horizontal-inner: var(~'@{input-prefix}-large-spacing-padding-horizontal', 9px);
+// font
+@input-small-font-size-inner: var(~'@{input-prefix}-font-size-small', @font-size-small);
+@input-middle-font-size-inner: var(~'@{input-prefix}-font-size-middle', @font-size-middle);
+@input-large-font-size-inner: var(~'@{input-prefix}-font-size-large', @font-size-large);
 
 // motion
 @transition-duration-inner: var(~'@{input-prefix}-motion-duration', @duration-promptly);
 
-// font
-@input-small-font-size-inner: var(~'@{input-prefix}-small-font-size', @font-size-small);
-@input-middle-font-size-inner: var(~'@{input-prefix}-middle-font-size', @font-size-middle);
-@input-large-font-size-inner: var(~'@{input-prefix}-large-font-size', @font-size-large);
-
 // radius
 @input-border-radius-inner: var(~'@{input-prefix}-radius-border', @radius-border);
 
+// sizing
+@input-small-height-inner: var(~'@{input-prefix}-sizing-height-small', 20px);
+@input-middle-height-inner: var(~'@{input-prefix}-sizing-height-middle', 30px);
+@input-large-height-inner: var(~'@{input-prefix}-sizing-height-large', 36px);
+@input-border-width-inner: var(~'@{input-prefix}-sizing-border', 1px);
+
+// spacing
+@input-small-padding-vertical-inner: var(~'@{input-prefix}-spacing-padding-vertical-small', 3px);
+@input-small-padding-horizontal-inner: var(~'@{input-prefix}-spacing-padding-horizontal-small', 9px);
+@input-middle-padding-vertical-inner: var(~'@{input-prefix}-spacing-padding-vertical-middle', 5px);
+@input-middle-padding-horizontal-inner: var(~'@{input-prefix}-spacing-padding-horizontal-middle', 9px);
+@input-large-padding-vertical-inner: var(~'@{input-prefix}-spacing-padding-vertical-large', 8px);
+@input-large-padding-horizontal-inner: var(~'@{input-prefix}-spacing-padding-horizontal-large', 9px);
+
+
 
 
 
@@ -5300,7 +5311,7 @@ textarea {
       padding: 0 16px;
       color: @layout-trigger-color;
       height: @layout-trigger-height;
-      line-height: calc(@layout-trigger-height - 2px);
+      line-height: calc(@layout-trigger-height - 4px);
       font-size: 20px;
       background: @layout-trigger-background;
       cursor: pointer;
@@ -5386,16 +5397,17 @@ textarea {
 @layout-trigger-background-light: var(~'@{layout-custom-prefix}-trigger-color-background-light', @color-background);
 @layout-trigger-color-light: var(~'@{layout-custom-prefix}-trigger-color-text-light', @color-text-primary);
 
-// spacing
-@layout-header-padding: var(~'@{layout-custom-prefix}-header-spacing-padding', 0 20px 0 35px);
-@layout-footer-padding: var(~'@{layout-custom-prefix}-footer-spacing-padding', 24px 50px);
-
 // sizing
 @layout-header-height: var(~'@{layout-custom-prefix}-header-sizing-height', 52px);
 @layout-trigger-height: var(~'@{layout-custom-prefix}-trigger-sizing-height', 50px);
 @layout-zero-trigger-width: var(~'@{layout-custom-prefix}-trigger-sizing-width', 36px);
 @layout-zero-trigger-height: var(~'@{layout-custom-prefix}-trigger-sizing-height', 42px);
 
+// spacing
+@layout-header-padding: var(~'@{layout-custom-prefix}-header-spacing-padding', 0 20px 0 35px);
+@layout-footer-padding: var(~'@{layout-custom-prefix}-footer-spacing-padding', 24px 50px);
+
+
 
 
 @wrapper-prefix-cls: ~'@{kd-prefix}-link-wrapper';
@@ -5561,6 +5573,7 @@ textarea {
 
   &-collapsed {
     width: 50px;
+    min-width: auto;
   }
 
   &-light {
@@ -5713,6 +5726,19 @@ textarea {
   }
 }
 
+.@{menu-prefix-cls}-dark {
+  .@{submenu-prefix-cls}-sub {
+    background: @menu-sub-inline-color-background;
+  }
+
+  .@{submenu-prefix-cls}-sub-second,.@{submenu-prefix-cls}-sub-third  {
+    background: @menu-sub-color-background;
+  }
+}
+
+
+
+
 
 
 // 菜单默认样式
@@ -5720,6 +5746,7 @@ textarea {
   position: relative;
   width: 100%;
   height: 100%;
+  min-width: 138px;
   background-color: @menu-color-background;
   color: @menu-sub-color;
 }
@@ -5793,7 +5820,6 @@ textarea {
 .light-hover {
   background-color: @menu-light-color-background;
   color: @menu-light-color-hover;
-  border-right: 2px solid @menu-light-color-active;
 }
 
 .light-default {
@@ -5815,32 +5841,29 @@ textarea {
 
 @menu-prefix: '--@{kd-prefix}-c-menu';
 
-// shadow
 // color
 @menu-color-disabled: var(~'@{menu-prefix}-color-disabled', @color-disabled);
-@menu-sub-color: var(~'@{menu-prefix}-sub-color', rgba(255, 255, 255, 0.65));
-@menu-sub-color-hover: var(~'@{menu-prefix}-sub-color-hover', @color-white);
-@menu-sub-color-active: var(~'@{menu-prefix}-sub-color-active', @color-theme);
-@menu-sub-color-background: var(~'@{menu-prefix}-sub-color-background', #21242d);
+@menu-sub-color: var(~'@{menu-prefix}-sub-color-text', rgba(255, 255, 255, 0.65));
+@menu-sub-color-hover: var(~'@{menu-prefix}-sub-color-text-hover', @color-white);
+@menu-sub-color-active: var(~'@{menu-prefix}-sub-color-text-active', @color-white);
+@menu-sub-color-background: var(~'@{menu-prefix}-sub-color-background', #121319);
+@menu-sub-inline-color-background: var(~'@{menu-prefix}-sub-inline-color-background', #1f212b);
 @menu-inline-color-active: var(~'@{menu-prefix}-inline-color-active', @color-white);
 @menu-color-background: var(~'@{menu-prefix}-color-background', #343848);
-
-@menu-light-color: var(~'@{menu-prefix}-light-color', @color-text-primary);
-@menu-light-color-hover: var(~'@{menu-prefix}-light-color-hover', @color-ongoing);
-@menu-light-color-active: var(~'@{menu-prefix}-light-color-active', @color-theme);
+@menu-light-color: var(~'@{menu-prefix}-light-color-text', @color-text-primary);
+@menu-light-color-hover: var(~'@{menu-prefix}-light-color-text-hover', @color-ongoing);
+@menu-light-color-active: var(~'@{menu-prefix}-light-color-text-active', @color-theme);
 @menu-light-color-background: var(~'@{menu-prefix}-light-color-background', @color-background-ongoing);
 
-// sizing
-@menu-item-height: var(~'@{menu-prefix}-item-sizing-height', 50px);
-// spacing
+// font
+@menu-icon-font-size: var(~'@{menu-prefix}-icon-font-size', @font-size-xx-large);
+
 // motion
 @menu-motion-duration: var(~'@{menu-prefix}-motion-duration', @duration-promptly);
 
-// font
-@menu-icon-font-size: var(~'@{menu-prefix}-icon-font-size', @font-size-xx-large);
+// sizing
+@menu-item-height: var(~'@{menu-prefix}-item-sizing-height', 50px);
 
-// radius
-// line-height
 // z-index
 @menu-z-index: var(~'@{menu-prefix}-z-index', @z-index-dialog);
 
@@ -6378,6 +6401,7 @@ textarea {
 
 
 @pagination-prefix-cls: ~'@{kd-prefix}-pagination';
+@dropdown-prefix-cls: ~'@{kd-prefix}-dropdown';
 @pagination-action-prefix-cls: ~'@{pagination-prefix-cls}-action';
 @pagination-selector-prefix-cls: ~'@{pagination-prefix-cls}-selector';
 @pagination-pages-prefix-cls: ~'@{pagination-prefix-cls}-pages';
@@ -6397,11 +6421,11 @@ textarea {
 
   .@{pagination-prefix-cls}-current {
     display: inline-block;
-    margin-right: 15px;
+    margin-right: 12px;
     vertical-align: middle;
     .@{pagination-prefix-cls}-current-input {
       box-sizing: border-box;
-      width: 32px;
+      width: 44px;
       height: @pagination-size;
       margin: 0 3px;
       padding: 0;
@@ -6421,7 +6445,7 @@ textarea {
       }
 
       &:disabled {
-        color: @color-disabled;
+        color: @pagination-disabled-color;
         border: @pagination-border-size solid @pagination-border-disabled-color;
         background: @pagination-button-disabled-background-color;
         cursor: not-allowed;
@@ -6482,7 +6506,7 @@ textarea {
           cursor: not-allowed;
 
           i {
-            color: @pagination-icon-disabled-color;
+            color: @pagination-disabled-color;
           }
         }
 
@@ -6516,6 +6540,7 @@ textarea {
     .@{pagination-selector-prefix-cls}-size {
       box-sizing: border-box;
       display: inline-block;
+      padding: 0;
       line-height: @pagination-size;
       font-size: @pagination-font-size;
       color: @color-text-primary;
@@ -6535,21 +6560,34 @@ textarea {
       &.disabled,
       &.disabled > i {
         cursor: not-allowed;
-        color: @color-border-disabled;
+        color: @pagination-disabled-color;
       }
 
       i {
-        margin-left: 5px;
+        margin-left: 4px;
         line-height: @pagination-size;
         font-size: @pagination-icon-size;
         color: @pagination-text-color;
       }
     }
+
+    .@{dropdown-prefix-cls}-menu-item {
+      text-align: right;
+      padding-right: @pagination-dropdown-item-spacing-horizontal;
+      padding-left: @pagination-dropdown-item-spacing-horizontal;
+
+      span {
+        white-space: nowrap;
+      }
+    }
   }
 
   // 简化版分页
   &.simple {
-    display: inline-block;
+    display: inline-flex;
+    justify-content: space-around;
+    align-items: center;
+    height: @pagination-size;
     border-radius: @radius-border;
     border: @pagination-border-size solid transparent;
 
@@ -6568,15 +6606,17 @@ textarea {
     }
 
     &.disabled > .@{pagination-prefix-cls}-item {
-      color: @color-border-disabled;
+      color: @pagination-disabled-color;
     }
 
     .@{pagination-prefix-cls}-item {
       .reset-component;
       display: inline-block;
+      height: @pagination-size;
+      overflow: hidden;
+      margin: 0 8px;
       vertical-align: middle;
       color: @color-text-primary;
-      margin: 0 18px;
 
       &:first-child,
       &:last-child {
@@ -6591,7 +6631,7 @@ textarea {
           margin: 0;
 
           &:disabled {
-            color: @color-disabled;
+            color: @pagination-disabled-color;
             cursor: not-allowed;
           }
         }
@@ -6618,7 +6658,7 @@ textarea {
         &:hover,
         &:active {
           &:not(:disabled) {
-            border-color: @pagination-border-hover-color
+            border-color: @pagination-border-hover-color;
           }
 
           i {
@@ -6630,7 +6670,7 @@ textarea {
           cursor: not-allowed;
 
           i {
-            color: @pagination-icon-disabled-color;
+            color: @pagination-disabled-color;
           }
         }
 
@@ -6693,7 +6733,7 @@ textarea {
               border-color: @pagination-border-hover-color;
 
               &:disabled {
-                border-color: @pagination-border-disabled-color
+                border-color: @pagination-border-disabled-color;
               }
             }
           }
@@ -6714,7 +6754,7 @@ textarea {
 
           &:disabled {
             cursor: not-allowed;
-            color: @color-disabled;
+            color: @pagination-disabled-color;
           }
         }
       }
@@ -6752,11 +6792,8 @@ textarea {
           background-color: @color-background-contain;
         }
 
-        &:hover,
-        &:active,
         &.active,
-        &:first-child,
-        &:last-child {
+        &:hover {
           button {
             color: @color-theme;
 
@@ -6769,16 +6806,16 @@ textarea {
         &:first-child,
         &:last-child {
           button {
-            width: @pagination-nicety-size;
+            width: @pagination-size;
             padding: 0;
-            line-height: calc(@pagination-nicety-size - 2px);
+            line-height: calc(@pagination-size - 2px);
           }
         }
 
         button {
           .reset-component;
-          min-width: @pagination-nicety-size;
-          height: @pagination-nicety-size;
+          min-width: @pagination-size;
+          height: @pagination-size;
           padding: 0 6px;
           cursor: pointer;
           outline: none;
@@ -6791,7 +6828,11 @@ textarea {
 
           &:disabled {
             cursor: not-allowed;
-            color: @color-disabled;
+            color: @pagination-disabled-color;
+          }
+
+          > i {
+            font-size: 16px;
           }
 
           .@{pagination-pages-prefix-cls}-jumper-icon {
@@ -6802,7 +6843,7 @@ textarea {
             width: 100%;
             height: 100%;
             color: @color-theme;
-            line-height: @pagination-nicety-size;
+            line-height: @pagination-size;
             background-color: @color-background;
             transition: opacity @duration-promptly;
           }
@@ -6812,13 +6853,13 @@ textarea {
 
     .@{pagination-jumper-prefix-cls} {
       display: inline-block;
-      margin-left: 12px;
+      margin-left: 4px;
       vertical-align: middle;
 
       .@{pagination-jumper-prefix-cls}-input {
         box-sizing: border-box;
-        width: 48px;
-        height: @pagination-nicety-size;
+        width: 40px;
+        height: @pagination-size;
         padding: 0;
         outline: none;
         text-align: center;
@@ -6836,7 +6877,7 @@ textarea {
         }
 
         &:disabled {
-          color: @color-disabled;
+          color: @pagination-disabled-color;
           border: @pagination-border-size solid @pagination-border-disabled-color;
           background: @pagination-button-disabled-background-color;
           cursor: not-allowed;
@@ -6845,14 +6886,14 @@ textarea {
 
       .@{pagination-jumper-prefix-cls}-button {
         .reset-component;
-        width: @pagination-nicety-size;
-        height: @pagination-nicety-size;
+        width: @pagination-size;
+        height: @pagination-size;
         margin-left: @pagination-button-spacing;
-        line-height: @pagination-nicety-size;
+        line-height: @pagination-size;
         vertical-align: top;
         cursor: pointer;
         outline: none;
-        color: @color-theme;
+        color: @color-text-primary;
         font-size: @pagination-font-size;
         border-radius: @radius-border;
         border: @pagination-border-size solid @color-border-strong;
@@ -6860,8 +6901,8 @@ textarea {
         transition: border-color @duration-promptly;
 
         &:hover,
-        &:active,
-        &.active {
+        &:active {
+          color: @color-theme;
           border-color: @pagination-border-hover-color;
 
           &:disabled {
@@ -6870,7 +6911,7 @@ textarea {
         }
 
         &:disabled {
-          color: @color-disabled;
+          color: @pagination-disabled-color;
           cursor: not-allowed;
         }
       }
@@ -6880,9 +6921,9 @@ textarea {
       .reset-component;
       position: relative;
       display: inline-block;
-      margin-left: 40px;
+      margin-left: 22px;
       outline: none;
-      height: @pagination-nicety-size;
+      height: @pagination-size;
       color: @color-text-primary;
       vertical-align: middle;
 
@@ -6890,11 +6931,11 @@ textarea {
         position: relative;
         box-sizing: border-box;
         display: inline-block;
-        width: 67px;
-        height: @pagination-nicety-size;
+        min-width: 64px;
+        height: @pagination-size;
         margin-right: 8px;
-        padding: 0 8px;
-        line-height: @pagination-nicety-size;
+        padding: 0 24px 0 4px;
+        line-height: @pagination-size;
         font-size: @pagination-font-size;
         color: @color-text-primary;
         text-align: left;
@@ -6917,7 +6958,7 @@ textarea {
         &.disabled,
         &.disabled > i {
           cursor: not-allowed;
-          color: @color-border-disabled;
+          color: @pagination-disabled-color;
         }
 
         i {
@@ -6929,7 +6970,7 @@ textarea {
           color: @pagination-hover-color;
           transform: translateY(-50%);
         }
-        
+
         .@{pagination-prefix-cls}-dropdown-icon-open {
           transform: rotate(180deg) translateY(50%);
         }
@@ -6951,11 +6992,10 @@ textarea {
 // color
 @pagination-text-color: var(~'@{pagination-custom-prefix}-text-color', @color-text-secondary);
 @pagination-hover-color: var(~'@{pagination-custom-prefix}-color-text-hover', @color-theme);
-@pagination-disabled-color: var(~'@{pagination-custom-prefix}-color-text-disabled', @color-border-disabled);
 @pagination-icon-color: var(~'@{pagination-custom-prefix}-button-color', @color-text-secondary);
-@pagination-icon-disabled-color: var(~'@{pagination-custom-prefix}-button-color-disabled', @color-border-disabled);
+@pagination-disabled-color: var(~'@{pagination-custom-prefix}-color-disabled', @color-disabled);
 @pagination-border-color: var(~'@{pagination-custom-prefix}-color-border', @color-border-strong);
-@pagination-border-hover-color: var(~'@{pagination-custom-prefix}-color-border-hover', @color-theme);
+@pagination-border-hover-color: var(~'@{pagination-custom-prefix}-color-border-hover', @color-theme-7);
 @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);
 
@@ -6963,13 +7003,14 @@ textarea {
 @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);
 @pagination-border-size: var(~'@{pagination-custom-prefix}-sizing-border-width', 1px);
 
 // spacing
 @pagination-button-spacing: var(~'@{pagination-custom-prefix}-button-spacing', 4px);
+@pagination-dropdown-item-spacing-horizontal: var(~'@{pagination-custom-prefix}-dropdown-item-spacing-padding-horizontal', 24px);