@kdcloudjs/kdesign 1.6.3 → 1.6.5

package/es/cascader/cascader.js

@@ -130,7 +130,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   var handleClear = function handleClear() {
-    setValue([]);
+    onChange([]);
   };
 
   var inputProps = {
@@ -162,7 +162,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, /*#__PURE__*/React.createElement(Input, _extends({}, inputProps)), /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-picker-label")
   }, (labels === null || labels === void 0 ? void 0 : labels.length) ? displayRender(labels, currentOptions) : '')), allowClear && /*#__PURE__*/React.createElement(Icon, {
-    type: "close",
+    type: "close-solid",
     className: "".concat(prefixCls, "-picker-close"),
     onClick: handleClear
   })));

package/es/cascader/style/index.css

@@ -188,7 +188,7 @@
   opacity: 0;
   cursor: pointer;
   visibility: hidden;
-  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-cascader-clear-color-text, #666);
   -webkit-transition: all 0.1s;
   transition: all 0.1s;
   -webkit-transform-origin: 50% 50%;
@@ -196,6 +196,9 @@
   -webkit-transform: scale(0.9) translateY(-50%);
           transform: scale(0.9) translateY(-50%);
 }
+.kd-cascader-picker-close:hover {
+  color: var(--kd-c-cascader-color-active, var(--kd-g-color-theme, #5582f3));
+}
 .kd-cascader-menus {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;

package/es/cascader/style/index.less

@@ -99,10 +99,14 @@
     opacity: 0;
     cursor: pointer;
     visibility: hidden;
-    color: @cascader-active-color;
+    color: @cascader-clear-color;
     transition: all 0.1s;
     transform-origin: 50% 50%;
     transform: scale(0.9) translateY(-50%);
+
+    &:hover {
+      color: @cascader-active-color;
+    }
   }
 }
 

package/es/cascader/style/token.less

@@ -19,6 +19,7 @@
 @cascader-selected-color: var(~'@{cascader-prefix}-color-text-selected', @color-theme);
 @cascader-selected-bg-color: var(~'@{cascader-prefix}-color-background-selected', @color-background-ongoing);
 @cascader-disabled-color: var(~'@{cascader-prefix}-color-text-disabled', @color-disabled);
+@cascader-clear-color: var(~'@{cascader-prefix}-clear-color-text', #666);
 
 // font
 @cascader-font-size: var(~'@{cascader-prefix}-font-size', @font-size-small);

package/es/date-picker/style/index.css

@@ -105,7 +105,6 @@
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
 .kd-date-picker {
-  width: var(--kd-c-date-picker-sizing-width, 230px);
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -114,6 +113,43 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   background-color: var(--kd-c-date-picker-input-color-background, var(--kd-g-color-white, #fff));
+  width: var(--kd-c-date-picker-sizing-width, 230px);
+}
+.kd-date-picker-borderless {
+  border: 0;
+}
+.kd-date-picker-underline {
+  border: none;
+  border-bottom: 1px solid var(--kd-c-date-picker-input-underline-color, #999);
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.kd-date-picker-disabled {
+  background-color: var(--kd-c-date-picker-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
+  border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9)) !important;
+  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
+  cursor: not-allowed !important;
+}
+.kd-date-picker-disabled input {
+  cursor: not-allowed !important;
+}
+.kd-date-picker-underline.kd-date-picker-disabled,
+.kd-date-picker-borderless.kd-date-picker-disabled {
+  background-color: var(--kd-c-date-picker-input-color-background, var(--kd-g-color-white, #fff));
+  border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+}
+.kd-date-picker-focused {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  outline: none;
+  border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
+}
+.kd-date-picker:hover {
+  border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
+}
+.kd-date-picker:not(.kd-date-picker-disabled) input:focus {
+  color: var(--kd-c-date-picker-input-color-focused, var(--kd-g-color-text-primary, #212121));
 }
 .kd-date-picker-small {
   height: var(--kd-c-date-picker-small-sizing-height, 20px);
@@ -160,42 +196,6 @@
 .kd-date-picker-middle.kd-date-picker-range .kd-date-picker-clear {
   right: calc(var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px)) + 11px);
 }
-.kd-date-picker-borderless {
-  border: 0;
-}
-.kd-date-picker-underline {
-  border: none;
-  border-bottom: 1px solid var(--kd-c-date-picker-input-underline-color, #999);
-  border-radius: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-.kd-date-picker-disabled {
-  background-color: var(--kd-c-date-picker-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
-  border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9)) !important;
-  color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
-  cursor: not-allowed !important;
-}
-.kd-date-picker-disabled input {
-  cursor: not-allowed !important;
-}
-.kd-date-picker-underline.kd-date-picker-disabled,
-.kd-date-picker-borderless.kd-date-picker-disabled {
-  background-color: var(--kd-c-date-picker-input-color-background, var(--kd-g-color-white, #fff));
-  border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9));
-}
-.kd-date-picker-focused {
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  outline: none;
-  border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
-}
-.kd-date-picker:hover {
-  border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
-}
-.kd-date-picker:not(.kd-date-picker-disabled) input:focus {
-  color: var(--kd-c-date-picker-input-color-focused, var(--kd-g-color-text-primary, #212121));
-}
 .kd-date-picker-input {
   position: relative;
   display: -webkit-box;
@@ -299,10 +299,10 @@
 .kd-date-picker-suffix > * {
   vertical-align: top;
 }
-.kd-date-picker:hover .kd-date-picker-clear {
+.kd-date-picker:not(.kd-date-picker-disabled):hover .kd-date-picker-clear {
   opacity: 1;
 }
-.kd-date-picker:hover .kd-date-picker-suffix {
+.kd-date-picker:not(.kd-date-picker-disabled):hover .kd-date-picker-suffix {
   color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
 }
 .kd-date-picker-clear {
@@ -331,7 +331,7 @@
   border-radius: var(--kd-c-date-picker-panel-radius-border, var(--kd-g-radius-border, 2px));
   background-color: #fff;
   text-align: center;
-  z-index: 999;
+  z-index: var(--kd-c-date-picker-panel-z-index, var(--kd-g-z-index-popper, 1050));
   font-size: var(--kd-c-date-picker-panel-font-size, var(--kd-g-font-size-middle, 14px));
 }
 .kd-date-picker-panel-range {

package/es/date-picker/style/index.less

@@ -12,10 +12,7 @@
 @datePicker-calendar-height: 242px;
 
 .@{datePicker-prefix-cls} {
-  // &-small {
-  //   height: @date-small-height;
-  //   line-height: @date-small-height - 4;
-  // }
+  .input-wrapper;
   width: @date-width;
 
   &-small {
@@ -66,8 +63,6 @@
     }
   }
 
-  .input-wrapper;
-
   &-input {
     position: relative;
     display: flex;
@@ -147,7 +142,7 @@
     }
   }
 
-  &:hover {
+  &:not(.@{datePicker-prefix-cls}-disabled):hover {
     .@{datePicker-prefix-cls}-clear {
       opacity: 1;
     }
@@ -188,7 +183,7 @@
   border-radius: @date-panel-border-radius;
   background-color: #fff;
   text-align: center;
-  z-index: 999;
+  z-index: @date-panel-z-index;
   font-size: @date-panel-font-size;
 
   &-range {

package/es/date-picker/style/token.less

@@ -51,3 +51,6 @@
 // radius
 @date-input-border-radius: var(~'@{date-picker-custom-prefix}-input-radius-border', @radius-border);
 @date-panel-border-radius: var(~'@{date-picker-custom-prefix}-panel-radius-border', @radius-border);
+
+// z-index
+@date-panel-z-index: var(~'@{date-picker-custom-prefix}-panel-z-index', @z-index-popper);

package/es/input/style/index.css

@@ -225,7 +225,7 @@ 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-affix-color-text, var(--kd-g-color-text-primary, #212121));
+  color: var(--kd-c-input-affix-color-text, #666);
   cursor: not-allowed;
 }
 .kd-input-underline.kd-input-disabled {
@@ -318,7 +318,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));
+  color: var(--kd-c-input-affix-color-text, #666);
 }
 .kd-input-wrapper .kd-input-suffix {
   margin-left: 4px;
@@ -472,7 +472,7 @@ textarea {
 }
 .kd-input-group-wrapper .kd-input-group .kd-input-group-addon {
   position: relative;
-  color: var(--kd-c-input-affix-color-text, var(--kd-g-color-text-primary, #212121));
+  color: var(--kd-c-input-affix-color-text, #666);
   padding: 0 9px;
   font-weight: 400;
   font-size: 14px;

package/es/input/style/token.less

@@ -13,7 +13,7 @@
 @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);
+@input-affix-color: var(~'@{input-prefix}-affix-color-text', #666);
 
 // font
 @input-small-font-size-inner: var(~'@{input-prefix}-font-size-small', @font-size-small);

package/es/locale/locale.d.ts

@@ -37,6 +37,8 @@ declare class LocaleCache {
         'Pagination.prevPage': string;
         'Pagination.nextPage': string;
         'Pagination.total': string;
+        'Pagination.page': string;
+        'Pagination.row': string;
         'Pagination.first': string;
         'Pagination.last': string;
         'Pagination.perPage': string;
@@ -62,9 +64,6 @@ declare class LocaleCache {
         'CityPicker.internation': string;
         'CityPicker.common': string;
         'CityPicker.noData': string;
-        /**
-         * 获取所有语言包数据
-         */
         'Search.placeholder': string;
         'Search.desc': string[];
         'Search.nplDesc': string;

package/es/locale/zh-CN.d.ts

@@ -11,6 +11,8 @@ declare const locale: {
     'Pagination.prevPage': string;
     'Pagination.nextPage': string;
     'Pagination.total': string;
+    'Pagination.page': string;
+    'Pagination.row': string;
     'Pagination.first': string;
     'Pagination.last': string;
     'Pagination.perPage': string;

package/es/locale/zh-CN.js

@@ -15,7 +15,9 @@ var locale = _extends(_extends({
   'Progress.success': '加载成功',
   'Pagination.prevPage': '上一页',
   'Pagination.nextPage': '下一页',
-  'Pagination.total': '共{total}页',
+  'Pagination.total': '共{page}页{row}条',
+  'Pagination.page': '共{page}页',
+  'Pagination.row': '共{row}条',
   'Pagination.first': '第一页',
   'Pagination.last': '最后一页',
   'Pagination.perPage': '{size}条/页',

package/es/pagination/pagination.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { DropDownProps } from '../dropdown';
 export declare const PageTypes: ["basic", "bill", "simple", "less", "nicety"];
+export declare const TotalTypes: ["page", "row", "all"];
 export declare type pageType = typeof PageTypes[number];
+export declare type totalType = typeof TotalTypes[number];
 export interface IPaginationProps {
     total?: number;
     current?: number;
@@ -12,6 +14,7 @@ export interface IPaginationProps {
     bordered?: boolean;
     pageType?: pageType;
     showTitle?: boolean;
+    showTotal?: boolean | totalType;
     defaultCurrent?: number;
     defaultPageSize?: number;
     showSizeChanger?: boolean;

package/es/pagination/pagination.js

@@ -17,6 +17,7 @@ import Dropdown from '../dropdown';
 import devWarning from '../_utils/devwarning';
 import { tuple } from '../_utils/type';
 export var PageTypes = tuple('basic', 'bill', 'simple', 'less', 'nicety');
+export var TotalTypes = tuple('page', 'row', 'all');
 
 var Pagination = function Pagination(props) {
   var _context4;
@@ -198,14 +199,30 @@ var Pagination = function Pagination(props) {
       size: size
     }));
   }));
+  var mapShowTotal = {
+    basic: 'page',
+    nicety: 'row'
+  };
+  var mapTotalText = {
+    page: locale.getLangMsg('Pagination', 'page', {
+      page: totalPage
+    }),
+    row: locale.getLangMsg('Pagination', 'row', {
+      row: total
+    }),
+    all: locale.getLangMsg('Pagination', 'total', {
+      page: totalPage,
+      row: total
+    })
+  };
+  var showTotal = props.showTotal ? props.showTotal === true ? 'page' : props.showTotal : mapShowTotal[pageType];
+  var Total = showTotal && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-total")
+  }, mapTotalText[showTotal]);
   var normalPagination = /*#__PURE__*/React.createElement("div", {
     className: classNames(prefixCls, className),
     style: style
-  }, pageType === 'basic' && /*#__PURE__*/React.createElement("span", {
-    className: "".concat(prefixCls, "-total")
-  }, locale.getLangMsg('Pagination', 'total', {
-    total: totalPage
-  })), showJumper && /*#__PURE__*/React.createElement("span", {
+  }, Total, showJumper && /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-current")
   }, locale.getLangMsg('Pagination', 'order', {
     order: /*#__PURE__*/React.createElement("input", {
@@ -266,18 +283,20 @@ var Pagination = function Pagination(props) {
     type: "arrow-down",
     className: classNames("".concat(prefixCls, "-dropdown-icon"), _defineProperty({}, "".concat(prefixCls, "-dropdown-icon-open"), isOpen))
   })))));
-  var simplePagination = /*#__PURE__*/React.createElement("ul", {
-    className: classNames(prefixCls, 'simple', {
+  var simplePagination = /*#__PURE__*/React.createElement("div", {
+    className: classNames(prefixCls, 'simple', className),
+    style: style
+  }, Total, /*#__PURE__*/React.createElement("ul", {
+    className: classNames("".concat(prefixCls, "-action"), {
       bordered: bordered,
       disabled: disabled
-    }, className),
-    style: style
-  }, /*#__PURE__*/React.createElement("li", _extends({}, itemAttr('item', paginationLangMsg.prevPage)), /*#__PURE__*/React.createElement("button", {
+    })
+  }, /*#__PURE__*/React.createElement("li", _extends({}, itemAttr('action-item', paginationLangMsg.prevPage)), /*#__PURE__*/React.createElement("button", {
     onClick: handlePrev,
     disabled: page === 1 || disabled
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "arrow-left"
-  }))), /*#__PURE__*/React.createElement("li", _extends({}, itemAttr('item', _concatInstanceProperty(_context4 = "".concat(page, "/")).call(_context4, totalPage))), /*#__PURE__*/React.createElement("span", {
+  }))), /*#__PURE__*/React.createElement("li", _extends({}, itemAttr('action-item', _concatInstanceProperty(_context4 = "".concat(page, "/")).call(_context4, totalPage))), /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-current")
   }, showJumper ? /*#__PURE__*/React.createElement("input", {
     type: "text",
@@ -289,12 +308,12 @@ var Pagination = function Pagination(props) {
     value: inputPage === undefined ? page : inputPage
   }) : page), "/ ", /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-total")
-  }, totalPage)), /*#__PURE__*/React.createElement("li", _extends({}, itemAttr('item', paginationLangMsg.nextPage)), /*#__PURE__*/React.createElement("button", {
+  }, totalPage)), /*#__PURE__*/React.createElement("li", _extends({}, itemAttr('action-item', paginationLangMsg.nextPage)), /*#__PURE__*/React.createElement("button", {
     onClick: handleNext,
     disabled: page === totalPage || disabled
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "arrow-right"
-  }))));
+  })))));
   var lessPages = genArray(1, totalPage);
   var lessPagination = /*#__PURE__*/React.createElement("div", {
     className: classNames(prefixCls, 'less', {
@@ -302,7 +321,7 @@ var Pagination = function Pagination(props) {
       disabled: disabled
     }, className),
     style: style
-  }, /*#__PURE__*/React.createElement("ul", {
+  }, Total, /*#__PURE__*/React.createElement("ul", {
     className: "".concat(prefixCls, "-pages")
   }, /*#__PURE__*/React.createElement("li", _extends({}, itemAttr('pages-item', paginationLangMsg.prevPage)), /*#__PURE__*/React.createElement("button", {
     onClick: handlePrev,
@@ -347,7 +366,7 @@ var Pagination = function Pagination(props) {
       disabled: disabled
     }, className),
     style: style
-  }, /*#__PURE__*/React.createElement("ul", {
+  }, Total, /*#__PURE__*/React.createElement("ul", {
     className: "".concat(prefixCls, "-pages")
   }, /*#__PURE__*/React.createElement("li", _extends({}, itemAttr('pages-item', paginationLangMsg.prevPage)), /*#__PURE__*/React.createElement("button", {
     onClick: handlePrev,

package/es/pagination/style/index.css

@@ -292,7 +292,7 @@
 .kd-pagination .kd-pagination-selector .kd-dropdown-menu-item span {
   white-space: nowrap;
 }
-.kd-pagination.simple {
+.kd-pagination.simple .kd-pagination-action {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -305,22 +305,22 @@
   border-radius: var(--kd-g-radius-border, 2px);
   border: var(--kd-c-pagination-sizing-border-width, 1px) solid transparent;
 }
-.kd-pagination.simple.bordered {
+.kd-pagination.simple .kd-pagination-action.bordered {
   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) {
+.kd-pagination.simple .kd-pagination-action.bordered:active:not(.disabled) {
   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 {
+.kd-pagination.simple .kd-pagination-action.bordered.disabled,
+.kd-pagination.simple .kd-pagination-action.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 {
+.kd-pagination.simple .kd-pagination-action.disabled > .kd-pagination-action-item {
   color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
-.kd-pagination.simple .kd-pagination-item {
+.kd-pagination.simple .kd-pagination-action-item {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   margin: 0;
@@ -336,26 +336,29 @@
   vertical-align: middle;
   color: var(--kd-g-color-text-primary, #212121);
 }
-.kd-pagination.simple .kd-pagination-item:first-child,
-.kd-pagination.simple .kd-pagination-item:last-child {
+.kd-pagination.simple .kd-pagination-action-item:first-child,
+.kd-pagination.simple .kd-pagination-action-item:last-child {
   margin: 0;
 }
-.kd-pagination.simple .kd-pagination-item .kd-pagination-current {
+.kd-pagination.simple .kd-pagination-action-item .kd-pagination-current {
   margin-right: 2px;
   vertical-align: middle;
 }
-.kd-pagination.simple .kd-pagination-item .kd-pagination-current .kd-pagination-current-input {
+.kd-pagination.simple .kd-pagination-action-item .kd-pagination-current .kd-pagination-current-input {
   margin: 0;
 }
-.kd-pagination.simple .kd-pagination-item .kd-pagination-current .kd-pagination-current-input:disabled {
+.kd-pagination.simple .kd-pagination-action-item .kd-pagination-current .kd-pagination-current-input:disabled {
   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 {
+.kd-pagination.simple .kd-pagination-action-item .kd-pagination-total {
   vertical-align: middle;
   margin-right: 0;
 }
-.kd-pagination.simple .kd-pagination-item button {
+.kd-pagination.simple .kd-pagination-action-item.bordered > button {
+  border: none;
+}
+.kd-pagination.simple .kd-pagination-action-item button {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   position: relative;
@@ -370,21 +373,21 @@
   -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) {
+.kd-pagination.simple .kd-pagination-action-item button:hover:not(:disabled),
+.kd-pagination.simple .kd-pagination-action-item button:active:not(:disabled) {
   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 {
+.kd-pagination.simple .kd-pagination-action-item button:hover i,
+.kd-pagination.simple .kd-pagination-action-item button:active i {
   color: var(--kd-c-pagination-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
-.kd-pagination.simple .kd-pagination-item button:disabled {
+.kd-pagination.simple .kd-pagination-action-item button:disabled {
   cursor: not-allowed;
 }
-.kd-pagination.simple .kd-pagination-item button:disabled i {
+.kd-pagination.simple .kd-pagination-action-item button:disabled i {
   color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
-.kd-pagination.simple .kd-pagination-item button i {
+.kd-pagination.simple .kd-pagination-action-item button i {
   position: absolute;
   top: 0;
   right: 0;