@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/lib/pagination/style/index.css

@@ -92,6 +92,15 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
@@ -104,8 +113,8 @@
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
-  color: #666;
-  font-size: 12px;
+  color: var(--kd-c-pagination-text-color, var(--kd-g-color-text-secondary, #666));
+  font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px));
 }
 .kd-pagination .kd-pagination-total {
   display: inline-block;
@@ -121,28 +130,28 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   width: 32px;
-  height: 24px;
+  height: var(--kd-c-pagination-sizing-square, 24px);
   margin: 0 3px;
   padding: 0;
   outline: none;
   text-align: center;
-  background: #fff;
-  color: #212121;
-  font-size: 12px;
-  border-radius: 2px;
-  border: 1px solid #d9d9d9;
-  -webkit-transition: border-color 0.3s;
-  transition: border-color 0.3s;
+  background: var(--kd-g-color-background, #fff);
+  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);
+  -webkit-transition: border-color var(--kd-g-duration, 0.3s);
+  transition: border-color var(--kd-g-duration, 0.3s);
 }
 .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: #5582f3;
+  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-pagination .kd-pagination-current .kd-pagination-current-input:disabled {
-  color: #b2b2b2;
-  border: 1px solid #d9d9d9;
-  background: #f5f5f5;
+  color: 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;
 }
 .kd-pagination .kd-pagination-action {
@@ -169,45 +178,45 @@
   display: inline-block;
 }
 .kd-pagination .kd-pagination-action .kd-pagination-action-item.bordered {
-  margin-right: 8px;
+  margin-right: calc(2 * var(--kd-c-pagination-button-spacing, 4px));
 }
 .kd-pagination .kd-pagination-action .kd-pagination-action-item.bordered:last-child {
   margin-right: 0;
 }
 .kd-pagination .kd-pagination-action .kd-pagination-action-item.bordered button {
-  border: 1px solid #d9d9d9;
+  border: var(--kd-c-pagination-sizing-border-width, 1px) solid var(--kd-c-pagination-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-pagination .kd-pagination-action .kd-pagination-action-item.bordered button:disabled {
-  background-color: #f5f5f5;
+  background-color: var(--kd-c-pagination-button-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
 }
 .kd-pagination .kd-pagination-action .kd-pagination-action-item button {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   position: relative;
-  width: 24px;
-  height: 24px;
+  width: var(--kd-c-pagination-sizing-square, 24px);
+  height: var(--kd-c-pagination-sizing-square, 24px);
   border: none;
-  background-color: #fff;
-  border-radius: 2px;
+  background-color: var(--kd-g-color-background, #fff);
+  border-radius: var(--kd-g-radius-border, 2px);
   cursor: pointer;
   outline: none;
   vertical-align: middle;
-  -webkit-transition: border-color 0.3s;
-  transition: border-color 0.3s;
+  -webkit-transition: border-color var(--kd-g-duration, 0.3s);
+  transition: border-color var(--kd-g-duration, 0.3s);
 }
 .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: #5582f3;
+  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-pagination .kd-pagination-action .kd-pagination-action-item button:hover i,
 .kd-pagination .kd-pagination-action .kd-pagination-action-item button:active i {
-  color: #5582f3;
+  color: var(--kd-c-pagination-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-pagination .kd-pagination-action .kd-pagination-action-item button[disabled] {
   cursor: not-allowed;
 }
 .kd-pagination .kd-pagination-action .kd-pagination-action-item button[disabled] i {
-  color: #ccc;
+  color: var(--kd-c-pagination-button-color-disabled, var(--kd-g-color-border-disabled, #ccc));
 }
 .kd-pagination .kd-pagination-action .kd-pagination-action-item button i {
   position: absolute;
@@ -225,10 +234,10 @@
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  font-size: 16px;
-  color: #666;
-  -webkit-transition: color 0.3s;
-  transition: color 0.3s;
+  font-size: var(--kd-c-pagination-icon-font-size, var(--kd-g-font-size-large, 16px));
+  color: var(--kd-c-pagination-button-color, var(--kd-g-color-text-secondary, #666));
+  -webkit-transition: color var(--kd-g-duration, 0.3s);
+  transition: color var(--kd-g-duration, 0.3s);
 }
 .kd-pagination .kd-pagination-selector {
   -webkit-box-sizing: border-box;
@@ -243,56 +252,56 @@
   display: inline-block;
   margin-left: 20px;
   outline: none;
-  height: 24px;
+  height: var(--kd-c-pagination-sizing-square, 24px);
   vertical-align: middle;
 }
 .kd-pagination .kd-pagination-selector .kd-pagination-selector-size {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: inline-block;
-  line-height: 24px;
-  font-size: 12px;
-  color: #212121;
-  border-radius: 2px;
-  background: #fff;
+  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);
+  border-radius: var(--kd-g-radius-border, 2px);
+  background: var(--kd-g-color-background, #fff);
   cursor: pointer;
   border: none;
   outline: none;
 }
 .kd-pagination .kd-pagination-selector .kd-pagination-selector-size:hover i,
 .kd-pagination .kd-pagination-selector .kd-pagination-selector-size:active i {
-  color: #5582f3;
+  color: var(--kd-c-pagination-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
 .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: #ccc;
+  color: var(--kd-g-color-border-disabled, #ccc);
 }
 .kd-pagination .kd-pagination-selector .kd-pagination-selector-size i {
   margin-left: 5px;
-  line-height: 24px;
-  font-size: 16px;
-  color: #666;
+  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.simple {
   display: inline-block;
-  border-radius: 2px;
-  border: 1px solid transparent;
+  border-radius: var(--kd-g-radius-border, 2px);
+  border: var(--kd-c-pagination-sizing-border-width, 1px) solid transparent;
 }
 .kd-pagination.simple.bordered {
-  border-color: #d9d9d9;
-  -webkit-transition: border-color 0.3s;
-  transition: border-color 0.3s;
+  border-color: var(--kd-c-pagination-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  -webkit-transition: border-color var(--kd-g-duration, 0.3s);
+  transition: border-color var(--kd-g-duration, 0.3s);
 }
 .kd-pagination.simple.bordered:active:not(.disabled) {
-  border-color: #5582f3;
+  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-pagination.simple.bordered.disabled,
 .kd-pagination.simple.bordered.disabled > .kd-pagination-item > button {
-  background-color: #f5f5f5;
+  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: #ccc;
+  color: var(--kd-g-color-border-disabled, #ccc);
 }
 .kd-pagination.simple .kd-pagination-item {
   -webkit-box-sizing: border-box;
@@ -305,7 +314,7 @@
           font-feature-settings: 'tnum';
   display: inline-block;
   vertical-align: middle;
-  color: #212121;
+  color: var(--kd-g-color-text-primary, #212121);
   margin: 0 18px;
 }
 .kd-pagination.simple .kd-pagination-item:first-child,
@@ -320,7 +329,7 @@
   margin: 0;
 }
 .kd-pagination.simple .kd-pagination-item .kd-pagination-current .kd-pagination-current-input:disabled {
-  color: #b2b2b2;
+  color: var(--kd-g-color-disabled, #b2b2b2);
   cursor: not-allowed;
 }
 .kd-pagination.simple .kd-pagination-item .kd-pagination-total {
@@ -331,30 +340,30 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   position: relative;
-  width: 22px;
-  height: 22px;
+  width: calc(var(--kd-c-pagination-sizing-square, 24px) - 2px);
+  height: calc(var(--kd-c-pagination-sizing-square, 24px) - 2px);
   border: none;
-  background-color: #fff;
-  border-radius: 2px;
+  background-color: var(--kd-g-color-background, #fff);
+  border-radius: var(--kd-g-radius-border, 2px);
   cursor: pointer;
   outline: none;
   vertical-align: middle;
-  -webkit-transition: border-color 0.3s;
-  transition: border-color 0.3s;
+  -webkit-transition: border-color var(--kd-g-duration, 0.3s);
+  transition: border-color var(--kd-g-duration, 0.3s);
 }
 .kd-pagination.simple .kd-pagination-item button:hover:not(:disabled),
 .kd-pagination.simple .kd-pagination-item button:active:not(:disabled) {
-  border-color: #5582f3;
+  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-pagination.simple .kd-pagination-item button:hover i,
 .kd-pagination.simple .kd-pagination-item button:active i {
-  color: #5582f3;
+  color: var(--kd-c-pagination-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-pagination.simple .kd-pagination-item button:disabled {
   cursor: not-allowed;
 }
 .kd-pagination.simple .kd-pagination-item button:disabled i {
-  color: #ccc;
+  color: var(--kd-c-pagination-button-color-disabled, var(--kd-g-color-border-disabled, #ccc));
 }
 .kd-pagination.simple .kd-pagination-item button i {
   position: absolute;
@@ -363,11 +372,11 @@
   bottom: 0;
   left: 0;
   margin: auto;
-  line-height: 22px;
-  font-size: 16px;
-  color: #666;
-  -webkit-transition: color 0.3s;
-  transition: color 0.3s;
+  line-height: calc(var(--kd-c-pagination-sizing-square, 24px) - 2px);
+  font-size: var(--kd-c-pagination-icon-font-size, var(--kd-g-font-size-large, 16px));
+  color: var(--kd-c-pagination-button-color, var(--kd-g-color-text-secondary, #666));
+  -webkit-transition: color var(--kd-g-duration, 0.3s);
+  transition: color var(--kd-g-duration, 0.3s);
 }
 .kd-pagination.less .kd-pagination-pages {
   -webkit-box-sizing: border-box;
@@ -391,50 +400,40 @@
           font-feature-settings: 'tnum';
   position: relative;
   display: inline-block;
-  margin-right: 4px;
+  margin-right: var(--kd-c-pagination-button-spacing, 4px);
   vertical-align: middle;
 }
 .kd-pagination.less .kd-pagination-pages-item:last-child {
   margin-right: 0;
 }
-.kd-pagination.less .kd-pagination-pages-item:hover button,
-.kd-pagination.less .kd-pagination-pages-item:active button,
-.kd-pagination.less .kd-pagination-pages-item.active button {
-  border-color: #5582f3;
-}
-.kd-pagination.less .kd-pagination-pages-item:hover button:disabled,
-.kd-pagination.less .kd-pagination-pages-item:active button:disabled,
-.kd-pagination.less .kd-pagination-pages-item.active button:disabled {
-  border-color: #d9d9d9;
-}
 .kd-pagination.less .kd-pagination-pages-item.active > button:disabled {
-  background-color: #fafafa;
+  background-color: var(--kd-g-color-background-contain, #fafafa);
 }
 .kd-pagination.less .kd-pagination-pages-item:hover button,
 .kd-pagination.less .kd-pagination-pages-item:active button,
 .kd-pagination.less .kd-pagination-pages-item.active button,
 .kd-pagination.less .kd-pagination-pages-item:first-child button,
 .kd-pagination.less .kd-pagination-pages-item:last-child button {
-  color: #5582f3;
+  color: var(--kd-g-color-theme, #5582f3);
 }
 .kd-pagination.less .kd-pagination-pages-item:first-child button,
 .kd-pagination.less .kd-pagination-pages-item:last-child button {
-  width: 24px;
+  width: var(--kd-c-pagination-sizing-square, 24px);
   padding: 0;
-  border-radius: 2px;
-  border: 1px solid #d9d9d9;
+  border-radius: var(--kd-g-radius-border, 2px);
+  border: var(--kd-c-pagination-sizing-border-width, 1px) solid var(--kd-c-pagination-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-pagination.less .kd-pagination-pages-item:first-child button:hover,
 .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: #5582f3;
+  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-pagination.less .kd-pagination-pages-item:first-child button:hover:disabled,
 .kd-pagination.less .kd-pagination-pages-item:last-child button:hover:disabled,
 .kd-pagination.less .kd-pagination-pages-item:first-child button:active:disabled,
 .kd-pagination.less .kd-pagination-pages-item:last-child button:active:disabled {
-  border-color: #d9d9d9;
+  border-color: var(--kd-c-pagination-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-pagination.less .kd-pagination-pages-item button {
   -webkit-box-sizing: border-box;
@@ -445,21 +444,21 @@
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
-  min-width: 24px;
-  height: 24px;
+  min-width: var(--kd-c-pagination-sizing-square, 24px);
+  height: var(--kd-c-pagination-sizing-square, 24px);
   padding: 0 4px;
-  color: #212121;
-  font-size: 12px;
+  color: var(--kd-g-color-text-primary, #212121);
+  font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px));
   cursor: pointer;
   outline: none;
   border: none;
-  background: #fff;
-  -webkit-transition: color 0.3s, border-color 0.3s;
-  transition: color 0.3s, border-color 0.3s;
+  background: var(--kd-g-color-background, #fff);
+  -webkit-transition: color var(--kd-g-duration, 0.3s), border-color var(--kd-g-duration, 0.3s);
+  transition: color var(--kd-g-duration, 0.3s), border-color var(--kd-g-duration, 0.3s);
 }
 .kd-pagination.less .kd-pagination-pages-item button:disabled {
   cursor: not-allowed;
-  color: #b2b2b2;
+  color: var(--kd-g-color-disabled, #b2b2b2);
 }
 .kd-pagination.nicety .kd-pagination-pages {
   -webkit-box-sizing: border-box;
@@ -483,7 +482,7 @@
           font-feature-settings: 'tnum';
   position: relative;
   display: inline-block;
-  margin-right: 4px;
+  margin-right: var(--kd-c-pagination-button-spacing, 4px);
   vertical-align: middle;
 }
 .kd-pagination.nicety .kd-pagination-pages-item:last-child {
@@ -492,22 +491,22 @@
 .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: #5582f3;
+  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-pagination.nicety .kd-pagination-pages-item:hover button:disabled,
 .kd-pagination.nicety .kd-pagination-pages-item:active button:disabled,
 .kd-pagination.nicety .kd-pagination-pages-item.active button:disabled {
-  border-color: #d9d9d9;
+  border-color: var(--kd-c-pagination-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-pagination.nicety .kd-pagination-pages-item.active > button:disabled {
-  background-color: #fafafa;
+  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 {
-  color: #5582f3;
+  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,
@@ -518,8 +517,9 @@
 }
 .kd-pagination.nicety .kd-pagination-pages-item:first-child button,
 .kd-pagination.nicety .kd-pagination-pages-item:last-child button {
-  width: 30px;
+  width: var(--kd-c-pagination-nicety-sizing-square, 30px);
   padding: 0;
+  line-height: calc(var(--kd-c-pagination-nicety-sizing-square, 30px) - 2px);
 }
 .kd-pagination.nicety .kd-pagination-pages-item button {
   -webkit-box-sizing: border-box;
@@ -530,22 +530,22 @@
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
-  min-width: 30px;
-  height: 30px;
+  min-width: var(--kd-c-pagination-nicety-sizing-square, 30px);
+  height: var(--kd-c-pagination-nicety-sizing-square, 30px);
   padding: 0 6px;
   cursor: pointer;
   outline: none;
-  font-size: 12px;
-  color: #212121;
-  border-radius: 2px;
-  border: 1px solid #d9d9d9;
-  background: #fff;
-  -webkit-transition: color 0.3s, border-color 0.3s, background-color 0.3s;
-  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
+  font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px));
+  color: var(--kd-g-color-text-primary, #212121);
+  border-radius: var(--kd-g-radius-border, 2px);
+  border: var(--kd-c-pagination-sizing-border-width, 1px) solid var(--kd-c-pagination-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  background: var(--kd-g-color-background, #fff);
+  -webkit-transition: color var(--kd-g-duration, 0.3s), border-color var(--kd-g-duration, 0.3s), background-color var(--kd-g-duration, 0.3s);
+  transition: color var(--kd-g-duration, 0.3s), border-color var(--kd-g-duration, 0.3s), background-color var(--kd-g-duration, 0.3s);
 }
 .kd-pagination.nicety .kd-pagination-pages-item button:disabled {
   cursor: not-allowed;
-  color: #b2b2b2;
+  color: var(--kd-g-color-disabled, #b2b2b2);
 }
 .kd-pagination.nicety .kd-pagination-pages-item button .kd-pagination-pages-jumper-icon {
   position: absolute;
@@ -554,11 +554,11 @@
   opacity: 0;
   width: 100%;
   height: 100%;
-  color: #5582f3;
-  line-height: 30px;
-  background-color: #fff;
-  -webkit-transition: opacity 0.3s;
-  transition: opacity 0.3s;
+  color: var(--kd-g-color-theme, #5582f3);
+  line-height: var(--kd-c-pagination-nicety-sizing-square, 30px);
+  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;
@@ -569,27 +569,27 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   width: 48px;
-  height: 30px;
+  height: var(--kd-c-pagination-nicety-sizing-square, 30px);
   padding: 0;
   outline: none;
   text-align: center;
-  background: #fff;
-  color: #212121;
-  font-size: 12px;
-  border-radius: 2px;
-  border: 1px solid #d9d9d9;
-  -webkit-transition: border-color 0.3s;
-  transition: border-color 0.3s;
+  background: var(--kd-g-color-background, #fff);
+  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);
+  -webkit-transition: border-color var(--kd-g-duration, 0.3s);
+  transition: border-color var(--kd-g-duration, 0.3s);
 }
 .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: #5582f3;
+  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-input:disabled {
-  color: #b2b2b2;
-  border: 1px solid #d9d9d9;
-  background: #f5f5f5;
+  color: 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;
 }
 .kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-button {
@@ -601,33 +601,33 @@
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
-  width: 30px;
-  height: 30px;
-  margin-left: 4px;
-  line-height: 30px;
+  width: var(--kd-c-pagination-nicety-sizing-square, 30px);
+  height: var(--kd-c-pagination-nicety-sizing-square, 30px);
+  margin-left: var(--kd-c-pagination-button-spacing, 4px);
+  line-height: var(--kd-c-pagination-nicety-sizing-square, 30px);
   vertical-align: top;
   cursor: pointer;
   outline: none;
-  color: #5582f3;
-  font-size: 12px;
-  border-radius: 2px;
-  border: 1px solid #d9d9d9;
-  background: #fff;
-  -webkit-transition: border-color 0.3s;
-  transition: border-color 0.3s;
+  color: var(--kd-g-color-theme, #5582f3);
+  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);
+  background: var(--kd-g-color-background, #fff);
+  -webkit-transition: border-color var(--kd-g-duration, 0.3s);
+  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: #5582f3;
+  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: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 {
-  border-color: #d9d9d9;
+  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: #b2b2b2;
+  color: var(--kd-g-color-disabled, #b2b2b2);
   cursor: not-allowed;
 }
 .kd-pagination.nicety .kd-pagination-options {
@@ -643,8 +643,8 @@
   display: inline-block;
   margin-left: 40px;
   outline: none;
-  height: 30px;
-  color: #212121;
+  height: var(--kd-c-pagination-nicety-sizing-square, 30px);
+  color: var(--kd-g-color-text-primary, #212121);
   vertical-align: middle;
 }
 .kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size {
@@ -653,41 +653,41 @@
           box-sizing: border-box;
   display: inline-block;
   width: 67px;
-  height: 30px;
+  height: var(--kd-c-pagination-nicety-sizing-square, 30px);
   margin-right: 8px;
   padding: 0 8px;
-  line-height: 30px;
-  font-size: 12px;
-  color: #212121;
+  line-height: var(--kd-c-pagination-nicety-sizing-square, 30px);
+  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;
-  border-radius: 2px;
-  border: 1px solid #d9d9d9;
-  background: #fff;
+  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);
+  background: var(--kd-g-color-background, #fff);
   cursor: pointer;
   outline: none;
-  -webkit-transition: border-color 0.3s;
-  transition: border-color 0.3s;
+  -webkit-transition: border-color var(--kd-g-duration, 0.3s);
+  transition: border-color var(--kd-g-duration, 0.3s);
 }
 .kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size:hover,
 .kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size:active {
-  border-color: #5582f3;
+  border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size:hover.disabled,
 .kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size:active.disabled {
-  border-color: #d9d9d9;
+  border-color: var(--kd-g-color-border-strong, #d9d9d9);
 }
 .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: #ccc;
+  color: var(--kd-g-color-border-disabled, #ccc);
 }
 .kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size i {
   position: absolute;
   top: 50%;
   right: 5px;
-  line-height: 22px;
-  font-size: 16px;
-  color: #5582f3;
+  line-height: calc(var(--kd-c-pagination-sizing-square, 24px) - 2px);
+  font-size: var(--kd-c-pagination-icon-font-size, var(--kd-g-font-size-large, 16px));
+  color: var(--kd-c-pagination-color-text-hover, var(--kd-g-color-theme, #5582f3));
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
@@ -696,10 +696,10 @@
           transform: rotate(180deg) translateY(50%);
 }
 .kd-pagination-dropdown-icon {
-  -webkit-transition: -webkit-transform 0.3s;
-  transition: -webkit-transform 0.3s;
-  transition: transform 0.3s;
-  transition: transform 0.3s, -webkit-transform 0.3s;
+  -webkit-transition: -webkit-transform var(--kd-g-duration, 0.3s);
+  transition: -webkit-transform var(--kd-g-duration, 0.3s);
+  transition: transform var(--kd-g-duration, 0.3s);
+  transition: transform var(--kd-g-duration, 0.3s), -webkit-transform var(--kd-g-duration, 0.3s);
 }
 .kd-pagination-dropdown-icon-open {
   -webkit-transform: rotate(180deg);