bkui-vue 0.0.1-beta.4 → 0.0.1-beta.400

package/lib/styles/themes/themes.less

@@ -1,13 +1,16 @@
 @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;
+@whitesmoke-color: #fafbfd;
 @disable-color: #dcdee5;
 
 @font-size-base: 12px;
@@ -21,11 +24,12 @@
 
 @component-size-small: 26px;
 @component-size-base: 32px;
-@component-size-large: 38px;
+@component-size-large: 40px;
 
 @border-width-base: 1px;
 @border-style-base: solid;
 @border-radius-base: 2px;
+@border-style-color: @light-gray;
 
 
 // input theme
@@ -38,8 +42,10 @@
 @input-broder-radius: 3px;
 @input-shadow-color: #a3c5fd;
 @input-horizontal-padding: 10px;
-@input-block-color: #f4f6fa;
-@input-icon-size: @font-size-large;
+@input-block-color: #f5f7fa;
+@input-block-hover-color: #eaebf0;
+
+@input-icon-size: @font-size-medium;
 @input-maxlength-color: #979ba5;
 
 //button theme
@@ -52,18 +58,33 @@
 @button-danger-active-color: #db2626;
 @button-success-active-color: #1ab943;
 @button-warning-active-color: #eb9000;
+@button-selected-bg-color: #e1ecff;
+@button-disabled-selected-bg-color: #f0f1f5;
+
+// radio theme
+@radio-font-color: #63656e;
+@radio-active-color: #5594fa;
+@radio-hover-border-color: #979ba5;
+@radio-disabled-border: #dcdee5;
+@radio-disabled-font-color: #c4c6cc;
+@radio-distable-checked-bg: #fafbfd;
+@radio-button-checked-bg: #e1ecff;
+
 
 // fixed-navbar theme
 @fixed-navbar-background: #fff;
-@fixed-navbar-boxshadow-color: rgba(0,0,0,0.10);
+@fixed-navbar-boxshadow-color: rgba(0,0,0,.1);
+
 // switch theme
 @switch-default-color: #fff;
 @switch-grey-color: #c4c6cc;
+
 // breadcrumb theme
 @breadcrumb-black-color: #979ba5;
 @breadcrumb-primary-hover-color: #0082ff;
 @breadcrumb-fn-main-color: #63656e;
-//link theme
+
+// link theme
 @link-default-hover-color: #979ba5;
 @link-primary-hover-color: #699df4;
 @link-success-hover-color: #45e35f;
@@ -74,3 +95,68 @@
 @link-success-disabled-color: #94f5a4;
 @link-warning-disabled-color: #ffd695;
 @link-danger-disabled-color: #fd9c9c;
+
+// message theme
+@message-color: @default-color;
+@message-primary-bg-color: #f0f8ff;
+@message-primary-border-color: #e1ecff;
+@message-primary-shadow-color: #e1e8f4;
+@message-warning-bg-color: #fff4e2;
+@message-warning-border-color: #ffe8c3;
+@message-warning-shadow-color: #ede6db;
+@message-success-bg-color: #f2fff4;
+@message-success-border-color: #dcffe2;
+@message-success-shadow-color: #cef0d7;
+@message-danger-bg-color: #ffeded;
+@message-danger-border-color: #ffdddd;
+@message-danger-shadow-color: #f6dada;
+
+// slider theme
+@slider-default-bg: #dcdee5;
+@slider-disable-bar-bg: #979ba5;
+
+
+// menu theme
+@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: @default-color;
+@menu-width: 260px;
+@menu-collapse-width: 60px;
+@menu-active-color: white;
+
+// navigation theme
+@nav-header-bg-color: #182132;
+@nav-bg-color: #182132;
+
+// date-picker theme
+@date-picker-disabled-bg: #fafbfd;
+@date-picker-dropdown-mb: 4px;
+@date-picker-dropdown-bg: #fff;
+
+// table theme
+@table-bg-color: @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;
+@table-row-active-bg-color: #f0f1f5;
+
+// cascader theme
+@cascader-panel-border-color: #dcdee5;
+@cascader-panel-hover: #f5f7fa;
+@cascader-panel-active: #e1ecff;
+@cascader-panel-disabled-bg: #fff;
+
+
+// search-select theme
+@search-select-focus-border-color: @primary-color;
+@search-select-focus-color: #3c96ff;
+@search-select-font-color: @default-color;
+@search-select-placeholder-color: @light-gray;
+@search-select-message-color: @danger-color;
+@search-select-menu-border-color: @disable-color;

package/lib/swiper/index.d.ts

