@kdcloudjs/kdesign 1.1.2 → 1.1.3

package/dist/kdesign.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/kdesign v1.1.1
+ *   @kdcloudjs/kdesign v1.1.2
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -4562,24 +4562,17 @@ template {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   font-size: var(--kd-c-checkbox-font-size, var(--kd-g-font-size-small, 12px));
-  color: var(--kd-c-checkbox-color-text-primary, var(--kd-g-color-text-primary, #212121));
-  height: var(--kd-c-checkbox-sizing-height-middle, 36px);
+  color: var(--kd-c-checkbox-color-text-primary, #212121);
+  line-height: 18px;
 }
 .kd-checkbox-no-child {
-  height: var(--kd-c-checkbox-default-input-sizing-height, 16px);
-  width: var(--kd-c-checkbox-default-input-sizing-width, 16px);
-}
-.kd-checkbox-small {
-  height: var(--kd-c-checkbox-sizing-height-small, 32px);
-}
-.kd-checkbox-middle {
-  height: var(--kd-c-checkbox-sizing-height-middle, 36px);
-}
-.kd-checkbox-large {
-  height: var(--kd-c-checkbox-sizing-height-large, 40px);
+  height: var(--kd-c-checkbox-default-input-sizing-height, 14px);
+  width: var(--kd-c-checkbox-default-input-sizing-width, 14px);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .kd-checkbox-group > *:not(:last-child) {
-  margin-right: var(--kd-c-checkbox-group-spacing-margin-right, 8px);
+  margin-right: var(--kd-c-checkbox-group-spacing-margin-right, 12px);
 }
 .kd-checkbox-input {
   margin: 0;
@@ -4607,8 +4600,8 @@ template {
 }
 .kd-checkbox-square {
   border-radius: 2px;
-  border: 1px solid var(--kd-c-checkbox-color-border, var(--kd-g-color-border-strong, #d9d9d9));
-  padding: var(--kd-c-checkbox-square-spacing-padding, 0 20px);
+  border: 1px solid var(--kd-c-checkbox-color-border, #d9d9d9);
+  padding: var(--kd-c-checkbox-square-spacing-padding-horizontal, 7px) var(--kd-c-checkbox-square-spacing-padding-vertical, 12px);
   -webkit-transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
   transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
 }
@@ -4676,12 +4669,13 @@ template {
           animation: kdZoomLeaveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
 }
 .kd-checkbox-square-triangle-disabled {
-  border-bottom-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  border-bottom-color: var(--kd-c-checkbox-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-checkbox-square-disabled,
 .kd-checkbox-square-disabled:hover {
-  border-color: var(--kd-c-checkbox-color-border, var(--kd-g-color-border-strong, #d9d9d9));
-  color: var(--kd-c-checkbox-color-text-primary, var(--kd-g-color-text-primary, #212121));
+  border-color: var(--kd-c-checkbox-color-border, #d9d9d9);
+  color: var(--kd-c-checkbox-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  background-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   cursor: not-allowed !important;
 }
 .kd-checkbox-square-checked {
@@ -4700,20 +4694,23 @@ template {
           animation: kdZoomEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
 }
 .kd-checkbox-square-checked-disabled {
-  background-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
-  border-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
+  background-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
+  border-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
   cursor: not-allowed !important;
 }
 .kd-checkbox-square-wrapper {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  height: var(--kd-c-checkbox-default-input-sizing-height, 16px);
+  height: var(--kd-c-checkbox-default-input-sizing-height, 14px);
   width: 0;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   opacity: 0;
 }
+.kd-checkbox-square.checked .kd-checkbox-children {
+  color: var(--kd-c-checkbox-color-text-primary, #212121);
+}
 .kd-checkbox-default {
   border: none;
   padding: var(--kd-c-checkbox-default-spacing-padding, 0);
@@ -4729,8 +4726,8 @@ template {
 .kd-checkbox-default-disabled,
 .kd-checkbox-default-disabled:hover,
 .kd-checkbox-default-disabled:hover .kd-checkbox-default-wrapper {
-  color: var(--kd-c-checkbox-color-text-primary, var(--kd-g-color-text-primary, #212121));
-  border-color: var(--kd-c-checkbox-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  color: var(--kd-c-checkbox-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  border-color: var(--kd-c-checkbox-color-border, #d9d9d9);
   cursor: not-allowed !important;
 }
 .kd-checkbox-default-wrapper {
@@ -4739,7 +4736,7 @@ template {
   display: -ms-inline-flexbox;
   display: inline-flex;
   background-color: var(--kd-c-checkbox-color-background, var(--kd-g-color-background, #fff));
-  border: var(--kd-c-checkbox-default-input-border-width, 1px) solid var(--kd-c-checkbox-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  border: var(--kd-c-checkbox-default-input-border-width, 1px) solid var(--kd-c-checkbox-color-border, #d9d9d9);
   border-radius: var(--kd-c-checkbox-default-input-radius-border, 2px);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -4759,21 +4756,24 @@ template {
           box-shadow: 0 0 0 0 var(--kd-c-checkbox-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-checkbox-default-wrapper-size {
-  height: var(--kd-c-checkbox-default-input-sizing-height, 16px);
-  width: var(--kd-c-checkbox-default-input-sizing-width, 16px);
+  height: var(--kd-c-checkbox-default-input-sizing-height, 14px);
+  width: var(--kd-c-checkbox-default-input-sizing-width, 14px);
 }
 .kd-checkbox-default-margin {
-  margin-right: var(--kd-c-checkbox-default-input-spacing-margin-right, 8px);
+  margin-right: var(--kd-c-checkbox-default-input-spacing-margin-right, 4px);
 }
 .kd-checkbox-default-no-child {
   height: 100%;
   width: 100%;
 }
 .kd-checkbox-default-checked-disabled {
-  background-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
-  border-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
+  background-color: var(--kd-c-checkbox-default-color-background-disabled, #e5e5e5) !important;
+  border-color: var(--kd-c-checkbox-default-color-background-disabled, #d9d9d9) !important;
   cursor: not-allowed !important;
 }
+.kd-checkbox-default-checked-disabled .kd-checkbox-default-inner {
+  color: var(--kd-c-checkbox-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
 .kd-checkbox-default-checked {
   background-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
   border-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
@@ -4791,7 +4791,7 @@ template {
 .kd-checkbox-default-inner {
   position: absolute;
   color: var(--kd-c-checkbox-default-input-icon-color, #fff);
-  font-size: var(--kd-c-checkbox-default-input-icon-font-size, 14px);
+  font-size: var(--kd-c-checkbox-default-input-icon-font-size, 12px);
   height: 100%;
   width: 100%;
   top: 5%;
@@ -4813,8 +4813,8 @@ template {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 8px;
-  height: 8px;
+  width: var(--kd-c-checkbox-default-indeterminate-sizing-square, 6px);
+  height: var(--kd-c-checkbox-default-indeterminate-sizing-square, 6px);
   background-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
   border: 0;
   -webkit-transform: translate(-50%, -50%) scale(1);
@@ -4822,6 +4822,9 @@ template {
   opacity: 1;
   content: " ";
 }
+.kd-checkbox-default.checked .kd-checkbox-children {
+  color: var(--kd-c-checkbox-color-text-primary, #212121);
+}
 
 /* -----------  color  ——————---- start */
 /* -----------  color  ——————---- end */
@@ -8851,7 +8854,7 @@ textarea {
   min-width: 0;
   border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
   border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
-  color: var(--kd-c-input-color, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-input-color-text, var(--kd-g-color-text-primary, #212121));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
@@ -8865,13 +8868,13 @@ textarea {
   transition: border-color var(--kd-c-input-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-input::-webkit-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input::-moz-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input::-ms-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input:focus {
   -webkit-box-shadow: none;
@@ -8895,7 +8898,7 @@ textarea {
   min-width: 0;
   border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
   border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
-  color: var(--kd-c-input-color, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-input-color-text, var(--kd-g-color-text-primary, #212121));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
@@ -8912,13 +8915,13 @@ textarea {
   vertical-align: bottom;
 }
 .kd-input-textarea::-webkit-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-textarea::-moz-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-textarea::-ms-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-textarea:focus {
   -webkit-box-shadow: none;
@@ -8937,8 +8940,8 @@ textarea {
   right: 0;
   top: calc(100% + 1px);
   z-index: 1;
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999));
-  font-size: var(--kd-c-input-small-font-size, var(--kd-g-font-size-small, 12px));
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc));
+  font-size: var(--kd-c-input-font-size-small, var(--kd-g-font-size-small, 12px));
 }
 .kd-input-no-resize {
   resize: none;
@@ -8959,37 +8962,38 @@ textarea {
 .kd-input-disabled {
   background-color: var(--kd-c-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
-  color: var(--kd-c-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  color: var(--kd-c-input-affix-color-text, var(--kd-g-color-text-primary, #212121));
   cursor: not-allowed;
 }
 .kd-input-underline.kd-input-disabled {
+  color: var(--kd-c-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
   background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
-  border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
+  border-color: var(--kd-c-input-underline-color-border-disabled, var(--kd-g-color-border-weak, #e5e5e5));
 }
 .kd-input-size-small {
-  height: var(--kd-c-input-small-sizing-height, 20px);
-  line-height: calc(var(--kd-c-input-small-sizing-height, 20px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
-  font-size: var(--kd-c-input-small-font-size, var(--kd-g-font-size-small, 12px));
-  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-small-spacing-padding-horizontal, 9px);
+  height: var(--kd-c-input-sizing-height-small, 20px);
+  line-height: calc(var(--kd-c-input-sizing-height-small, 20px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-font-size-small, var(--kd-g-font-size-small, 12px));
+  padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-small, 9px);
 }
 .kd-input-size-middle {
-  height: var(--kd-c-input-middle-sizing-height, 30px);
-  line-height: calc(var(--kd-c-input-middle-sizing-height, 30px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
-  font-size: var(--kd-c-input-middle-font-size, var(--kd-g-font-size-middle, 14px));
-  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-small-spacing-padding-horizontal, 9px);
+  height: var(--kd-c-input-sizing-height-middle, 30px);
+  line-height: calc(var(--kd-c-input-sizing-height-middle, 30px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-font-size-middle, var(--kd-g-font-size-middle, 14px));
+  padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-small, 9px);
 }
 .kd-input-size-large {
-  height: var(--kd-c-input-large-sizing-height, 36px);
-  line-height: calc(var(--kd-c-input-large-sizing-height, 36px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
-  font-size: var(--kd-c-input-large-font-size, var(--kd-g-font-size-large, 16px));
-  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-small-spacing-padding-horizontal, 9px);
+  height: var(--kd-c-input-sizing-height-large, 36px);
+  line-height: calc(var(--kd-c-input-sizing-height-large, 36px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-font-size-large, var(--kd-g-font-size-large, 16px));
+  padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-small, 9px);
 }
 .kd-input-wrapper {
   width: 100%;
   min-width: 0;
   border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
   border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
-  color: var(--kd-c-input-color, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-input-color-text, var(--kd-g-color-text-primary, #212121));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
@@ -9010,13 +9014,13 @@ textarea {
   overflow: hidden;
 }
 .kd-input-wrapper::-webkit-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-wrapper::-moz-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-wrapper::-ms-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-wrapper:focus {
   -webkit-box-shadow: none;
@@ -9051,6 +9055,7 @@ textarea {
       -ms-flex-pack: center;
           justify-content: center;
   word-break: keep-all;
+  color: var(--kd-c-input-affix-color-text, var(--kd-g-color-text-primary, #212121));
 }
 .kd-input-wrapper .kd-input-suffix {
   margin-left: 4px;
@@ -9059,22 +9064,22 @@ textarea {
   margin-right: 4px;
 }
 .kd-input-wrapper-size-small {
-  height: var(--kd-c-input-small-sizing-height, 20px);
-  line-height: calc(var(--kd-c-input-small-sizing-height, 20px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
-  font-size: var(--kd-c-input-small-font-size, var(--kd-g-font-size-small, 12px));
-  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-small-spacing-padding-horizontal, 9px);
+  height: var(--kd-c-input-sizing-height-small, 20px);
+  line-height: calc(var(--kd-c-input-sizing-height-small, 20px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-font-size-small, var(--kd-g-font-size-small, 12px));
+  padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-small, 9px);
 }
 .kd-input-wrapper-size-middle {
-  height: var(--kd-c-input-middle-sizing-height, 30px);
-  line-height: calc(var(--kd-c-input-middle-sizing-height, 30px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
-  font-size: var(--kd-c-input-middle-font-size, var(--kd-g-font-size-middle, 14px));
-  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-middle-spacing-padding-horizontal, 9px);
+  height: var(--kd-c-input-sizing-height-middle, 30px);
+  line-height: calc(var(--kd-c-input-sizing-height-middle, 30px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-font-size-middle, var(--kd-g-font-size-middle, 14px));
+  padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-middle, 9px);
 }
 .kd-input-wrapper-size-large {
-  height: var(--kd-c-input-large-sizing-height, 36px);
-  line-height: calc(var(--kd-c-input-large-sizing-height, 36px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
-  font-size: var(--kd-c-input-large-font-size, var(--kd-g-font-size-large, 16px));
-  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-large-spacing-padding-horizontal, 9px);
+  height: var(--kd-c-input-sizing-height-large, 36px);
+  line-height: calc(var(--kd-c-input-sizing-height-large, 36px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-font-size-large, var(--kd-g-font-size-large, 16px));
+  padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-large, 9px);
 }
 .kd-input-wrapper-borderless {
   border: none !important;
@@ -9083,6 +9088,7 @@ textarea {
   border: none;
   border-bottom: 1px solid var(--kd-c-input-color-border, #999);
   border-radius: 0 !important;
+  padding-left: 0;
 }
 .kd-input-wrapper-focused {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
@@ -9092,7 +9098,7 @@ textarea {
   min-width: 0;
   border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
   border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
-  color: var(--kd-c-input-color, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-input-color-text, var(--kd-g-color-text-primary, #212121));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
@@ -9107,13 +9113,13 @@ textarea {
   display: inline-block;
 }
 .kd-input-wrapper-textarea::-webkit-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-wrapper-textarea::-moz-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-wrapper-textarea::-ms-input-placeholder {
-  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
 }
 .kd-input-wrapper-textarea:focus {
   -webkit-box-shadow: none;
@@ -9186,7 +9192,7 @@ textarea {
 }
 .kd-input-group-wrapper .kd-input-group .kd-input-group-addon {
   position: relative;
-  color: var(--kd-c-input-color, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-input-affix-color-text, var(--kd-g-color-text-primary, #212121));
   padding: 0 9px;
   font-weight: 400;
   font-size: 14px;
@@ -9202,7 +9208,7 @@ textarea {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  height: var(--kd-c-input-middle-sizing-height, 30px);
+  height: var(--kd-c-input-sizing-height-middle, 30px);
 }
 .kd-input-group-wrapper .kd-input-group .kd-input-group-addon:first-child {
   border-top-right-radius: 0;
@@ -9221,21 +9227,21 @@ textarea {
   border: none;
   border-bottom: 1px solid var(--kd-c-input-color-border, #999);
   border-radius: 0 !important;
+  padding-left: 0;
 }
 .kd-input-group-wrapper .kd-input-group .kd-input-group-addon-disabled {
   background-color: var(--kd-c-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
-  color: var(--kd-c-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
 }
 .kd-input-group-wrapper .kd-input-group-size-small .kd-input-group-addon {
-  height: var(--kd-c-input-small-sizing-height, 20px);
+  height: var(--kd-c-input-sizing-height-small, 20px);
 }
 .kd-input-group-wrapper .kd-input-group-middle-small .kd-input-group-addon {
-  height: var(--kd-c-input-middle-sizing-height, 30px);
+  height: var(--kd-c-input-sizing-height-middle, 30px);
 }
 .kd-input-group-wrapper .kd-input-group-large-small .kd-input-group-addon {
-  height: var(--kd-c-input-large-sizing-height, 36px);
+  height: var(--kd-c-input-sizing-height-large, 36px);
 }
 .kd-input-allowClear-spacing {
   padding-right: 20px;
@@ -9429,7 +9435,7 @@ textarea {
   padding: 0 16px;
   color: var(--kd-c-layout-trigger-color-text, var(--kd-g-color-white, #fff));
   height: var(--kd-c-layout-trigger-sizing-height, 50px);
-  line-height: calc(var(--kd-c-layout-trigger-sizing-height, 50px) - 2px);
+  line-height: calc(var(--kd-c-layout-trigger-sizing-height, 50px) - 4px);
   font-size: 20px;
   background: var(--kd-c-layout-trigger-color-background, #343848);
   cursor: pointer;
@@ -9750,24 +9756,24 @@ textarea {
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
 .hover {
-  background-color: var(--kd-c-menu-sub-color-background, #21242d);
-  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
 .light-hover {
   background-color: var(--kd-c-menu-light-color-background, var(--kd-g-color-background-ongoing, #f2f9ff));
-  color: var(--kd-c-menu-light-color-hover, var(--kd-g-color-ongoing, #276ff5));
-  border-right: 2px solid var(--kd-c-menu-light-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
 }
 .light-default {
-  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
 .kd-menu {
   position: relative;
   width: 100%;
   height: 100%;
+  min-width: 138px;
   background-color: var(--kd-c-menu-color-background, #343848);
-  color: var(--kd-c-menu-sub-color, rgba(255, 255, 255, 0.65));
+  color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
 }
 .kd-menu-inline .kd-menu-item {
   white-space: nowrap;
@@ -9785,18 +9791,18 @@ textarea {
 }
 .kd-menu-vertical .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover,
 .kd-menu-vertical .kd-menu-submenu-hover {
-  background-color: var(--kd-c-menu-sub-color-background, #21242d);
-  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
 .kd-menu-vertical .kd-menu-submenu {
   padding-right: 0;
 }
 .kd-menu-vertical .kd-menu-submenu-sub {
-  background: var(--kd-c-menu-sub-color-background, #21242d);
+  background: var(--kd-c-menu-sub-color-background, #121319);
 }
 .kd-menu-vertical .kd-menu-submenu-sub .kd-menu-item:hover,
 .kd-menu-vertical .kd-menu-submenu-sub .kd-menu-item-active {
-  color: var(--kd-c-menu-sub-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff));
 }
 .kd-menu-vertical .kd-menu-submenu-sub-second,
 .kd-menu-vertical .kd-menu-submenu-sub-third {
@@ -9825,44 +9831,43 @@ textarea {
 }
 .kd-menu-collapsed {
   width: 50px;
+  min-width: auto;
 }
 .kd-menu-light {
-  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
 .kd-menu-light .kd-menu-submenu-hover,
 .kd-menu-light .kd-menu-submenu-sub {
-  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
 .kd-menu-light .kd-menu-submenu-title:hover {
-  color: var(--kd-c-menu-light-color-hover, var(--kd-g-color-ongoing, #276ff5));
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
 }
 .kd-menu-light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
-  color: var(--kd-c-menu-light-color, var(--kd-g-color-text-primary, #212121));
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
 .kd-menu-light .kd-menu-item-active {
   background-color: var(--kd-c-menu-light-color-background, var(--kd-g-color-background-ongoing, #f2f9ff));
-  color: var(--kd-c-menu-light-color-hover, var(--kd-g-color-ongoing, #276ff5));
-  border-right: 2px solid var(--kd-c-menu-light-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
 }
 .kd-menu-light .kd-menu-item:not(.kd-menu-item-disabled):hover {
   background-color: var(--kd-c-menu-light-color-background, var(--kd-g-color-background-ongoing, #f2f9ff));
-  color: var(--kd-c-menu-light-color-hover, var(--kd-g-color-ongoing, #276ff5));
-  border-right: 2px solid var(--kd-c-menu-light-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
 }
 .kd-menu-light.kd-menu-vertical .kd-menu-submenu-sub {
   -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
           box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
 .kd-menu-light.kd-menu-vertical .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
-  color: var(--kd-c-menu-light-color-hover, var(--kd-g-color-ongoing, #276ff5));
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
   background: #fff;
   border: none;
 }
 .kd-menu-light.kd-menu-vertical .kd-menu-item-active {
-  color: var(--kd-c-menu-light-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
   background-color: var(--kd-c-menu-light-color-background, var(--kd-g-color-background-ongoing, #f2f9ff));
   border: none !important;
 }
@@ -9922,8 +9927,8 @@ textarea {
   color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-menu-item-active {
-  background-color: var(--kd-c-menu-sub-color-background, #21242d);
-  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
 .kd-menu-item-arrow {
   margin-left: auto;
@@ -9946,8 +9951,8 @@ textarea {
   transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
 .kd-menu-item:not(.kd-menu-item-disabled):hover {
-  background-color: var(--kd-c-menu-sub-color-background, #21242d);
-  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
 .kd-menu-submenu {
   position: static;
@@ -10005,8 +10010,8 @@ textarea {
   color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-menu-submenu-active {
-  background-color: var(--kd-c-menu-sub-color-background, #21242d);
-  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
 .kd-menu-submenu-arrow {
   margin-left: auto;
@@ -10029,11 +10034,11 @@ textarea {
   transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
 .kd-menu-submenu-hover {
-  color: var(--kd-c-menu-sub-color-hover, var(--kd-g-color-white, #fff));
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
 .kd-menu-submenu-sub {
   line-height: var(--kd-c-menu-item-sizing-height, 50px);
-  color: var(--kd-c-menu-sub-color, rgba(255, 255, 255, 0.65));
+  color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
 }
 .kd-menu-submenu-thrid {
   display: -webkit-box;
@@ -10042,7 +10047,7 @@ textarea {
   max-width: 810px;
   max-height: 492px;
   padding-left: 24px;
-  background: var(--kd-c-menu-sub-color-background, #21242d);
+  background: var(--kd-c-menu-sub-color-background, #121319);
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   overflow-y: auto;
@@ -10114,7 +10119,7 @@ textarea {
   text-overflow: ellipsis;
 }
 .kd-menu-submenu-thrid-list > li:hover {
-  color: var(--kd-c-menu-sub-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff));
 }
 .kd-menu-submenu-thrid-list > li > span {
   white-space: nowrap;
@@ -10125,7 +10130,14 @@ textarea {
   height: auto;
 }
 .kd-menu-submenu-thrid-list > .kd-menu-item-active {
-  color: var(--kd-c-menu-sub-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff));
+}
+.kd-menu-dark .kd-menu-submenu-sub {
+  background: var(--kd-c-menu-sub-inline-color-background, #1f212b);
+}
+.kd-menu-dark .kd-menu-submenu-sub-second,
+.kd-menu-dark .kd-menu-submenu-sub-third {
+  background: var(--kd-c-menu-sub-color-background, #121319);
 }
 
 /* -----------  color  ——————---- start */
@@ -10971,13 +10983,13 @@ textarea {
 }
 .kd-pagination .kd-pagination-current {
   display: inline-block;
-  margin-right: 15px;
+  margin-right: 12px;
   vertical-align: middle;
 }
 .kd-pagination .kd-pagination-current .kd-pagination-current-input {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  width: 32px;
+  width: 44px;
   height: var(--kd-c-pagination-sizing-square, 24px);
   margin: 0 3px;
   padding: 0;
@@ -10994,10 +11006,10 @@ textarea {
 .kd-pagination .kd-pagination-current .kd-pagination-current-input:hover,
 .kd-pagination .kd-pagination-current .kd-pagination-current-input:active,
 .kd-pagination .kd-pagination-current .kd-pagination-current-input:focus {
-  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
 }
 .kd-pagination .kd-pagination-current .kd-pagination-current-input:disabled {
-  color: var(--kd-g-color-disabled, #b2b2b2);
+  color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
   border: var(--kd-c-pagination-sizing-border-width, 1px) solid var(--kd-c-pagination-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
   background: var(--kd-c-pagination-button-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   cursor: not-allowed;
@@ -11054,7 +11066,7 @@ textarea {
 }
 .kd-pagination .kd-pagination-action .kd-pagination-action-item button:hover:not(:disabled),
 .kd-pagination .kd-pagination-action .kd-pagination-action-item button:active:not(:disabled) {
-  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
 }
 .kd-pagination .kd-pagination-action .kd-pagination-action-item button:hover i,
 .kd-pagination .kd-pagination-action .kd-pagination-action-item button:active i {
@@ -11064,7 +11076,7 @@ textarea {
   cursor: not-allowed;
 }
 .kd-pagination .kd-pagination-action .kd-pagination-action-item button[disabled] i {
-  color: var(--kd-c-pagination-button-color-disabled, var(--kd-g-color-border-disabled, #ccc));
+  color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-pagination .kd-pagination-action .kd-pagination-action-item button i {
   position: absolute;
@@ -11107,6 +11119,7 @@ textarea {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: inline-block;
+  padding: 0;
   line-height: var(--kd-c-pagination-sizing-square, 24px);
   font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px));
   color: var(--kd-g-color-text-primary, #212121);
@@ -11123,16 +11136,32 @@ textarea {
 .kd-pagination .kd-pagination-selector .kd-pagination-selector-size.disabled,
 .kd-pagination .kd-pagination-selector .kd-pagination-selector-size.disabled > i {
   cursor: not-allowed;
-  color: var(--kd-g-color-border-disabled, #ccc);
+  color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-pagination .kd-pagination-selector .kd-pagination-selector-size i {
-  margin-left: 5px;
+  margin-left: 4px;
   line-height: var(--kd-c-pagination-sizing-square, 24px);
   font-size: var(--kd-c-pagination-icon-font-size, var(--kd-g-font-size-large, 16px));
   color: var(--kd-c-pagination-text-color, var(--kd-g-color-text-secondary, #666));
 }
+.kd-pagination .kd-pagination-selector .kd-dropdown-menu-item {
+  text-align: right;
+  padding-right: var(--kd-c-pagination-dropdown-item-spacing-padding-horizontal, 24px);
+  padding-left: var(--kd-c-pagination-dropdown-item-spacing-padding-horizontal, 24px);
+}
+.kd-pagination .kd-pagination-selector .kd-dropdown-menu-item span {
+  white-space: nowrap;
+}
 .kd-pagination.simple {
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: var(--kd-c-pagination-sizing-square, 24px);
   border-radius: var(--kd-g-radius-border, 2px);
   border: var(--kd-c-pagination-sizing-border-width, 1px) solid transparent;
 }
@@ -11142,14 +11171,14 @@ textarea {
   transition: border-color var(--kd-g-duration, 0.3s);
 }
 .kd-pagination.simple.bordered:active:not(.disabled) {
-  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
 }
 .kd-pagination.simple.bordered.disabled,
 .kd-pagination.simple.bordered.disabled > .kd-pagination-item > button {
   background-color: var(--kd-c-pagination-button-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
 }
 .kd-pagination.simple.disabled > .kd-pagination-item {
-  color: var(--kd-g-color-border-disabled, #ccc);
+  color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-pagination.simple .kd-pagination-item {
   -webkit-box-sizing: border-box;
@@ -11161,9 +11190,11 @@ textarea {
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
   display: inline-block;
+  height: var(--kd-c-pagination-sizing-square, 24px);
+  overflow: hidden;
+  margin: 0 8px;
   vertical-align: middle;
   color: var(--kd-g-color-text-primary, #212121);
-  margin: 0 18px;
 }
 .kd-pagination.simple .kd-pagination-item:first-child,
 .kd-pagination.simple .kd-pagination-item:last-child {
@@ -11177,7 +11208,7 @@ textarea {
   margin: 0;
 }
 .kd-pagination.simple .kd-pagination-item .kd-pagination-current .kd-pagination-current-input:disabled {
-  color: var(--kd-g-color-disabled, #b2b2b2);
+  color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
 }
 .kd-pagination.simple .kd-pagination-item .kd-pagination-total {
@@ -11201,7 +11232,7 @@ textarea {
 }
 .kd-pagination.simple .kd-pagination-item button:hover:not(:disabled),
 .kd-pagination.simple .kd-pagination-item button:active:not(:disabled) {
-  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
 }
 .kd-pagination.simple .kd-pagination-item button:hover i,
 .kd-pagination.simple .kd-pagination-item button:active i {
@@ -11211,7 +11242,7 @@ textarea {
   cursor: not-allowed;
 }
 .kd-pagination.simple .kd-pagination-item button:disabled i {
-  color: var(--kd-c-pagination-button-color-disabled, var(--kd-g-color-border-disabled, #ccc));
+  color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-pagination.simple .kd-pagination-item button i {
   position: absolute;
@@ -11275,7 +11306,7 @@ textarea {
 .kd-pagination.less .kd-pagination-pages-item:last-child button:hover,
 .kd-pagination.less .kd-pagination-pages-item:first-child button:active,
 .kd-pagination.less .kd-pagination-pages-item:last-child button:active {
-  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
 }
 .kd-pagination.less .kd-pagination-pages-item:first-child button:hover:disabled,
 .kd-pagination.less .kd-pagination-pages-item:last-child button:hover:disabled,
@@ -11306,7 +11337,7 @@ textarea {
 }
 .kd-pagination.less .kd-pagination-pages-item button:disabled {
   cursor: not-allowed;
-  color: var(--kd-g-color-disabled, #b2b2b2);
+  color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-pagination.nicety .kd-pagination-pages {
   -webkit-box-sizing: border-box;
@@ -11339,7 +11370,7 @@ textarea {
 .kd-pagination.nicety .kd-pagination-pages-item:hover button,
 .kd-pagination.nicety .kd-pagination-pages-item:active button,
 .kd-pagination.nicety .kd-pagination-pages-item.active button {
-  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
 }
 .kd-pagination.nicety .kd-pagination-pages-item:hover button:disabled,
 .kd-pagination.nicety .kd-pagination-pages-item:active button:disabled,
@@ -11349,25 +11380,19 @@ textarea {
 .kd-pagination.nicety .kd-pagination-pages-item.active > button:disabled {
   background-color: var(--kd-g-color-background-contain, #fafafa);
 }
-.kd-pagination.nicety .kd-pagination-pages-item:hover button,
-.kd-pagination.nicety .kd-pagination-pages-item:active button,
 .kd-pagination.nicety .kd-pagination-pages-item.active button,
-.kd-pagination.nicety .kd-pagination-pages-item:first-child button,
-.kd-pagination.nicety .kd-pagination-pages-item:last-child button {
+.kd-pagination.nicety .kd-pagination-pages-item:hover button {
   color: var(--kd-g-color-theme, #5582f3);
 }
-.kd-pagination.nicety .kd-pagination-pages-item:hover button:not(:disabled) > .kd-pagination-pages-jumper-icon,
-.kd-pagination.nicety .kd-pagination-pages-item:active button:not(:disabled) > .kd-pagination-pages-jumper-icon,
 .kd-pagination.nicety .kd-pagination-pages-item.active button:not(:disabled) > .kd-pagination-pages-jumper-icon,
-.kd-pagination.nicety .kd-pagination-pages-item:first-child button:not(:disabled) > .kd-pagination-pages-jumper-icon,
-.kd-pagination.nicety .kd-pagination-pages-item:last-child button:not(:disabled) > .kd-pagination-pages-jumper-icon {
+.kd-pagination.nicety .kd-pagination-pages-item:hover button:not(:disabled) > .kd-pagination-pages-jumper-icon {
   opacity: 1;
 }
 .kd-pagination.nicety .kd-pagination-pages-item:first-child button,
 .kd-pagination.nicety .kd-pagination-pages-item:last-child button {
-  width: var(--kd-c-pagination-nicety-sizing-square, 30px);
+  width: var(--kd-c-pagination-sizing-square, 24px);
   padding: 0;
-  line-height: calc(var(--kd-c-pagination-nicety-sizing-square, 30px) - 2px);
+  line-height: calc(var(--kd-c-pagination-sizing-square, 24px) - 2px);
 }
 .kd-pagination.nicety .kd-pagination-pages-item button {
   -webkit-box-sizing: border-box;
@@ -11378,8 +11403,8 @@ textarea {
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
-  min-width: var(--kd-c-pagination-nicety-sizing-square, 30px);
-  height: var(--kd-c-pagination-nicety-sizing-square, 30px);
+  min-width: var(--kd-c-pagination-sizing-square, 24px);
+  height: var(--kd-c-pagination-sizing-square, 24px);
   padding: 0 6px;
   cursor: pointer;
   outline: none;
@@ -11393,7 +11418,10 @@ textarea {
 }
 .kd-pagination.nicety .kd-pagination-pages-item button:disabled {
   cursor: not-allowed;
-  color: var(--kd-g-color-disabled, #b2b2b2);
+  color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+}
+.kd-pagination.nicety .kd-pagination-pages-item button > i {
+  font-size: 16px;
 }
 .kd-pagination.nicety .kd-pagination-pages-item button .kd-pagination-pages-jumper-icon {
   position: absolute;
@@ -11403,21 +11431,21 @@ textarea {
   width: 100%;
   height: 100%;
   color: var(--kd-g-color-theme, #5582f3);
-  line-height: var(--kd-c-pagination-nicety-sizing-square, 30px);
+  line-height: var(--kd-c-pagination-sizing-square, 24px);
   background-color: var(--kd-g-color-background, #fff);
   -webkit-transition: opacity var(--kd-g-duration, 0.3s);
   transition: opacity var(--kd-g-duration, 0.3s);
 }
 .kd-pagination.nicety .kd-pagination-jumper {
   display: inline-block;
-  margin-left: 12px;
+  margin-left: 4px;
   vertical-align: middle;
 }
 .kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-input {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  width: 48px;
-  height: var(--kd-c-pagination-nicety-sizing-square, 30px);
+  width: 40px;
+  height: var(--kd-c-pagination-sizing-square, 24px);
   padding: 0;
   outline: none;
   text-align: center;
@@ -11432,10 +11460,10 @@ textarea {
 .kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-input:hover,
 .kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-input:active,
 .kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-input:focus {
-  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
 }
 .kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-input:disabled {
-  color: var(--kd-g-color-disabled, #b2b2b2);
+  color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
   border: var(--kd-c-pagination-sizing-border-width, 1px) solid var(--kd-c-pagination-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
   background: var(--kd-c-pagination-button-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   cursor: not-allowed;
@@ -11449,14 +11477,14 @@ textarea {
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
-  width: var(--kd-c-pagination-nicety-sizing-square, 30px);
-  height: var(--kd-c-pagination-nicety-sizing-square, 30px);
+  width: var(--kd-c-pagination-sizing-square, 24px);
+  height: var(--kd-c-pagination-sizing-square, 24px);
   margin-left: var(--kd-c-pagination-button-spacing, 4px);
-  line-height: var(--kd-c-pagination-nicety-sizing-square, 30px);
+  line-height: var(--kd-c-pagination-sizing-square, 24px);
   vertical-align: top;
   cursor: pointer;
   outline: none;
-  color: var(--kd-g-color-theme, #5582f3);
+  color: var(--kd-g-color-text-primary, #212121);
   font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px));
   border-radius: var(--kd-g-radius-border, 2px);
   border: var(--kd-c-pagination-sizing-border-width, 1px) solid var(--kd-g-color-border-strong, #d9d9d9);
@@ -11465,17 +11493,16 @@ textarea {
   transition: border-color var(--kd-g-duration, 0.3s);
 }
 .kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-button:hover,
-.kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-button:active,
-.kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-button.active {
-  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme, #5582f3));
+.kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-button:active {
+  color: var(--kd-g-color-theme, #5582f3);
+  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
 }
 .kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-button:hover:disabled,
-.kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-button:active:disabled,
-.kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-button.active:disabled {
+.kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-button:active:disabled {
   border-color: var(--kd-c-pagination-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-button:disabled {
-  color: var(--kd-g-color-disabled, #b2b2b2);
+  color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
 }
 .kd-pagination.nicety .kd-pagination-options {
@@ -11489,9 +11516,9 @@ textarea {
           font-feature-settings: 'tnum';
   position: relative;
   display: inline-block;
-  margin-left: 40px;
+  margin-left: 22px;
   outline: none;
-  height: var(--kd-c-pagination-nicety-sizing-square, 30px);
+  height: var(--kd-c-pagination-sizing-square, 24px);
   color: var(--kd-g-color-text-primary, #212121);
   vertical-align: middle;
 }
@@ -11500,11 +11527,11 @@ textarea {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: inline-block;
-  width: 67px;
-  height: var(--kd-c-pagination-nicety-sizing-square, 30px);
+  min-width: 64px;
+  height: var(--kd-c-pagination-sizing-square, 24px);
   margin-right: 8px;
-  padding: 0 8px;
-  line-height: var(--kd-c-pagination-nicety-sizing-square, 30px);
+  padding: 0 24px 0 4px;
+  line-height: var(--kd-c-pagination-sizing-square, 24px);
   font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px));
   color: var(--kd-g-color-text-primary, #212121);
   text-align: left;
@@ -11518,7 +11545,7 @@ textarea {
 }
 .kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size:hover,
 .kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size:active {
-  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
 }
 .kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size:hover.disabled,
 .kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size:active.disabled {
@@ -11527,7 +11554,7 @@ textarea {
 .kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size.disabled,
 .kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size.disabled > i {
   cursor: not-allowed;
-  color: var(--kd-g-color-border-disabled, #ccc);
+  color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size i {
   position: absolute;