bkui-vue 0.0.1-beta.39 → 0.0.1-beta.41

package/lib/shared/z-index-manager.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+/**
+ * 页面框架层级
+ */
+export declare enum BKLAYERTYPE {
+    /** 网站内容的背景、拓扑的画布等 */
+    BOTTOM = "bottom",
+    /** 页面呈现的各类内容 */
+    CONTENT = "content",
+    /** 顶部导航、侧边导航以及用户信息等 */
+    NAVI = "navi",
+    /** 页面需全屏操作的部分功能或编辑器的全屏模式 */
+    FULLSCREEN = "fullScreen",
+    /** 各类功能插件 */
+    PLUGINS = "plugins",
+    /** 各类弹窗或抽屉（非模态弹窗不考虑） */
+    MODAL = "modal",
+    /** 各类消息提示 */
+    MESSAGE = "message",
+    /** 各类popper提示 */
+    POPPER = "popper"
+}
+/** 定义不同分层默认值 */
+export declare const BKLAYERD_INDEX_EFAULT_VALUE: {
+    bottom: number;
+    content: number;
+    navi: number;
+    fullScreen: number;
+    modal: number;
+    plugins: number;
+    message: number;
+    popper: number;
+};
+declare class BKZIndexManager {
+    storageLayerIndexValue: any;
+    constructor();
+    /**
+     *
+     * @param type
+     * @returns
+     */
+    getNextIndex(type: BKLAYERTYPE): number;
+    /** 获取弹窗类型最新zIndex的值 */
+    getModalNextIndex(): number;
+    /** 获取Message类型最新zIndex的值 */
+    getMessageNextIndex(): number;
+    /** 获取全屏类型最新zIndex的值 */
+    getFullScreenNextIndex(): number;
+    /** 获取导航类型最新zIndex的值 */
+    getNaviNextIndex(): number;
+    /** 获取导航类型最新zIndex的值 */
+    getPopperIndex(): number;
+    /**
+     * 更新自定义默认zIndex配置
+     * @param config 配置项
+     */
+    setDefaultZIndex(config: any): void;
+    /**
+     * 重置zIndex
+     * @param config 配置项
+     */
+    resetZIndex(config: any): void;
+    /**
+     * 根据默认设置创建副本
+     */
+    private copyDefaultValue;
+}
+export declare const bkZIndexManager: BKZIndexManager;
+export {};

package/lib/sideslider/index.d.ts

