bkui-vue 2.0.1-beta.29 → 2.0.1-beta.30

package/lib/modal/index.d.ts

@@ -56,6 +56,11 @@ declare const BkModal: {
         extCls: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
+        backgroundColor: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
     }>> & {
         onClose?: (...args: any[]) => any;
         onHidden?: (...args: any[]) => any;
@@ -117,6 +122,11 @@ declare const BkModal: {
         extCls: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
+        backgroundColor: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
     }>> & {
         onClose?: (...args: any[]) => any;
         onHidden?: (...args: any[]) => any;
@@ -128,6 +138,7 @@ declare const BkModal: {
         top: string;
         isShow: boolean;
         transfer: string | boolean | HTMLElement;
+        backgroundColor: string;
         renderDirective: "show" | "if";
         fullscreen: boolean;
         showMask: boolean;
@@ -199,6 +210,11 @@ declare const BkModal: {
         extCls: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
+        backgroundColor: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
     }>> & {
         onClose?: (...args: any[]) => any;
         onHidden?: (...args: any[]) => any;
@@ -210,6 +226,7 @@ declare const BkModal: {
         top: string;
         isShow: boolean;
         transfer: string | boolean | HTMLElement;
+        backgroundColor: string;
         renderDirective: "show" | "if";
         fullscreen: boolean;
         showMask: boolean;
@@ -278,6 +295,11 @@ declare const BkModal: {
     extCls: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
+    backgroundColor: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
 }>> & {
     onClose?: (...args: any[]) => any;
     onHidden?: (...args: any[]) => any;
@@ -289,6 +311,7 @@ declare const BkModal: {
     top: string;
     isShow: boolean;
     transfer: string | boolean | HTMLElement;
+    backgroundColor: string;
     renderDirective: "show" | "if";
     fullscreen: boolean;
     showMask: boolean;
@@ -354,6 +377,11 @@ declare const BkModal: {
         extCls: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
+        backgroundColor: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
     };
 }>;
 export default BkModal;

package/lib/modal/index.js

@@ -143,10 +143,12 @@ var useContentResize = function useContentResize(root, resizeTarget, props) {
     var _root$value$querySele3 = root.value.querySelector(".".concat(resolveClassName('modal-footer'))).getBoundingClientRect(),
       footerHeight = _root$value$querySele3.height;
     var windowInnerHeight = window.innerHeight;
-    isContentScroll.value = windowInnerHeight < headerHeight + contentHeight + footerHeight + 20;
+    var footerMarginTop = 32;
+    isContentScroll.value = windowInnerHeight < headerHeight + contentHeight + footerHeight + footerMarginTop;
     if (isContentScroll.value || props.fullscreen) {
+      var fixedFooterHeight = 48;
       contentStyles.value = {
-        height: "".concat(windowInnerHeight - headerHeight - footerHeight, "px"),
+        height: "".concat(windowInnerHeight - headerHeight - fixedFooterHeight, "px"),
         overflow: 'auto',
         'scrollbar-gutter': 'stable'
       };
@@ -157,11 +159,14 @@ var useContentResize = function useContentResize(root, resizeTarget, props) {
     }
   }, 30);
   (0,external_vue_namespaceObject.watch)(function () {
-    return props.isShow;
+    return [props.isShow, resizeTarget];
   }, function () {
     var observer;
     if (props.isShow) {
       (0,external_vue_namespaceObject.nextTick)(function () {
+        if (!resizeTarget.value) {
+          return;
+        }
         observer = new ResizeObserver(function () {
           calcContentScroll();
         });
@@ -317,7 +322,8 @@ var propsMixin = {
   }),
   left: shared_namespaceObject.PropTypes.string,
   top: shared_namespaceObject.PropTypes.string,
-  extCls: shared_namespaceObject.PropTypes.string
+  extCls: shared_namespaceObject.PropTypes.string,
+  backgroundColor: shared_namespaceObject.PropTypes.string.def('')
 };
 ;// CONCATENATED MODULE: ../../packages/modal/src/modal.tsx
 
@@ -432,6 +438,25 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
       if (!initRendered.value) {
         return null;
       }
+      var renderMask = function renderMask() {
+        if (!props.showMask) {
+          return null;
+        }
+        return (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Transition, {
+          "name": mask.getMaskCount() > 0 ? 'fadein' : ''
+        }, {
+          "default": function _default() {
+            return [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
+              "ref": maskRef,
+              "style": {
+                zIndex: zIndex.value
+              },
+              "class": _defineProperty({}, resolveClassName('modal-mask'), true),
+              "onClick": handleClickOutSide
+            }, null), [[external_vue_namespaceObject.vShow, localShow.value]])];
+          }
+        });
+      };
       var renderContent = function renderContent() {
         var _slots$header, _slots$default, _slots$footer, _slots$close;
         // v-if 模式渲染，如果 isShow 为 false 销毁 DOM
@@ -439,6 +464,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
           return null;
         }
         return (0,external_vue_namespaceObject.createVNode)("div", {
+          "style": {
+            backgroundColor: props.backgroundColor
+          },
           "class": resolveClassName('modal-body')
         }, [(0,external_vue_namespaceObject.createVNode)("div", {
           "class": resolveClassName('modal-header')
@@ -466,20 +494,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
             "ref": rootRef
           }, attrs, {
             "class": [resolveClassName('modal'), props.extCls || '']
-          }), [props.showMask && (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Transition, {
-            "name": mask.getMaskCount() > 0 ? 'fadein' : ''
-          }, {
-            "default": function _default() {
-              return [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
-                "ref": maskRef,
-                "style": {
-                  zIndex: zIndex.value
-                },
-                "class": _defineProperty({}, resolveClassName('modal-mask'), true),
-                "onClick": handleClickOutSide
-              }, null), [[external_vue_namespaceObject.vShow, localShow.value]])];
-            }
-          }), (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Transition, {
+          }), [renderMask(), (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Transition, {
             "name": "modal-".concat(props.animateType)
           }, {
             "default": function _default() {

package/lib/modal/modal.d.ts

@@ -57,6 +57,11 @@ declare const _default: import("vue").DefineComponent<{
     extCls: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
+    backgroundColor: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "hidden" | "shown" | "quick-close")[], "close" | "hidden" | "shown" | "quick-close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     isShow: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -113,6 +118,11 @@ declare const _default: import("vue").DefineComponent<{
     extCls: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
+    backgroundColor: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
 }>> & {
     onClose?: (...args: any[]) => any;
     onHidden?: (...args: any[]) => any;
@@ -124,6 +134,7 @@ declare const _default: import("vue").DefineComponent<{
     top: string;
     isShow: boolean;
     transfer: string | boolean | HTMLElement;
+    backgroundColor: string;
     renderDirective: "show" | "if";
     fullscreen: boolean;
     showMask: boolean;

package/lib/modal/props.mixin.d.ts

@@ -54,4 +54,9 @@ export declare const propsMixin: {
     extCls: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
+    backgroundColor: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
 };

package/lib/pagination/index.d.ts

@@ -34,7 +34,6 @@ declare const BkPagination: {
         align: import("vue-types").VueTypeDef<string> & {
             default: string;
         };
-        size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
         small: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -56,9 +55,6 @@ declare const BkPagination: {
         } & {
             default: boolean;
         };
-        beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
-            default: (...args: any[]) => any;
-        };
         layout: import("vue-types").VueTypeDef<string[]> & {
             default: () => string[];
         };
@@ -118,7 +114,6 @@ declare const BkPagination: {
         align: import("vue-types").VueTypeDef<string> & {
             default: string;
         };
-        size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
         small: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -140,9 +135,6 @@ declare const BkPagination: {
         } & {
             default: boolean;
         };
-        beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
-            default: (...args: any[]) => any;
-        };
         layout: import("vue-types").VueTypeDef<string[]> & {
             default: () => string[];
         };
@@ -159,7 +151,6 @@ declare const BkPagination: {
         location: string;
         count: number;
         modelValue: number;
-        beforeChange: (...args: any[]) => any;
         prevText: string;
         nextText: string;
         align: string;
@@ -209,7 +200,6 @@ declare const BkPagination: {
         align: import("vue-types").VueTypeDef<string> & {
             default: string;
         };
-        size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
         small: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -231,9 +221,6 @@ declare const BkPagination: {
         } & {
             default: boolean;
         };
-        beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
-            default: (...args: any[]) => any;
-        };
         layout: import("vue-types").VueTypeDef<string[]> & {
             default: () => string[];
         };
@@ -266,7 +253,6 @@ declare const BkPagination: {
         location: string;
         count: number;
         modelValue: number;
-        beforeChange: (...args: any[]) => any;
         prevText: string;
         nextText: string;
         align: string;
@@ -313,7 +299,6 @@ declare const BkPagination: {
     align: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     small: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -335,9 +320,6 @@ declare const BkPagination: {
     } & {
         default: boolean;
     };
-    beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
-        default: (...args: any[]) => any;
-    };
     layout: import("vue-types").VueTypeDef<string[]> & {
         default: () => string[];
     };
@@ -370,7 +352,6 @@ declare const BkPagination: {
     location: string;
     count: number;
     modelValue: number;
-    beforeChange: (...args: any[]) => any;
     prevText: string;
     nextText: string;
     align: string;

package/lib/pagination/index.js

@@ -242,11 +242,9 @@ function _isSlot(s) {
     if (!proxy.showLimit) {
       return null;
     }
-    return (0,external_vue_namespaceObject.createVNode)("div", (0,external_vue_namespaceObject.mergeProps)({
+    return (0,external_vue_namespaceObject.createVNode)("div", {
       "class": _defineProperty(_defineProperty(_defineProperty({}, resolveClassName('pagination-limit'), true), 'is-first', isFirst), 'is-last', isLast)
-    }, {
-      disabled: proxy.disabled
-    }), [(0,external_vue_namespaceObject.createVNode)("div", null, [t.value.eachPage]), (0,external_vue_namespaceObject.createVNode)(select_namespaceObject["default"], {
+    }, [(0,external_vue_namespaceObject.createVNode)("div", null, [t.value.eachPage]), (0,external_vue_namespaceObject.createVNode)(select_namespaceObject["default"], {
       "class": "".concat(resolveClassName('pagination-limit-select')),
       "clearable": false,
       "disabled": proxy.disabled,
@@ -371,6 +369,9 @@ var PAGE_ITEMS_NUM = 5;
    * @desc 上一页
    */
   var handlePrePage = function handlePrePage() {
+    if (proxy.disabled) {
+      return;
+    }
     if (isPagePreDisabled.value) {
       return;
     }
@@ -380,6 +381,9 @@ var PAGE_ITEMS_NUM = 5;
    * @desc 下一页
    */
   var handleNextPage = function handleNextPage() {
+    if (proxy.disabled) {
+      return;
+    }
     if (isPageNextDisabled.value) {
       return;
     }
@@ -390,6 +394,9 @@ var PAGE_ITEMS_NUM = 5;
    * @param { Number } totalPageNum
    */
   var handleItemClick = function handleItemClick(totalPageNum) {
+    if (proxy.disabled) {
+      return;
+    }
     if (totalPageNum === localCurrent.value) {
       return;
     }
@@ -399,12 +406,18 @@ var PAGE_ITEMS_NUM = 5;
    * @desc 上一批分页
    */
   var handlePreBatch = function handlePreBatch() {
+    if (proxy.disabled) {
+      return;
+    }
     localCurrent.value = Math.max(1, localCurrent.value - PAGE_ITEMS_NUM);
   };
   /**
    * @desc 下一批分页
    */
   var handleNextBatch = function handleNextBatch() {
+    if (proxy.disabled) {
+      return;
+    }
     localCurrent.value = Math.min(proxy.totalPageNum, localCurrent.value + PAGE_ITEMS_NUM);
   };
   var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
@@ -549,6 +562,9 @@ const popover_less_namespaceObject = popover_less_x({  });
    * @desc 上一页
    */
   var handlePrePage = function handlePrePage() {
+    if (proxy.disabled) {
+      return;
+    }
     if (isPagePreDisabled.value) {
       return;
     }
@@ -558,6 +574,9 @@ const popover_less_namespaceObject = popover_less_x({  });
    * @desc 下一页
    */
   var handleNextPage = function handleNextPage() {
+    if (proxy.disabled) {
+      return;
+    }
     if (isPageNextDisabled.value) {
       return;
     }
@@ -567,6 +586,9 @@ const popover_less_namespaceObject = popover_less_x({  });
    * @desc 获得焦点
    */
   var handlePageEditorFocus = function handlePageEditorFocus() {
+    if (proxy.disabled) {
+      return;
+    }
     isFocused.value = true;
   };
   /**
@@ -621,6 +643,7 @@ const popover_less_namespaceObject = popover_less_x({  });
       "width": 56,
       "arrow": false,
       "boundary": "body",
+      "disabled": proxy.disabled,
       "placement": "bottom",
       "theme": "light",
       "trigger": "click"
@@ -631,8 +654,8 @@ const popover_less_namespaceObject = popover_less_x({  });
         }, [(0,external_vue_namespaceObject.createVNode)("span", {
           "ref": inputRef,
           "class": "".concat(resolveClassName('pagination-editor')),
+          "contenteditable": !proxy.disabled,
           "spellcheck": "false",
-          "contenteditable": true,
           "onBlur": handlePageEditorBlur,
           "onFocus": handlePageEditorFocus,
           "onInput": handlePageEditorInput,
@@ -762,13 +785,11 @@ var paginationProps = {
   type: shared_namespaceObject.PropTypes.oneOf(['default', 'compact']).def('default'),
   location: shared_namespaceObject.PropTypes.oneOf(['left', 'right']).def('right'),
   align: shared_namespaceObject.PropTypes.oneOf(['left', 'center', 'right']).def('left'),
-  size: shared_namespaceObject.PropTypes.size(),
   small: shared_namespaceObject.PropTypes.bool.def(false),
   showTotalCount: shared_namespaceObject.PropTypes.bool.def(true),
   prevText: shared_namespaceObject.PropTypes.string,
   nextText: shared_namespaceObject.PropTypes.string,
   disabled: shared_namespaceObject.PropTypes.bool.def(false),
-  beforeChange: shared_namespaceObject.PropTypes.func,
   layout: shared_namespaceObject.PropTypes.custom(function (value) {
     var layoutNameMap = {
       total: true,
@@ -836,7 +857,7 @@ var paginationProps = {
   },
   render: function render() {
     var _this = this;
-    var paginationClass = (0,shared_namespaceObject.classes)(_defineProperty(_defineProperty(_defineProperty({}, "".concat(this.resolveClassName('pagination')), true), "".concat(this.resolveClassName("pagination--".concat(this.size))), true), "is-align-".concat(this.align), true));
+    var paginationClass = (0,shared_namespaceObject.classes)(_defineProperty(_defineProperty(_defineProperty({}, "".concat(this.resolveClassName('pagination')), true), "is-align-".concat(this.align), true), 'is-disabled', this.disabled));
     var layoutMap = {
       total: this.renderTotal,
       list: this.small ? this.renderSmallList : this.renderList,

package/lib/pagination/pagination.css

@@ -132,11 +132,11 @@
   display: flex;
   align-items: center;
   font-size: 12px;
-  letter-spacing: normal;
   color: #63656e;
+  letter-spacing: normal;
   user-select: none;
 }
-.bk-pagination.is-disabled {
+.bk-pagination.is-disabled * {
   cursor: not-allowed;
 }
 .bk-pagination.is-align-left {
@@ -176,16 +176,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 32px;
   min-width: 32px;
+  height: 32px;
   padding: 0 4px;
   margin-right: 2px;
   margin-left: 2px;
   color: #63656e;
   cursor: pointer;
+  user-select: none;
   background: #fff;
   border-radius: 2px;
-  user-select: none;
 }
 .bk-pagination-list-pre-batch.is-active,
 .bk-pagination-list-next-batch.is-active,
@@ -260,13 +260,13 @@
 }
 .bk-pagination-small-list .bk-pagination-picker {
   display: flex;
+  align-items: center;
   height: 26px;
   margin: 0 4px;
   cursor: pointer;
   background-color: #f0f1f5;
   border: 1px solid #f0f1f5;
   border-radius: 2px;
-  align-items: center;
 }
 .bk-pagination-small-list .bk-pagination-picker:hover {
   background-color: #eaebf0;
@@ -278,8 +278,8 @@
   box-shadow: 0px 0px 4px rgba(58, 132, 255, 0.4);
 }
 .bk-pagination-editor {
-  height: 16px;
   min-width: 23px;
+  height: 16px;
   padding-right: 4px;
   padding-left: 8px;
   line-height: 16px;
@@ -297,13 +297,13 @@
 .bk-pagination-btn-pre,
 .bk-pagination-btn-next {
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 26px;
   height: 26px;
   font-size: 20px;
   color: #979ba5;
   cursor: pointer;
-  justify-content: center;
-  align-items: center;
 }
 .bk-pagination-btn-pre:hover,
 .bk-pagination-btn-next:hover {

package/lib/pagination/pagination.d.ts

@@ -34,7 +34,6 @@ export declare const paginationProps: {
     align: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     small: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -56,9 +55,6 @@ export declare const paginationProps: {
     } & {
         default: boolean;
     };
-    beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
-        default: (...args: any[]) => any;
-    };
     layout: import("vue-types").VueTypeDef<string[]> & {
         default: () => string[];
     };
@@ -99,7 +95,6 @@ declare const _default: import("vue").DefineComponent<{
     align: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     small: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -121,9 +116,6 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
-        default: (...args: any[]) => any;
-    };
     layout: import("vue-types").VueTypeDef<string[]> & {
         default: () => string[];
     };
@@ -178,7 +170,6 @@ declare const _default: import("vue").DefineComponent<{
     align: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     small: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -200,9 +191,6 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    beforeChange: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
-        default: (...args: any[]) => any;
-    };
     layout: import("vue-types").VueTypeDef<string[]> & {
         default: () => string[];
     };
@@ -219,7 +207,6 @@ declare const _default: import("vue").DefineComponent<{
     location: string;
     count: number;
     modelValue: number;
-    beforeChange: (...args: any[]) => any;
     prevText: string;
     nextText: string;
     align: string;

package/lib/pagination/pagination.less

@@ -4,12 +4,14 @@
   display: flex;
   align-items: center;
   font-size: 12px;
-  letter-spacing: normal;
   color: #63656e;
+  letter-spacing: normal;
   user-select: none;
 
   &.is-disabled {
-    cursor: not-allowed;
+    * {
+      cursor: not-allowed;
+    }
   }
 
   &.is-align-left {
@@ -17,11 +19,11 @@
   }
 
   &.is-align-center {
-    justify-content: center;;
+    justify-content: center;
   }
 
   &.is-align-right {
-    justify-content: flex-end;;
+    justify-content: flex-end;
   }
 
   & > * {
@@ -35,7 +37,6 @@
   & > .is-last {
     margin-right: 0;
   }
-
 }
 .@{bk-prefix}-pagination-total {
   display: flex;
@@ -59,16 +60,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 32px;
   min-width: 32px;
+  height: 32px;
   padding: 0 4px;
   margin-right: 2px;
   margin-left: 2px;
   color: #63656e;
   cursor: pointer;
+  user-select: none;
   background: #fff;
   border-radius: 2px;
-  user-select: none;
 
   &.is-active {
     color: #3a84ff;
@@ -149,13 +150,13 @@
 
   .@{bk-prefix}-pagination-picker {
     display: flex;
+    align-items: center;
     height: 26px;
     margin: 0 4px;
     cursor: pointer;
     background-color: #f0f1f5;
     border: 1px solid #f0f1f5;
     border-radius: 2px;
-    align-items: center;
 
     &:hover {
       background-color: #eaebf0;
@@ -165,14 +166,14 @@
     &.is-focused {
       background-color: #fff;
       border-color: #3a84ff;
-      box-shadow: 0px 0px 4px rgba(58, 132, 255, .4);
+      box-shadow: 0px 0px 4px rgba(58, 132, 255, 0.4);
     }
   }
 }
 
 .@{bk-prefix}-pagination-editor {
-  height: 16px;
   min-width: 23px;
+  height: 16px;
   padding-right: 4px;
   padding-left: 8px;
   line-height: 16px;
@@ -181,7 +182,7 @@
   border: 0;
   border-radius: 2px;
   outline: none;
-  transition: all .15s
+  transition: all 0.15s;
 }
 .@{bk-prefix}-pagination-small-list-total {
   padding-right: 8px;
@@ -190,13 +191,13 @@
 .@{bk-prefix}-pagination-btn-pre,
 .@{bk-prefix}-pagination-btn-next {
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 26px;
   height: 26px;
   font-size: 20px;
   color: #979ba5;
   cursor: pointer;
-  justify-content: center;
-  align-items: center;
 
   &:hover {
     color: #3a84ff;