@@ -0,0 +1,181 @@
+declare const BkSwiper: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            width: number;
+            height: number;
+            list: unknown[];
+            isLoop: boolean;
+            loopTime: number;
+            pics: unknown[];
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            isLoop: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            loopTime: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            pics: import("vue-types").VueTypeValidableDef<unknown[]> & {
+                default: () => unknown[];
+            } & {
+                default: () => unknown[];
+            };
+            list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+                default: () => unknown[];
+            } & {
+                default: () => unknown[];
+            };
+            height: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            };
+            width: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            };
+        }>> & {
+            "onIndex-change"?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "width" | "height" | "list" | "isLoop" | "loopTime" | "pics">;
+        $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: "index-change", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            isLoop: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            loopTime: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            pics: import("vue-types").VueTypeValidableDef<unknown[]> & {
+                default: () => unknown[];
+            } & {
+                default: () => unknown[];
+            };
+            list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+                default: () => unknown[];
+            } & {
+                default: () => unknown[];
+            };
+            height: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            };
+            width: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            };
+        }>> & {
+            "onIndex-change"?: (...args: any[]) => any;
+        }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "index-change"[], string, {
+            width: number;
+            height: number;
+            list: unknown[];
+            isLoop: boolean;
+            loopTime: number;
+            pics: unknown[];
+        }> & {
+            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<{
+        isLoop: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        loopTime: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        pics: import("vue-types").VueTypeValidableDef<unknown[]> & {
+            default: () => unknown[];
+        } & {
+            default: () => unknown[];
+        };
+        list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+            default: () => unknown[];
+        } & {
+            default: () => unknown[];
+        };
+        height: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        };
+        width: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        };
+    }>> & {
+        "onIndex-change"?: (...args: any[]) => any;
+    } & import("vue").ShallowUnwrapRef<() => JSX.Element> & {} & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    isLoop: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loopTime: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    pics: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    height: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    width: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+}>> & {
+    "onIndex-change"?: (...args: any[]) => any;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "index-change"[], "index-change", {
+    width: number;
+    height: number;
+    list: unknown[];
+    isLoop: boolean;
+    loopTime: number;
+    pics: unknown[];
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
+export default BkSwiper;

package/lib/swiper/index.js

@@ -0,0 +1 @@
+!function(e,n){if("object"==typeof exports&&"object"==typeof module)module.exports=n(require("../shared"),require("vue"));else if("function"==typeof define&&define.amd)define(["../shared","vue"],n);else{var t="object"==typeof exports?n(require("../shared"),require("vue")):n(e["../shared"],e.vue);for(var r in t)("object"==typeof exports?exports:e)[r]=t[r]}}(self,((e,n)=>(()=>{"use strict";var t={4212:n=>{n.exports=e},748:e=>{e.exports=n}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.d=(e,n)=>{for(var t in n)o.o(n,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},o.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{o.r(a),o.d(a,{default:()=>r});var e=o(4212),n=o(748);const t=(0,n.defineComponent)({name:"Swiper",props:{isLoop:e.PropTypes.bool.def(!0),loopTime:e.PropTypes.number.def(8e3),pics:e.PropTypes.array.def([]),list:e.PropTypes.array.def([]),height:e.PropTypes.number,width:e.PropTypes.number},emits:["index-change"],setup:function(e,t){var r,o=t.emit,a=t.slots,i=(0,n.toRefs)(e),l=i.isLoop,u=i.loopTime,s=i.pics,c=i.list,p=i.height,d=i.width,v=(0,n.ref)(),f=(0,n.ref)(0),h=(0,n.ref)(0),b=(0,n.ref)(0),m=(0,n.ref)(0),w=(0,n.computed)((function(){var e;return(null===(e=c.value)||void 0===e?void 0:e.length)>0?c.value:s.value})),g=(0,n.computed)((function(){return{width:"".concat(h.value*w.value.length,"px"),transform:"translateX(-".concat(h.value*f.value,"px)")}})),y=(0,n.computed)((function(){return{width:"".concat(h.value,"px"),height:"".concat(b.value,"px")}})),k=function(e){var n=e;e>=w.value.length&&(n=0),e<0&&(n=w.value.length-1),f.value=n,o("index-change",n)},x=function(e){return["bk-swiper-img",{"bk-swiper-link":e.link},e.class]},T=function(e){return{"background-image":"url(".concat(e.url,")"),"background-color":e.color}},N=function(e){return{"bk-current-index":f.value===e}},P=function e(){l.value&&(m.value=window.setTimeout((function(){k(f.value+1),e()}),u.value))},V=function(){var e,n=function(e){if(void 0===e)return{height:0,width:0};var n=getComputedStyle(e),t=e.clientWidth-parseFloat(n.paddingTop)-parseFloat(n.paddingBottom);return{height:e.clientHeight-parseFloat(n.paddingLeft)-parseFloat(n.paddingRight),width:t}}(null===(e=v.value)||void 0===e?void 0:e.parentElement);h.value=+d.value>0?d.value:n.width,b.value=+p.value>0?p.value:n.height};return(0,n.watch)([p,d],V),(0,n.onMounted)((function(){var e,n;V(),P(),(n=null===(e=v.value)||void 0===e?void 0:e.parentElement)&&window.ResizeObserver&&(r=new ResizeObserver((function(){V()}))).observe(n)})),(0,n.onBeforeUnmount)((function(){var e;window.clearTimeout(m.value),null===(e=r.disconnect)||void 0===e||e.call(r)})),function(){return(0,n.createVNode)("section",{class:"bk-swiper-home",ref:v,style:y.value},[(0,n.createVNode)("hgroup",{style:g.value,class:"bk-transition bk-swiper-main"},[w.value.map((function(e){var t,r;return(0,n.createVNode)("h3",{class:"bk-swiper-card",style:y.value},[null!==(r=null===(t=a.default)||void 0===t?void 0:t.call(a,e))&&void 0!==r?r:(0,n.createVNode)("span",{class:x(e),style:T(e),onClick:function(){var n;(n=e.link)&&window.open(n,"_blank")}},null)])}))]),(0,n.createVNode)("ul",{class:"bk-swiper-index"},[w.value.map((function(e,t){return(0,n.createVNode)("li",{class:N(t),onMouseover:function(){return k(t)}},null)}))]),(0,n.createVNode)("span",{class:"bk-swiper-nav bk-nav-prev",onClick:function(){return k(f.value-1)}},[(0,n.createVNode)("i",{class:"bk-swiper-nav-icon"},null)]),(0,n.createVNode)("span",{class:"bk-swiper-nav bk-nav-next",onClick:function(){return k(f.value+1)}},[(0,n.createVNode)("i",{class:"bk-swiper-nav-icon"},null)])])}}}),r=(0,e.withInstall)(t)})(),a})()));

package/lib/swiper/swiper.css

@@ -0,0 +1,91 @@
+.bk-swiper-home {
+  position: relative;
+  overflow: hidden;
+}
+.bk-swiper-home:hover .bk-swiper-nav {
+  display: block;
+}
+.bk-swiper-main {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+.bk-swiper-main.bk-transition {
+  transition: 0.5s cubic-bezier(0.42, 0, 0.58, 1);
+}
+.bk-swiper-main .bk-swiper-card {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+.bk-swiper-main .bk-swiper-img {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.bk-swiper-main .bk-swiper-link {
+  cursor: pointer;
+}
+.bk-swiper-index {
+  position: absolute;
+  right: 0;
+  bottom: 10px;
+  left: 0;
+  display: flex;
+  padding: 0;
+  margin: 0;
+  justify-content: center;
+}
+.bk-swiper-index li {
+  width: 11px;
+  height: 4px;
+  margin: 0 3px;
+  list-style-type: none;
+  background: #63656e;
+  border-radius: 2px;
+  transition: width 0.525s;
+}
+.bk-swiper-index li.bk-current-index {
+  width: 17px;
+  background: #c5c7d1;
+}
+.bk-swiper-nav {
+  position: absolute;
+  top: calc(50% - 15px);
+  display: none;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  background: rgba(31, 45, 61, 0.4);
+  border-radius: 50%;
+}
+.bk-swiper-nav .bk-swiper-nav-icon {
+  position: absolute;
+  top: 9px;
+  left: 11px;
+  width: 10px;
+  height: 10px;
+  border-bottom: 2px solid #fff;
+  border-left: 2px solid #fff;
+}
+.bk-swiper-nav.bk-nav-prev {
+  left: 14px;
+  transform: rotate(45deg);
+}
+.bk-swiper-nav.bk-nav-prev:hover {
+  transform: rotate(45deg);
+}
+.bk-swiper-nav.bk-nav-next {
+  right: 14px;
+  transform: rotate(225deg);
+}
+.bk-swiper-nav.bk-nav-next:hover {
+  transform: rotate(225deg);
+}
+.bk-swiper-nav:hover {
+  background: rgba(31, 45, 61, 0.6);
+}

package/lib/swiper/swiper.d.ts

@@ -0,0 +1,65 @@
+declare const _default: import("vue").DefineComponent<{
+    isLoop: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loopTime: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    pics: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    height: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    width: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "index-change"[], "index-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    isLoop: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loopTime: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    pics: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    height: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    width: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+}>> & {
+    "onIndex-change"?: (...args: any[]) => any;
+}, {
+    width: number;
+    height: number;
+    list: unknown[];
+    isLoop: boolean;
+    loopTime: number;
+    pics: unknown[];
+}>;
+export default _default;

package/lib/swiper/swiper.less

@@ -0,0 +1,107 @@
+.bk-swiper-home {
+  position: relative;
+  overflow: hidden;
+
+  &:hover .bk-swiper-nav {
+    display: block;
+  }
+}
+
+.bk-swiper-main {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+
+  &.bk-transition {
+    transition: .5s cubic-bezier(.42, 0, .58, 1);
+  }
+
+  .bk-swiper-card {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+  }
+
+  .bk-swiper-img {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  .bk-swiper-link {
+    cursor: pointer;
+  }
+}
+
+.bk-swiper-index {
+  position: absolute;
+  right: 0;
+  bottom: 10px;
+  left: 0;
+  display: flex;
+  padding: 0;
+  margin: 0;
+  justify-content: center;
+
+  li {
+    width: 11px;
+    height: 4px;
+    margin: 0 3px;
+    list-style-type: none;
+    background: #63656e;
+    border-radius: 2px;
+    transition: width .525s;
+
+    &.bk-current-index {
+      width: 17px;
+      background: #c5c7d1;
+    }
+  }
+}
+
+.bk-swiper-nav {
+  position: absolute;
+  top: calc(50% - 15px);
+  display: none;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  background: rgba(31,45,61,.4);
+  border-radius: 50%;
+
+  .bk-swiper-nav-icon {
+    position: absolute;
+    top: 9px;
+    left: 11px;
+    width: 10px;
+    height: 10px;
+    border-bottom: 2px solid #fff;
+    border-left: 2px solid #fff;
+  }
+
+  &.bk-nav-prev {
+    left: 14px;
+    transform: rotate(45deg);
+
+    &:hover {
+      transform: rotate(45deg);
+    }
+  }
+
+  &.bk-nav-next {
+    right: 14px;
+    transform: rotate(225deg);
+
+    &:hover {
+      transform: rotate(225deg);
+    }
+  }
+
+  &:hover {
+    background: rgba(31,45,61,.6);
+  }
+}

package/lib/swiper/swiper.variable.css

@@ -0,0 +1,91 @@
+.bk-swiper-home {
+  position: relative;
+  overflow: hidden;
+}
+.bk-swiper-home:hover .bk-swiper-nav {
+  display: block;
+}
+.bk-swiper-main {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+.bk-swiper-main.bk-transition {
+  transition: 0.5s cubic-bezier(0.42, 0, 0.58, 1);
+}
+.bk-swiper-main .bk-swiper-card {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+.bk-swiper-main .bk-swiper-img {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.bk-swiper-main .bk-swiper-link {
+  cursor: pointer;
+}
+.bk-swiper-index {
+  position: absolute;
+  right: 0;
+  bottom: 10px;
+  left: 0;
+  display: flex;
+  padding: 0;
+  margin: 0;
+  justify-content: center;
+}
+.bk-swiper-index li {
+  width: 11px;
+  height: 4px;
+  margin: 0 3px;
+  list-style-type: none;
+  background: #63656e;
+  border-radius: 2px;
+  transition: width 0.525s;
+}
+.bk-swiper-index li.bk-current-index {
+  width: 17px;
+  background: #c5c7d1;
+}
+.bk-swiper-nav {
+  position: absolute;
+  top: calc(50% - 15px);
+  display: none;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  background: rgba(31, 45, 61, 0.4);
+  border-radius: 50%;
+}
+.bk-swiper-nav .bk-swiper-nav-icon {
+  position: absolute;
+  top: 9px;
+  left: 11px;
+  width: 10px;
+  height: 10px;
+  border-bottom: 2px solid #fff;
+  border-left: 2px solid #fff;
+}
+.bk-swiper-nav.bk-nav-prev {
+  left: 14px;
+  transform: rotate(45deg);
+}
+.bk-swiper-nav.bk-nav-prev:hover {
+  transform: rotate(45deg);
+}
+.bk-swiper-nav.bk-nav-next {
+  right: 14px;
+  transform: rotate(225deg);
+}
+.bk-swiper-nav.bk-nav-next:hover {
+  transform: rotate(225deg);
+}
+.bk-swiper-nav:hover {
+  background: rgba(31, 45, 61, 0.6);
+}