bkui-vue 0.0.1-beta.8 → 0.0.1-beta.82

package/lib/timeline/index.d.ts

@@ -0,0 +1,129 @@
+declare const BkSteps: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            list: unknown[];
+            extCls: string;
+            titleAble: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+                default: () => unknown[];
+            } & {
+                default: () => unknown[];
+            };
+            titleAble: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            extCls: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            };
+        }>> & {
+            onSelect?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "list" | "extCls" | "titleAble">;
+        $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: "select", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+                default: () => unknown[];
+            } & {
+                default: () => unknown[];
+            };
+            titleAble: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            extCls: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            };
+        }>> & {
+            onSelect?: (...args: any[]) => any;
+        }, {
+            defaultTimelines: import("vue").Ref<any[]>;
+            titleSelect: (item: any) => void;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "select"[], string, {
+            list: unknown[];
+            extCls: string;
+            titleAble: 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<{
+        list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+            default: () => unknown[];
+        } & {
+            default: () => unknown[];
+        };
+        titleAble: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        extCls: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        };
+    }>> & {
+        onSelect?: (...args: any[]) => any;
+    } & import("vue").ShallowUnwrapRef<{
+        defaultTimelines: import("vue").Ref<any[]>;
+        titleSelect: (item: any) => void;
+    }> & {} & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    titleAble: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+}>> & {
+    onSelect?: (...args: any[]) => any;
+}, {
+    defaultTimelines: import("vue").Ref<any[]>;
+    titleSelect: (item: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "select"[], "select", {
+    list: unknown[];
+    extCls: string;
+    titleAble: boolean;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
+export default BkSteps;

package/lib/timeline/index.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"));else if("function"==typeof define&&define.amd)define(["../shared","vue"],t);else{var o="object"==typeof exports?t(require("../shared"),require("vue")):t(e["../shared"],e.vue);for(var n in o)("object"==typeof exports?exports:e)[n]=o[n]}}(self,((e,t)=>(()=>{"use strict";var o={4212:t=>{t.exports=e},748:e=>{e.exports=t}},n={};function c(e){var t=n[e];if(void 0!==t)return t.exports;var r=n[e]={exports:{}};return o[e](r,r.exports,c),r.exports}c.d=(e,t)=>{for(var o in t)c.o(t,o)&&!c.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};return(()=>{c.r(r),c.d(r,{default:()=>l});var e=c(4212),t=c(748),o={list:e.PropTypes.array.def([]),titleAble:e.PropTypes.bool.def(!1),extCls:e.PropTypes.string};const n=(0,t.defineComponent)({name:"Timeline",props:o,emits:["select"],setup:function(e,o){var n=o.emit,c=(0,t.ref)([]);return(0,t.onMounted)((function(){var t,o,n,r,l;(t=c.value).splice.apply(t,[0,c.value.length].concat([{tag:"步骤1",content:"内容1"},{tag:"步骤2",content:"内容2"},{tag:"步骤3",content:"内容3"}])),(null===(o=e.list)||void 0===o?void 0:o.length)&&(n=e.list,l=[],n.forEach((function(e){l.push({tag:e.tag,content:e.content,type:e.type,size:e.size,color:e.color,icon:e.icon,filled:e.filled})})),(r=c.value).splice.apply(r,[0,c.value.length].concat(l)))})),{defaultTimelines:c,titleSelect:function(e){try{n("select",e)}catch(e){console.warn(e)}}}},render:function(){var o=this,n=function(e){var t=e.icon;return!!t&&"[object Object]"===Object.prototype.toString.call(t)},c=function(t){var o="bk-timeline",n=t.type?"".concat(o,"-").concat(t.type):"".concat(o,"-default"),c=t.size?"".concat(o,"-").concat(t.size):"",r=t.filled?"".concat(o,"-filled"):"",l=t.color&&["blue","red","green","yellow","gray"].includes(t.color)?"".concat(o,"-").concat(t.color):"";return(0,e.classes)({},"".concat(o," ").concat(n," ").concat(c," ").concat(l," ").concat(r))};return(0,t.createVNode)("ul",{class:["bk-timeline",this.extCls]},[this.defaultTimelines.map((function(e){var r,l,i;return(0,t.createVNode)("li",{class:["bk-timeline-dot",c(e)]},[n(e)?(0,t.createVNode)("div",{class:"bk-timeline-icon"},[(0,t.createVNode)("span",{class:"bk-timeline-icon-inner"},[e.icon])]):"",(0,t.createVNode)("div",{class:"bk-timeline-section"},[(0,t.createVNode)("div",{class:"bk-timeline-title",onClick:function(){o.titleSelect(e)}},[null!==(i=null===(l=(r=o.$slots).default)||void 0===l?void 0:l.call(r))&&void 0!==i?i:(0,t.createVNode)("span",{innerHTML:e.tag},null)]),e.content?(0,t.createVNode)("div",{class:"bk-timeline-content",innerHTML:e.content},null):""])])}))])}}),l=(0,e.withInstall)(n)})(),r})()));

package/lib/timeline/timeline.css

@@ -0,0 +1,235 @@
+* {
+  box-sizing: border-box;
+}
+.bk-timeline {
+  padding: 0;
+  margin: 16px 0 0;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-align: left;
+  list-style: none;
+}
+.bk-timeline .bk-timeline-dot {
+  position: relative;
+  padding-bottom: 24px;
+  padding-left: 16px;
+  /* spacing 1px */
+  margin-top: 13px;
+  font-size: 0;
+  border-left: 1px solid #d8d8d8;
+}
+.bk-timeline .bk-timeline-dot::before {
+  position: absolute;
+  top: calc((11px + 1px) * -1);
+  left: -6px;
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+  background: #fff;
+  border: 2px solid #d8d8d8;
+  border-radius: 50%;
+  content: '';
+  box-sizing: border-box;
+}
+.bk-timeline .bk-timeline-dot:last-child {
+  padding-bottom: 0;
+  /* 保留border使用间距保持一致 */
+  border-left: 1px solid transparent;
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-title {
+  display: inline-block;
+  padding-bottom: 10px;
+  margin-top: -3px;
+  font-size: 14px;
+  color: #63656e;
+  cursor: pointer;
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-content {
+  max-width: 300px;
+  font-size: 14px;
+  color: #666;
+  word-break: break-all;
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-icon {
+  position: absolute;
+  top: calc((15px + 1px) * -1);
+  left: -8px;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  background: #fff;
+  border: 2px solid #d8d8d8;
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-icon .bk-timeline-icon-inner {
+  display: inline-block;
+  transform: scale(1) translate(-0.5px, -4px);
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-icon .bk-timeline-icon-inner > :first-child {
+  font-size: 12px;
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-section {
+  position: relative;
+  top: calc((11px + 2px) * -1);
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-large {
+  margin-top: calc(15px + 2px);
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-large::before {
+  top: calc((15px + 1px) * -1);
+  left: -8px;
+  width: 15px;
+  height: 15px;
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-large > .bk-timeline-section {
+  top: calc((15px + 1px) * -1);
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-item-custom-icon {
+  margin-top: calc(15px + 2px);
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-item-custom-icon::before {
+  display: none;
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-item-custom-icon > .bk-timeline-section {
+  top: calc((15px + 1px) * -1);
+}
+.bk-timeline .bk-timeline-dot:first-child {
+  margin-top: 0;
+}
+.bk-timeline .bk-timeline-primary {
+  border-left: 1px solid #3a84ff;
+}
+.bk-timeline .bk-timeline-primary::before,
+.bk-timeline .bk-timeline-primary .bk-timeline-icon {
+  color: #3a84ff;
+  border: 2px solid #3a84ff;
+}
+.bk-timeline .bk-timeline-primary.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-primary.bk-timeline-filled .bk-timeline-icon {
+  background: #3a84ff;
+}
+.bk-timeline .bk-timeline-warning {
+  border-left: 1px solid #ff9c01;
+}
+.bk-timeline .bk-timeline-warning::before,
+.bk-timeline .bk-timeline-warning .bk-timeline-icon {
+  color: #ff9c01;
+  border: 2px solid #ff9c01;
+}
+.bk-timeline .bk-timeline-warning.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-warning.bk-timeline-filled .bk-timeline-icon {
+  background: #ff9c01;
+}
+.bk-timeline .bk-timeline-success {
+  border-left: 1px solid #2dcb56;
+}
+.bk-timeline .bk-timeline-success::before,
+.bk-timeline .bk-timeline-success .bk-timeline-icon {
+  color: #2dcb56;
+  border: 2px solid #2dcb56;
+}
+.bk-timeline .bk-timeline-success.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-success.bk-timeline-filled .bk-timeline-icon {
+  background: #2dcb56;
+}
+.bk-timeline .bk-timeline-danger {
+  border-left: 1px solid #ea3636;
+}
+.bk-timeline .bk-timeline-danger::before,
+.bk-timeline .bk-timeline-danger .bk-timeline-icon {
+  color: #ea3636;
+  border: 2px solid #ea3636;
+}
+.bk-timeline .bk-timeline-danger.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-danger.bk-timeline-filled .bk-timeline-icon {
+  background: #ea3636;
+}
+.bk-timeline .bk-timeline-blue::before,
+.bk-timeline .bk-timeline-blue .bk-timeline-icon {
+  color: #3a84ff;
+  border: 2px solid #3a84ff;
+}
+.bk-timeline .bk-timeline-blue.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-blue.bk-timeline-filled .bk-timeline-icon {
+  background: #3a84ff;
+}
+.bk-timeline .bk-timeline-red::before,
+.bk-timeline .bk-timeline-red .bk-timeline-icon {
+  color: #ea3636;
+  border: 2px solid #ea3636;
+}
+.bk-timeline .bk-timeline-red.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-red.bk-timeline-filled .bk-timeline-icon {
+  background: #ea3636;
+}
+.bk-timeline .bk-timeline-green::before,
+.bk-timeline .bk-timeline-green .bk-timeline-icon {
+  color: #2dcb56;
+  border: 2px solid #2dcb56;
+}
+.bk-timeline .bk-timeline-green.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-green.bk-timeline-filled .bk-timeline-icon {
+  background: #2dcb56;
+}
+.bk-timeline .bk-timeline-yellow::before,
+.bk-timeline .bk-timeline-yellow .bk-timeline-icon {
+  color: #ff9c01;
+  border: 2px solid #ff9c01;
+}
+.bk-timeline .bk-timeline-yellow.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-yellow.bk-timeline-filled .bk-timeline-icon {
+  background: #ff9c01;
+}
+.bk-timeline .bk-timeline-gray::before,
+.bk-timeline .bk-timeline-gray .bk-timeline-icon {
+  color: #63656e;
+  border: 2px solid #63656e;
+}
+.bk-timeline .bk-timeline-gray.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-gray.bk-timeline-filled .bk-timeline-icon {
+  background: #63656e;
+}
+.bk-timeline-dashed .bk-step .bk-step-title::after,
+.bk-timeline-dashed .bk-step .bk-step-indicator::after {
+  background-image: linear-gradient(to right, #c4c6cc 50%, transparent 0%);
+  background-position: bottom;
+  background-repeat: repeat-x;
+  background-size: 6px 1px;
+}
+.bk-timeline-solid .bk-step .bk-step-title::after,
+.bk-timeline-solid .bk-step .bk-step-indicator::after {
+  background-color: #c4c6cc;
+}
+.bk-timeline-vertical {
+  height: 100%;
+  flex-direction: column;
+}
+.bk-timeline-vertical .bk-step {
+  margin-right: 0;
+  margin-bottom: 8px;
+}
+.bk-timeline-vertical .bk-step .bk-step-title::after,
+.bk-timeline-vertical .bk-step .bk-step-indicator::after {
+  display: none;
+}
+.bk-timeline-vertical .bk-step::after {
+  position: absolute;
+  top: 32px;
+  left: 12px;
+  width: 1px;
+  height: 100%;
+  background-image: linear-gradient(#c4c6cc 50%, transparent 0%);
+  background-position: right;
+  background-repeat: repeat-y;
+  background-size: 1px 6px;
+  content: '';
+}
+.bk-timeline-vertical .bk-step .bk-step-title {
+  display: flex;
+  height: 100%;
+  margin-top: 0;
+  text-align: left;
+  align-items: center;
+}

package/lib/timeline/timeline.d.ts

@@ -0,0 +1,81 @@
+/**
+ * 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.
+ */
+import { ExtractPropTypes } from 'vue';
+declare const timelineProps: {
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    titleAble: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+};
+export declare type TimelinePropTypes = ExtractPropTypes<typeof timelineProps>;
+declare const _default: import("vue").DefineComponent<{
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    titleAble: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+}, {
+    defaultTimelines: import("vue").Ref<any[]>;
+    titleSelect: (item: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "select"[], "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    titleAble: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+}>> & {
+    onSelect?: (...args: any[]) => any;
+}, {
+    list: unknown[];
+    extCls: string;
+    titleAble: boolean;
+}>;
+export default _default;

package/lib/timeline/timeline.less

@@ -0,0 +1,239 @@
+@import '../styles/themes/themes.less';
+
+@themeSelectors: primary, warning, success, danger;
+
+@colorSelectors: blue, red, green, yellow, gray;
+
+@blue-color: #3a84ff;
+@green-color: #2dcb56;
+@yellow-color: #ff9c01;
+@red-color: #ea3636;
+@gray-color: #63656e;
+
+* {
+  box-sizing: border-box;
+}
+
+.bk-timeline {
+  padding: 0;
+  margin: 16px 0 0;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-align: left;
+  list-style: none;
+
+  .bk-timeline-dot {
+    position: relative;
+    padding-bottom: 24px;
+    padding-left: 16px;
+
+    /* spacing 1px */
+    margin-top: 13px;
+    font-size: 0;
+    border-left: 1px solid #d8d8d8;
+
+    &::before {
+      position: absolute;
+      top: calc((11px + 1px) * -1);
+      left: -6px;
+      display: inline-block;
+      width: 11px;
+      height: 11px;
+      background: #fff;
+      border: 2px solid #d8d8d8;
+      border-radius: 50%;
+      content: '';
+      box-sizing: border-box;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+
+      /* 保留border使用间距保持一致 */
+      border-left: 1px solid transparent;
+    }
+
+    .bk-timeline-title {
+      display: inline-block;
+      padding-bottom: 10px;
+      margin-top: -3px;
+      font-size: 14px;
+      color: #63656e;
+      cursor: pointer;
+
+    }
+
+    .bk-timeline-content {
+      max-width: 300px;
+      font-size: 14px;
+      color: #666;
+      word-break: break-all;
+    }
+
+    .bk-timeline-icon {
+      position: absolute;
+      top: calc((15px + 1px) * -1);
+      left: -8px;
+
+      display: inline-block;
+      width: 15px;
+      height: 15px;
+      background: #fff;
+      border: 2px solid #d8d8d8;
+      border-radius: 50%;
+      box-sizing: border-box;
+
+      .bk-timeline-icon-inner {
+        display: inline-block;
+        transform: scale(1) translate(-.5px, -4px);
+
+        >:first-child {
+          font-size: 12px;
+        }
+      }
+    }
+
+    .bk-timeline-section {
+      position: relative;
+      top: calc((11px + 2px) * -1);
+    }
+
+    &.bk-timeline-large {
+      margin-top: calc(15px + 2px);
+
+      &::before {
+        top: calc((15px + 1px) * -1);
+        left: -8px;
+        width: 15px;
+        height: 15px;
+      }
+
+      > .bk-timeline-section {
+        top: calc((15px + 1px) * -1);
+      }
+    }
+
+    &.bk-timeline-item-custom-icon {
+      margin-top: calc(15px + 2px);
+
+      &::before {
+        display: none;
+      }
+
+      > .bk-timeline-section {
+        top: calc((15px + 1px) * -1);
+      }
+    }
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+  }
+
+
+  each(@themeSelectors, {
+  @color: '@{value}-color';
+
+  .bk-timeline{
+    &-@{value} {
+      border-left: 1px solid @@color;
+      &::before,
+      .bk-timeline-icon {
+        color: @@color;
+        border: 2px solid @@color;
+      }
+      &.bk-timeline-filled {
+        &::before,
+        .bk-timeline-icon {
+          background: @@color;
+        }
+      }
+    }
+  } 
+})
+
+  each(@colorSelectors, {
+  @color: '@{value}-color';
+
+  .bk-timeline{
+    &-@{value} {
+      &::before,
+      .bk-timeline-icon {
+        color: @@color;
+        border: 2px solid @@color;
+      }
+      &.bk-timeline-filled {
+        &::before,
+        .bk-timeline-icon {
+          background: @@color;
+        }
+      }
+    }
+  } 
+})
+
+  &-dashed {
+    .bk-step {
+      .bk-step-title,
+      .bk-step-indicator {
+        &::after {
+          background-image: linear-gradient(to right, @light-gray 50%, transparent 0%);
+          background-position: bottom;
+          background-repeat: repeat-x;
+          background-size: 6px 1px;
+        }
+      }
+    }
+  }
+
+  &-solid {
+    .bk-step {
+      .bk-step-title,
+      .bk-step-indicator {
+        &::after {
+          background-color: @light-gray;
+        }
+      }
+    }
+  }
+
+  &-vertical {
+    height: 100%;
+    flex-direction: column;
+
+    .bk-step {
+      margin-right: 0;
+      margin-bottom: 8px;
+
+      .bk-step-title,
+      .bk-step-indicator {
+        &::after {
+          display: none;
+        }
+      }
+
+      &::after {
+        position: absolute;
+        top: 32px;
+        left: 12px;
+        width: 1px;
+        height: 100%;
+        background-image: linear-gradient(@light-gray 50%, transparent 0%);
+        background-position: right;
+        background-repeat: repeat-y;
+        background-size: 1px 6px;
+        content: '';
+      }
+
+      .bk-step-title {
+        display: flex;
+        height: 100%;
+        margin-top: 0;
+        text-align: left;
+        align-items: center;
+      }
+    }
+  }
+}