bkui-vue 0.0.1-beta.25 → 0.0.1-beta.28

package/lib/select/select.variable.css

@@ -91,8 +91,55 @@
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
 }
-.bk-select {
-  display: inline-block;
+@keyframes loading-scale-animate {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.6);
+  }
+}
+@keyframes fade {
+  100% {
+    background-color: transparent;
+  }
+}
+.bk-fade-transtion .bk-fade-enter-active,
+.bk-fade-transtion .bk-fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+.bk-fade-transtion .bk-fade-enter,
+.bk-fade-transtion .bk-fade-leave-to {
+  opacity: 0;
+}
+.bk-select .mr5 {
+  margin-right: 5px;
+}
+.bk-select .ml5 {
+  margin-left: 5px;
+}
+.bk-select .input {
+  width: 100%;
+  height: 32px;
+  padding: 0 28px 0 10px;
+  line-height: normal;
+  color: var(--default-color);
+  text-align: left;
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: var(--white-color);
+  border: 1px solid var(--light-gray);
+  border-radius: 2px;
+  outline: none;
+  box-sizing: border-box;
+  transition: all 0.1s;
+  resize: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-select .input::placeholder {
+  color: var(--light-gray);
 }
 .bk-select ul {
   padding: 0;
@@ -100,19 +147,43 @@
   font-weight: normal;
   list-style: none;
 }
+.bk-select .bk-popover-reference {
+  display: unset;
+}
 .bk-select .bk-popover-content {
   padding: 0;
 }
-.bk-select.is-focus .bk-select-trigger .bk-select-input {
+.bk-select.small .bk-select-trigger .bk-select-input {
+  height: 24px;
+}
+.bk-select.large .bk-select-trigger .bk-select-input {
+  height: 36px;
+  font-size: 14px;
+}
+.bk-select.large .bk-select-content {
+  font-size: 14px;
+}
+.bk-select.simplicity .bk-select-trigger .bk-select-input {
+  border: none;
+  border-bottom: 1px solid var(--light-gray);
+}
+.bk-select.is-focus.normal .bk-select-trigger .bk-select-input {
   border-color: var(--primary-color);
   box-shadow: 0px 0px 3px 0px #a3c5fd;
 }
+.bk-select.is-focus.simplicity .bk-select-trigger .bk-select-input {
+  border-color: var(--primary-color);
+}
 .bk-select.is-disabled .bk-select-trigger .bk-select-input {
   cursor: not-allowed;
   background: #fafbfd;
   border-color: #dcdee5;
   box-shadow: unset;
 }
+.bk-select.is-filterable .bk-select-trigger .bk-select-input,
+.bk-select.is-filterable .bk-select-trigger .bk-select-tag-input {
+  cursor: text;
+}
 .bk-select.popover-show .bk-select-trigger .angle-up {
   transform: rotate(0);
 }
@@ -124,7 +195,6 @@
   width: 100%;
   height: 32px;
   padding: 0 28px 0 10px;
-  font-size: 12px;
   line-height: normal;
   color: var(--default-color);
   text-align: left;
@@ -137,57 +207,117 @@
   box-sizing: border-box;
   transition: all 0.1s;
   resize: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .bk-select .bk-select-trigger .bk-select-input::placeholder {
   color: var(--light-gray);
 }
+.bk-select .bk-select-trigger .bk-select-tag {
+  width: 100%;
+  height: 32px;
+  padding: 0 28px 0 10px;
+  line-height: normal;
+  color: var(--default-color);
+  text-align: left;
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: var(--white-color);
+  border: 1px solid var(--light-gray);
+  border-radius: 2px;
+  outline: none;
+  box-sizing: border-box;
+  transition: all 0.1s;
+  resize: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  width: auto;
+  height: auto;
+  min-height: 32px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.bk-select .bk-select-trigger .bk-select-tag::placeholder {
+  color: var(--light-gray);
+}
+.bk-select .bk-select-trigger .bk-select-tag-input {
+  width: 100%;
+  height: 32px;
+  padding: 0 28px 0 10px;
+  line-height: normal;
+  color: var(--default-color);
+  text-align: left;
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: var(--white-color);
+  border: 1px solid var(--light-gray);
+  border-radius: 2px;
+  box-sizing: border-box;
+  transition: all 0.1s;
+  resize: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: auto;
+  height: auto;
+  padding: 0;
+  border: none;
+  outline: none;
+}
+.bk-select .bk-select-trigger .bk-select-tag-input::placeholder {
+  color: var(--light-gray);
+}
 .bk-select .bk-select-trigger .bk-select-prefix {
   position: absolute;
-  top: 6px;
+  top: 0;
+  display: inline-flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
   left: 4px;
   font-size: 14px;
 }
 .bk-select .bk-select-trigger .angle-up {
+  right: 4px;
   transform: rotate(180deg);
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
-  align-items: center;
-  justify-content: center;
   width: 20px;
   height: 20px;
   font-size: 20px;
   color: #979ba5;
   position: absolute;
-  top: 6px;
-  right: 4px;
+  top: 0;
+  display: inline-flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
 }
 .bk-select .bk-select-trigger .clear-icon {
+  right: 4px;
   transition: all 0.1s;
   display: flex;
-  align-items: center;
-  justify-content: center;
   width: 20px;
   height: 20px;
   font-size: 14px;
   color: #c4c6cc;
   position: absolute;
-  top: 6px;
-  right: 4px;
+  top: 0;
+  display: inline-flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
 }
 .bk-select .bk-select-trigger .clear-icon:hover {
   color: #979ba5;
 }
 .bk-select .bk-select-trigger .spinner {
   position: absolute;
-  top: 6px;
-  right: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  font-size: 16px;
-  color: #3A84FF;
+  top: 8px;
+  right: 6px;
 }
 .bk-select .bk-select-empty {
   display: flex;
@@ -209,28 +339,6 @@
 .bk-select .bk-select-dropdown {
   overflow: auto;
 }
-.bk-select .bk-select-dropdown .bk-select-search {
-  position: relative;
-  padding: 0 5px;
-}
-.bk-select .bk-select-dropdown .bk-select-search-icon {
-  position: absolute;
-  top: 50%;
-  left: 8px;
-  font-size: 16px;
-  color: #979ba5;
-  transform: translateY(-50%);
-}
-.bk-select .bk-select-dropdown .bk-select-search-input {
-  width: 100%;
-  height: 32px;
-  padding: 0 10px 0 26px;
-  font-size: 12px;
-  cursor: text;
-  border: none;
-  border-bottom: 1px solid #dcdee5;
-  outline: 0;
-}
 .bk-select .bk-select-extension {
   display: flex;
   height: 40px;
@@ -263,7 +371,6 @@
 .bk-select .bk-select-option.is-selected.is-multiple::after {
   position: absolute;
   right: 12px;
-  font-size: 12px;
   font-weight: 700;
   content: '\2713';
 }
@@ -285,6 +392,10 @@
 .bk-select .bk-option-group.collapsible .bk-select-option {
   padding-left: 40px;
 }
+.bk-select .bk-option-group.disabled .default-group-label {
+  color: #c4c6cc;
+  cursor: not-allowed;
+}
 .bk-select .bk-option-group .default-group-label {
   display: flex;
   user-select: none;
@@ -295,7 +406,6 @@
   width: 12px;
   height: 12px;
   margin-right: 8px;
-  font-size: 12px;
   transition: all 0.1s;
   align-items: center;
   justify-content: center;

package/lib/select/type.d.ts

@@ -0,0 +1,31 @@
+import Popover from '@bkui-vue/popover';
+import Option from './option';
+import Group from './optionGroup';
+export declare type OptionInstanceType = InstanceType<typeof Option>;
+export declare type GroupInstanceType = InstanceType<typeof Group>;
+export declare type PopoverInstanceType = InstanceType<typeof Popover>;
+export interface ISelectContext {
+    props: {
+        multiple?: boolean;
+    };
+    selectedOptions: Set<any>;
+    register(option: OptionInstanceType): any;
+    unregister(option: OptionInstanceType): any;
+    registerGroup(option: GroupInstanceType): any;
+    unregisterGroup(option: GroupInstanceType): any;
+    handleOptionSelected(option: OptionInstanceType): void;
+}
+export interface IOptionGroupContext {
+    disabled: boolean;
+    groupCollapse: boolean;
+    register(option: OptionInstanceType): any;
+    unregister(option: OptionInstanceType): any;
+}
+export interface ISelectState {
+    currentPlaceholder: string;
+    selectedOptions: Set<OptionInstanceType>;
+    currentSelectedLabel: string;
+}
+export interface IPopoverConfig {
+    popoverMinWidth: number;
+}

package/lib/styles/index.d.ts

@@ -42,3 +42,5 @@ import '../virtual-render/virtual-render.less';
 import '../transfer/transfer.less';
 import '../pagination/pagination.less';
 import '../timeline/timeline.less';
+import '../resize-layout/resize-layout.less';
+import '../tag-input/tag-input.less';

package/lib/styles/index.js

@@ -1 +1 @@
-!function(e){"function"==typeof define&&define.amd?define(["./reset.less","../alert/alert.less","../backtop/backtop.less","../badge/badge.less","../breadcrumb/breadcrumb.less","../button/button.less","../card/card.less","../checkbox/checkbox.less","../collapse/collapse.less","../dialog/dialog.less","../exception/exception.less","../fixed-navbar/fixed-navbar.less","../input/input.less","../link/link.less","../dropdown/dropdown.less","../loading/loading.less","../modal/modal.less","../popover/popover.less","../progress/progress.less","../radio/radio.less","../rate/rate.less","../rate/star.less","../swiper/swiper.less","../select/select.less","../sideslider/sideslider.less","../switcher/switcher.less","../table/table.less","../tag/tag.less","../form/form.less","../steps/steps.less","../message/message.less","../notify/notify.less","../tree/tree.less","../slider/slider.less","../menu/menu.less","../navigation/navigation.less","../date-picker/date-picker.less","../divider/divider.less","../tab/tab.less","../process/process.less","../virtual-render/virtual-render.less","../transfer/transfer.less","../pagination/pagination.less","../timeline/timeline.less"],e):e()}((function(){}));
+!function(e){"function"==typeof define&&define.amd?define(["./reset.less","../alert/alert.less","../backtop/backtop.less","../badge/badge.less","../breadcrumb/breadcrumb.less","../button/button.less","../card/card.less","../checkbox/checkbox.less","../collapse/collapse.less","../dialog/dialog.less","../exception/exception.less","../fixed-navbar/fixed-navbar.less","../input/input.less","../link/link.less","../dropdown/dropdown.less","../loading/loading.less","../modal/modal.less","../popover/popover.less","../progress/progress.less","../radio/radio.less","../rate/rate.less","../rate/star.less","../swiper/swiper.less","../select/select.less","../sideslider/sideslider.less","../switcher/switcher.less","../table/table.less","../tag/tag.less","../form/form.less","../steps/steps.less","../message/message.less","../notify/notify.less","../tree/tree.less","../slider/slider.less","../menu/menu.less","../navigation/navigation.less","../date-picker/date-picker.less","../divider/divider.less","../tab/tab.less","../process/process.less","../virtual-render/virtual-render.less","../transfer/transfer.less","../pagination/pagination.less","../timeline/timeline.less","../resize-layout/resize-layout.less","../tag-input/tag-input.less"],e):e()}((function(){}));

package/lib/swiper/index.js

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

package/lib/swiper/swiper.css

@@ -6,8 +6,8 @@
   display: block;
 }
 .bk-swiper-main {
-  height: 100%;
   display: flex;
+  height: 100%;
   overflow: hidden;
 }
 .bk-swiper-main.bk-transition {
@@ -15,53 +15,53 @@
 }
 .bk-swiper-main .bk-swiper-card {
   height: 100%;
-  margin: 0;
   padding: 0;
+  margin: 0;
 }
 .bk-swiper-main .bk-swiper-img {
   display: inline-block;
-  height: 100%;
   width: 100%;
+  height: 100%;
   margin: 0;
-  background-size: cover;
-  background-repeat: no-repeat;
   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;
-  right: 0;
   display: flex;
-  justify-content: center;
-  margin: 0;
   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;
-  list-style-type: none;
 }
 .bk-swiper-index li.bk-current-index {
   width: 17px;
   background: #c5c7d1;
 }
 .bk-swiper-nav {
-  cursor: pointer;
   position: absolute;
-  border-radius: 50%;
+  top: calc(50% - 15px);
+  display: none;
   width: 30px;
   height: 30px;
+  cursor: pointer;
   background: rgba(31, 45, 61, 0.4);
-  top: calc(50% - 15px);
-  display: none;
+  border-radius: 50%;
 }
 .bk-swiper-nav .bk-swiper-nav-icon {
   position: absolute;
@@ -69,8 +69,8 @@
   left: 11px;
   width: 10px;
   height: 10px;
-  border-left: 2px solid #fff;
   border-bottom: 2px solid #fff;
+  border-left: 2px solid #fff;
 }
 .bk-swiper-nav.bk-nav-prev {
   left: 14px;

package/lib/swiper/swiper.less

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