@@ -0,0 +1,206 @@
+declare const BkSideslider: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            width: string | number;
+            height: string | number;
+            showMask: boolean;
+            direction: string;
+            isShow: boolean;
+            customClass: string | unknown[];
+            scrollable: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            direction: {
+                type: StringConstructor;
+                default: string;
+                validator: (value: string) => boolean;
+            };
+            isShow: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            width: {
+                type: (NumberConstructor | StringConstructor)[];
+                default: string;
+            };
+            height: {
+                type: (NumberConstructor | StringConstructor)[];
+                default: string;
+            };
+            customClass: {
+                type: (ArrayConstructor | StringConstructor)[];
+                default: string;
+            };
+            scrollable: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            showMask: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & {
+            onClosed?: (...args: any[]) => any;
+            "onUpdate:isShow"?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "width" | "height" | "showMask" | "direction" | "isShow" | "customClass" | "scrollable">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $emit: (event: "closed" | "update:isShow", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            direction: {
+                type: StringConstructor;
+                default: string;
+                validator: (value: string) => boolean;
+            };
+            isShow: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            width: {
+                type: (NumberConstructor | StringConstructor)[];
+                default: string;
+            };
+            height: {
+                type: (NumberConstructor | StringConstructor)[];
+                default: string;
+            };
+            customClass: {
+                type: (ArrayConstructor | StringConstructor)[];
+                default: string;
+            };
+            scrollable: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            showMask: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+        }>> & {
+            onClosed?: (...args: any[]) => any;
+            "onUpdate:isShow"?: (...args: any[]) => any;
+        }, unknown, unknown, {}, {
+            handleClose(): void;
+        }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("closed" | "update:isShow")[], string, {
+            width: string | number;
+            height: string | number;
+            showMask: boolean;
+            direction: string;
+            isShow: boolean;
+            customClass: string | unknown[];
+            scrollable: boolean;
+        }> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        direction: {
+            type: StringConstructor;
+            default: string;
+            validator: (value: string) => boolean;
+        };
+        isShow: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        width: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: string;
+        };
+        height: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: string;
+        };
+        customClass: {
+            type: (ArrayConstructor | StringConstructor)[];
+            default: string;
+        };
+        scrollable: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        showMask: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & {
+        onClosed?: (...args: any[]) => any;
+        "onUpdate:isShow"?: (...args: any[]) => any;
+    } & import("vue").ShallowUnwrapRef<{}> & {} & {} & {
+        handleClose(): void;
+    } & import("vue").ComponentCustomProperties;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    direction: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    isShow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    width: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    height: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    customClass: {
+        type: (ArrayConstructor | StringConstructor)[];
+        default: string;
+    };
+    scrollable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showMask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onClosed?: (...args: any[]) => any;
+    "onUpdate:isShow"?: (...args: any[]) => any;
+}, unknown, unknown, {}, {
+    handleClose(): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("closed" | "update:isShow")[], "closed" | "update:isShow", {
+    width: string | number;
+    height: string | number;
+    showMask: boolean;
+    direction: string;
+    isShow: boolean;
+    customClass: string | unknown[];
+    scrollable: boolean;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
+export default BkSideslider;

package/lib/sideslider/sideslider.css

@@ -0,0 +1,69 @@
+.bk-modal-wrapper.bk-sideslider-wrapper {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: auto;
+  background: #fff;
+  transform: initial;
+  box-shadow: -5px 0 8px -5px rgba(0, 0, 0, 0.2);
+}
+.bk-modal-wrapper.bk-sideslider-wrapper.scroll-able .bk-modal-content {
+  overflow: auto;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header {
+  width: 100%;
+  height: 60px;
+  background: #fff;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-close {
+  position: absolute;
+  top: 0;
+  width: 30px;
+  height: 60px;
+  font-size: 24px;
+  line-height: 60px;
+  color: #fff;
+  text-align: center;
+  cursor: pointer;
+  background-color: #3a84ff;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-close.right {
+  left: 0;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-close.right::before {
+  top: 50%;
+  left: 50%;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-top: solid 2px #fff;
+  border-right: solid 2px #fff;
+  content: '';
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-close.left {
+  right: 0;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-close.left::before {
+  top: 50%;
+  left: 50%;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-top: solid 2px #fff;
+  border-left: solid 2px #fff;
+  content: '';
+  transform: translate(50%, -50%) rotate(-45deg);
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-title {
+  height: 60px;
+  padding-left: 30px;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 60px;
+  color: #666;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-title.right {
+  padding: 0px 0px 0px 50px;
+}

package/lib/sideslider/sideslider.d.ts

@@ -0,0 +1,75 @@
+declare const _default: import("vue").DefineComponent<{
+    direction: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    isShow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    width: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    height: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    customClass: {
+        type: (ArrayConstructor | StringConstructor)[];
+        default: string;
+    };
+    scrollable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showMask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, unknown, unknown, {}, {
+    handleClose(): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("closed" | "update:isShow")[], "closed" | "update:isShow", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    direction: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    isShow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    width: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    height: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    customClass: {
+        type: (ArrayConstructor | StringConstructor)[];
+        default: string;
+    };
+    scrollable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showMask: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onClosed?: (...args: any[]) => any;
+    "onUpdate:isShow"?: (...args: any[]) => any;
+}, {
+    width: string | number;
+    height: string | number;
+    showMask: boolean;
+    direction: string;
+    isShow: boolean;
+    customClass: string | unknown[];
+    scrollable: boolean;
+}>;
+export default _default;

package/lib/sideslider/sideslider.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("../button"),require("../modal"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../button","../modal"],t);else{var r="object"==typeof exports?t(require("../shared"),require("vue"),require("../button"),require("../modal")):t(e["../shared"],e.vue,e["../button"],e["../modal"]);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(self,((e,t,r,o)=>(()=>{"use strict";var n={4976:e=>{e.exports=r},8014:e=>{e.exports=o},4212:t=>{t.exports=e},748:e=>{e.exports=t}},i={};function s(e){var t=i[e];if(void 0!==t)return t.exports;var r=i[e]={exports:{}};return n[e](r,r.exports,s),r.exports}s.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return s.d(t,{a:t}),t},s.d=(e,t)=>{for(var r in t)s.o(t,r)&&!s.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var d={};return(()=>{s.r(d),s.d(d,{default:()=>u});var e=s(4212),t=s(748),r=s(4976),o=s.n(r),n=s(8014),i=s.n(n);var l=i().propsMixin,a=Object.assign({},l);a.width.default="400",a.height.default="100%";const c=(0,t.defineComponent)({name:"Sideslider",components:{BkModal:i(),BkButton:o()},props:Object.assign(Object.assign({},a),{direction:{type:String,default:"right",validator:function(e){var t=["left","right"];return!(t.indexOf(e)<0&&(console.error("direction property is not valid: '".concat(e,"',【").concat(t.join(" | "),"】")),1))}}}),emits:["closed","update:isShow"],methods:{handleClose:function(){this.$emit("update:isShow",!1),this.$emit("closed")}},render:function(){var e,r=this,o={header:function(){var e,o,n;return(0,t.createVNode)(t.Fragment,null,[(0,t.createVNode)("div",{class:"bk-sideslider-header"},[(0,t.createVNode)("span",{class:"bk-sideslider-close ".concat(r.direction),onClick:r.handleClose},null),(0,t.createVNode)("span",{class:"bk-sideslider-title ".concat(r.direction)},[null!==(n=null===(o=(e=r.$slots).header)||void 0===o?void 0:o.call(e))&&void 0!==n?n:"Header"])])])},default:function(){var e,t,o;return null!==(o=null===(t=(e=r.$slots).default)||void 0===t?void 0:t.call(e))&&void 0!==o?o:"Content"},footer:function(){return(0,t.createVNode)("div",{class:"bk-sideslider-footer"},null)}},n="bk-sideslider-wrapper ".concat(this.scrollable?"scroll-able":"");return(0,t.createVNode)(i(),(0,t.mergeProps)(this.$props,{class:n,style:"".concat(this.direction,": 0")}),"function"==typeof(e=o)||"[object Object]"===Object.prototype.toString.call(e)&&!(0,t.isVNode)(e)?o:{default:function(){return[o]}})}}),u=(0,e.withInstall)(c)})(),d})()));

package/lib/sideslider/sideslider.less

@@ -0,0 +1,86 @@
+@import '../styles/themes/themes.less';
+
+.bk-modal-wrapper {
+  &.bk-sideslider-wrapper {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: auto;
+    background: #fff;
+    transform: initial;
+    box-shadow: -5px 0 8px -5px rgb(0 0 0 / 20%);
+
+    &.scroll-able {
+      .bk-modal-content {
+        overflow: auto;
+      }
+    }
+
+    .bk-sideslider-header {
+      width: 100%;
+      height: 60px;
+      background: #fff;
+      border-bottom: 1px solid #dcdee5;
+
+      .bk-sideslider-close {
+        position: absolute;        
+        top: 0;
+        width: 30px;
+        height: 60px;
+        font-size: 24px;
+        line-height: 60px;
+        color: #fff;
+        text-align: center;
+        cursor: pointer;
+        background-color: @primary-color;
+
+        &.right {
+          left: 0;
+
+          &::before {
+            top: 50%;
+            left: 50%;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-top: solid 2px #fff;
+            border-right: solid 2px #fff;
+            content: '';
+            transform: translate(-50%, -50%) rotate(45deg);
+          }
+        }
+
+        &.left {
+          right: 0;
+
+          &::before {
+            top: 50%;
+            left: 50%;
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-top: solid 2px #fff;
+            border-left: solid 2px #fff;
+            content: '';
+            transform: translate(50%, -50%) rotate(-45deg);
+          }
+        }
+
+        
+      }
+
+      .bk-sideslider-title {
+        height: 60px;
+        padding-left: 30px;
+        font-size: 16px;
+        font-weight: 700;
+        line-height: 60px;
+        color: #666;
+
+        &.right {
+          padding: 0px 0px 0px 50px;
+        }
+      }
+    }
+  }
+}

package/lib/sideslider/sideslider.variable.css

@@ -0,0 +1,162 @@
+:root {
+  --bk-prefix: bk;
+  --popover-max-height: 216px;
+  --primary-color: #3a84ff;
+  --success-color: #2dcb56;
+  --warning-color: #ff9c01;
+  --danger-color: #ea3636;
+  --default-color: #63656e;
+  --gray-color: #979ba5;
+  --light-gray: #c4c6cc;
+  --white-color: white;
+  --disable-color: #dcdee5;
+  --font-size-base: 12px;
+  --font-size-medium: 14px;
+  --font-size-large: 16px;
+  --line-height-base: 16px;
+  --line-height-medium: 16px;
+  --line-height-large: 18px;
+  --component-size-small: 26px;
+  --component-size-base: 32px;
+  --component-size-large: 38px;
+  --border-width-base: 1px;
+  --border-style-base: solid;
+  --border-radius-base: 2px;
+  --input-disabled-bg: #fafbfd;
+  --input-disabled-border: var(--disable-color);
+  --input-height-base: var(--component-size-base);
+  --input-color: var(--default-color);
+  --input-bg: white;
+  --input-border-color: var(--light-gray);
+  --input-broder-radius: 3px;
+  --input-shadow-color: #a3c5fd;
+  --input-horizontal-padding: 10px;
+  --input-block-color: #f4f6fa;
+  --input-icon-size: var(--font-size-large);
+  --input-maxlength-color: #979ba5;
+  --button-primary-hover-color: #5594fa;
+  --button-danger-hover-color: #ff5656;
+  --button-success-hover-color: #45e35f;
+  --button-warning-hover-color: #ffb848;
+  --button-default-hover-border-color: #979ba5;
+  --button-primary-active-color: #2c77f4;
+  --button-danger-active-color: #db2626;
+  --button-success-active-color: #1ab943;
+  --button-warning-active-color: #eb9000;
+  --fixed-navbar-background: #fff;
+  --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
+  --switch-default-color: #fff;
+  --switch-grey-color: #c4c6cc;
+  --breadcrumb-black-color: #979ba5;
+  --breadcrumb-primary-hover-color: #0082ff;
+  --breadcrumb-fn-main-color: #63656e;
+  --link-default-hover-color: #979ba5;
+  --link-primary-hover-color: #699df4;
+  --link-success-hover-color: #45e35f;
+  --link-warning-hover-color: #ffb848;
+  --link-danger-hover-color: #ff5656;
+  --link-default-disabled-color: #dcdee5;
+  --link-primary-disabled-color: #a3c5fd;
+  --link-success-disabled-color: #94f5a4;
+  --link-warning-disabled-color: #ffd695;
+  --link-danger-disabled-color: #fd9c9c;
+  --message-color: var(--default-color);
+  --message-primary-bg-color: #f0f8ff;
+  --message-primary-border-color: #e1ecff;
+  --message-warning-bg-color: #fff4e2;
+  --message-warning-border-color: #ffe8c3;
+  --message-success-bg-color: #f2fff4;
+  --message-success-border-color: #dcffe2;
+  --message-danger-bg-color: #ffeded;
+  --message-danger-border-color: #ffdddd;
+  --slider-default-bg: #dcdee5;
+  --slider-disable-bar-bg: #979ba5;
+  --menu-bg-color: #182132;
+  --submenu-bg-color: #151d2c;
+  --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+  --menu-color: #96a2b9;
+  --menu-group-color: var(--default-color);
+  --menu-width: 260px;
+  --menu-collapse-width: 60px;
+  --menu-active-color: white;
+  --nav-header-bg-color: #182132;
+  --nav-bg-color: #182132;
+  --date-picker-disabled-bg: #fafbfd;
+  --date-picker-dropdown-mb: 4px;
+  --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #575961;
+  --table-row-hover-bg-color: #f5f7fa;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: auto;
+  background: #fff;
+  transform: initial;
+  box-shadow: -5px 0 8px -5px rgba(0, 0, 0, 0.2);
+}
+.bk-modal-wrapper.bk-sideslider-wrapper.scroll-able .bk-modal-content {
+  overflow: auto;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header {
+  width: 100%;
+  height: 60px;
+  background: #fff;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-close {
+  position: absolute;
+  top: 0;
+  width: 30px;
+  height: 60px;
+  font-size: 24px;
+  line-height: 60px;
+  color: #fff;
+  text-align: center;
+  cursor: pointer;
+  background-color: var(--primary-color);
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-close.right {
+  left: 0;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-close.right::before {
+  top: 50%;
+  left: 50%;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-top: solid 2px #fff;
+  border-right: solid 2px #fff;
+  content: '';
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-close.left {
+  right: 0;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-close.left::before {
+  top: 50%;
+  left: 50%;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-top: solid 2px #fff;
+  border-left: solid 2px #fff;
+  content: '';
+  transform: translate(50%, -50%) rotate(-45deg);
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-title {
+  height: 60px;
+  padding-left: 30px;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 60px;
+  color: #666;
+}
+.bk-modal-wrapper.bk-sideslider-wrapper .bk-sideslider-header .bk-sideslider-title.right {
+  padding: 0px 0px 0px 50px;
+}