bkui-vue 0.0.1-beta.10 → 0.0.1-beta.14

package/dist/style.css

@@ -1,3 +1,276 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+* {
+  box-sizing: border-box;
+}
+/**
+ * HTML5 display definitions
+ * ==========================================================================
+ *
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+audio,
+canvas,
+progress,
+video {
+  /* 1 */
+  display: inline-block;
+  /* 2 */
+  vertical-align: baseline;
+}
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
+[hidden],
+template {
+  display: none;
+}
+/**
+ * Links
+ * ==========================================================================
+ *
+ * Remove the gray background color from active links in IE 10.
+ */
+a {
+  background-color: transparent;
+}
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+a:active,
+a:hover {
+  outline: 0;
+}
+/**
+ * Text-level semantics
+ * ==========================================================================
+ *
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+/**
+ * Embedded content
+ * ==========================================================================
+ *
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+img {
+  border: 0;
+}
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+svg:not(:root) {
+  overflow: hidden;
+}
+/**
+ * Grouping content
+ * ==========================================================================
+ *
+ * Address margin not present in IE 8/9 and Safari.
+ */
+figure {
+  margin: 1em 40px;
+}
+/**
+ * Address differences between Firefox and other browsers.
+ */
+hr {
+  height: 0;
+  box-sizing: content-box;
+}
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ *
+ * Forms
+ * ==========================================================================
+ *
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ *
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  /* 3 */
+  margin: 0;
+  /* 2 */
+  font: inherit;
+  /* 1 */
+  color: inherit;
+}
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+button {
+  overflow: visible;
+}
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+button,
+select {
+  text-transform: none;
+}
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type `input` and others.
+ */
+button,
+html input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+  /* 3 */
+  cursor: pointer;
+  /* 2 */
+  appearance: button;
+}
+/* Re-set default cursor for disabled elements. */
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+/* Remove inner padding and border in Firefox 4+. */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.
+ */
+input {
+  line-height: normal;
+}
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+input[type='checkbox'],
+input[type='radio'] {
+  /* 2 */
+  padding: 0;
+  /* 1 */
+  box-sizing: border-box;
+}
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+::-ms-clear,
+::-ms-reveal {
+  display: none;
+}
+input[type='text']::-ms-clear {
+  display: none;
+}
+input[type='text']::-ms-reveal {
+  display: none;
+}
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
+input[type='search'] {
+  /* 2 */
+  box-sizing: content-box;
+  /* 1 */
+  appearance: textfield;
+}
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+  appearance: none;
+}
+/**
+ * Define consistent border, margin, and padding.
+ */
+fieldset {
+  padding: 0.35em 0.625em 0.75em;
+  margin: 0 2px;
+  border: 1px solid #c0c0c0;
+}
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+legend {
+  /* 2 */
+  padding: 0;
+  /* 1 */
+  border: 0;
+}
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+textarea {
+  overflow: auto;
+}
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+optgroup {
+  font-weight: bold;
+}
 .bk-alert {
   position: relative;
   font-size: 12px;
@@ -679,6 +952,7 @@
   text-align: left;
 }
 .bk-collapse-wrapper .bk-collapse-item .bk-collapse-header {
+  position: relative;
   height: 42px;
   padding: 0 10px;
   overflow: hidden;
@@ -688,6 +962,13 @@
   text-overflow: ellipsis;
   cursor: pointer;
 }
+.bk-collapse-wrapper .bk-collapse-item .bk-collapse-header .bk-collapse-icon {
+  position: absolute;
+  right: 10px;
+}
+.bk-collapse-wrapper .bk-collapse-item .bk-collapse-header .bk-collapse-icon svg {
+  font-size: 20px;
+}
 .bk-collapse-wrapper .bk-collapse-item .bk-collapse-content {
   display: none;
   padding: 0 10px;
@@ -1026,6 +1307,49 @@
 .bk-link.danger.is-disabled {
   color: #fd9c9c;
 }
+.bk-dropdown {
+  display: inline-block;
+}
+.bk-dropdown .bk-dropdown-content {
+  display: none;
+  box-shadow: 0 2px 6px rgba(51, 60, 72, 0.1);
+}
+.bk-dropdown .bk-dropdown-content[data-show] {
+  display: block;
+}
+.bk-dropdown-menu {
+  min-width: 100%;
+  padding: 5px 0;
+  margin: 0;
+  background: #fff;
+  border: 1px solid #dcdee5;
+  border-radius: 2px;
+  box-sizing: border-box;
+}
+.bk-dropdown-menu::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.bk-dropdown-menu::-webkit-scrollbar-thumb {
+  background: #dde4eb;
+  border-radius: 20px;
+  box-shadow: inset 0 0 6px hsla(0, 0%, 80%, 0.3);
+}
+.bk-dropdown-item {
+  display: block;
+  height: 32px;
+  padding: 0 16px;
+  font-size: 12px;
+  line-height: 33px;
+  color: #63656e;
+  white-space: nowrap;
+  list-style: none;
+  cursor: pointer;
+}
+.bk-dropdown-item:hover {
+  color: #3a84ff;
+  background-color: #eaf3ff;
+}
 @keyframes loading-scale-animate {
   0% {
     transform: scale(1);
@@ -1267,9 +1591,8 @@
 }
 .bk-popover .bk-popover-content {
   display: none;
-  padding: 4px 8px;
-  font-size: 13px;
-  font-weight: bold;
+  padding: 7px 14px;
+  font-size: 12px;
   color: #fff;
   background: #26323d;
   border-radius: 4px;
@@ -1547,6 +1870,12 @@
   border: 1px solid #63656e;
   transition: all 0.3s;
 }
+.bk-radio-group {
+  display: inline-block;
+  font-size: 0;
+  line-height: 0;
+  letter-spacing: normal;
+}
 .bk-rate {
   position: relative;
 }
@@ -1584,15 +1913,14 @@
 .bk-select {
   display: inline-block;
 }
-.bk-select .input-right-icon {
-  position: absolute;
-  top: 6px;
-  right: 4px;
+.bk-select ul {
+  padding: 0;
+  margin: 0;
+  font-weight: normal;
+  list-style: none;
 }
-.bk-select .input-left-icon {
-  position: absolute;
-  top: 6px;
-  left: 4px;
+.bk-select .bk-popover-content {
+  padding: 0;
 }
 .bk-select.is-focus .bk-select-trigger .bk-select-input {
   border-color: #3a84ff;
@@ -1666,17 +1994,50 @@
 .bk-select .bk-select-trigger .clear-icon:hover {
   color: #979ba5;
 }
+.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-empty {
+  height: 32px;
+  font-size: 12px;
+  line-height: 32px;
+  color: #63656e;
+  text-align: center;
+  user-select: none;
+}
+.bk-select .bk-select-options {
+  padding: 6px 0;
+}
 .bk-select .bk-select-option {
   height: 32px;
-  padding: 0 16px;
-  margin: 0 -8px;
-  font-weight: normal;
+  padding: 0 10px;
   line-height: 32px;
   color: #63656e;
   text-align: left;
-  list-style: none;
   cursor: pointer;
   user-select: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .bk-select .bk-select-option:hover {
   color: #3a84ff;
@@ -1698,6 +2059,14 @@
   cursor: not-allowed;
   background-color: transparent;
 }
+.bk-select .bk-option-group-label {
+  height: 32px;
+  margin: 0 10px;
+  line-height: 32px;
+  color: #979ba5;
+  text-align: left;
+  border-bottom: 1px solid #dcdee5;
+}
 .bk-modal-wrapper.bk-sideslider-wrapper {
   position: fixed;
   top: 0;
@@ -2025,6 +2394,89 @@
   cursor: pointer;
   opacity: 0;
 }
+.bk-table .bk-table-body {
+  height: 500px;
+  overflow: auto;
+  background: white;
+}
+.bk-table .bk-table-body table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.bk-table .bk-table-body table .cell {
+  height: 40px;
+  padding: 0 15px;
+  overflow: hidden;
+  line-height: 40px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-table .bk-table-body table th,
+.bk-table .bk-table-body table td {
+  min-width: 80px;
+  border-bottom: 1px solid #dfe0e5;
+}
+.bk-table .bk-table-body table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: #fff;
+}
+.bk-table .bk-table-body table thead th.active {
+  background: #f0f1f5;
+}
+.bk-table .bk-table-body table tbody tr:hover td {
+  background: #f5f7fa;
+}
+.bk-table .bk-table-fixed {
+  width: 100%;
+}
+.bk-table colgroup col {
+  background: #fff;
+}
+.bk-table colgroup col.active {
+  position: relative;
+  background: #f0f1f5;
+}
+.bk-form {
+  text-align: left;
+}
+.bk-form .bk-form-item {
+  display: flex;
+  margin-bottom: 24px;
+}
+.bk-form .bk-form-label {
+  width: 150px;
+  padding-right: 24px;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 32px;
+  color: #63656e;
+  text-align: right;
+}
+.bk-form .bk-form-content {
+  position: relative;
+  line-height: 32px;
+}
+.bk-form .bk-form-error {
+  position: absolute;
+  left: 0;
+  padding-top: 4px;
+  font-size: 12px;
+  line-height: 1;
+  color: #ea3636;
+  text-align: left;
+}
+.bk-form--vertical .bk-form-item {
+  flex-direction: column;
+}
+.bk-form--vertical .bk-form-label {
+  width: auto;
+  text-align: left;
+}
+.bk-form--vertical .bk-form-content {
+  text-align: left;
+}
 * {
   box-sizing: border-box;
 }
@@ -2293,7 +2745,7 @@
   line-height: 20px;
 }
 .bk-steps-small .bk-step .bk-step-number {
-  font-size: 1px;
+  font-size: 12px;
 }
 .bk-steps-small .bk-step .bk-icon {
   font-size: 20px;
@@ -2328,8 +2780,16 @@
 }
 .bk-message .bk-message-close {
   padding-left: 20px;
+  margin-right: 0;
+  font-size: 18px;
   cursor: pointer;
 }
+.bk-message-icon {
+  display: inline-block;
+  margin-right: 10px;
+  font-size: 18px;
+  color: #3a84ff;
+}
 .bk-message-primary {
   background: #f0f8ff;
   border: 1px solid #e1ecff;
@@ -2338,11 +2798,1393 @@
   background: #fff4e2;
   border: 1px solid #ffe8c3;
 }
+.bk-message-warning .bk-message-icon {
+  color: #ff9c01;
+}
 .bk-message-success {
   background: #f2fff4;
   border: 1px solid #dcffe2;
 }
+.bk-message-success .bk-message-icon {
+  color: #2dcb56;
+}
 .bk-message-danger {
   background: #ffeded;
   border: 1px solid #ffdddd;
 }
+.bk-message-danger .bk-message-icon {
+  color: #ea3636;
+}
+.bk-notify {
+  position: fixed;
+  display: flex;
+  width: 360px;
+  padding: 24px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #63656e;
+  background: #fff;
+  border: 1px solid #f0f1f5;
+  border-radius: 2px;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
+}
+.bk-notify .bk-notify-icon {
+  position: absolute;
+  top: 22px;
+  margin-right: 5px;
+  font-size: 18px;
+  color: #3a84ff;
+}
+.bk-notify.bk-notify-warning .bk-notify-icon {
+  color: #ff9c01;
+}
+.bk-notify.bk-notify-success .bk-notify-icon {
+  color: #2dcb56;
+}
+.bk-notify.bk-notify-danger .bk-notify-icon {
+  color: #ea3636;
+}
+.bk-notify .bk-notify-icon.bk-notify-close {
+  top: 8px;
+  right: 12px;
+  margin-right: 0;
+  font-size: 18px;
+  color: #979ba5;
+  cursor: pointer;
+}
+.bk-notify .bk-notify-content-header {
+  display: inline-block;
+  padding-left: 23px;
+  margin-top: 0;
+  margin-bottom: 4px;
+  font-size: 14px;
+  font-weight: 700;
+}
+.bk-notify .bk-notify-content-text {
+  display: inline-block;
+  padding-left: 23px;
+}
+.bk-tree .bk-tree-node {
+  position: relative;
+  height: var(--lineHeight);
+  padding-left: 0;
+  line-height: var(--lineHeight);
+  cursor: pointer;
+}
+.bk-tree .bk-tree-node.is-open::after {
+  position: absolute;
+  top: calc(var(--lineHeight) / 2);
+  left: 0;
+  z-index: 1;
+  width: 0;
+  height: calc(var(--lines) * var(--lineHeight));
+  pointer-events: none;
+  border-left: var(--level-line);
+  content: '';
+}
+.bk-tree .bk-tree-node:not(.is-root) {
+  margin-left: calc(var(--depth)*var(--indent));
+}
+.bk-tree .bk-tree-node:not(.is-root)::before {
+  position: absolute;
+  top: 50%;
+  left: calc(0px - var(--indent));
+  z-index: 1;
+  width: var(--indent);
+  height: 0;
+  pointer-events: none;
+  border-bottom: var(--level-line);
+  content: '';
+}
+.bk-tree .bk-tree-node .bk-tree-icon {
+  margin: 0 6px 0 4px;
+}
+.bk-slider {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.bk-slider .bk-slider-runway {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  vertical-align: middle;
+  cursor: pointer;
+  background: #dcdee5;
+  border-radius: 2px;
+  opacity: 1;
+}
+.bk-slider .bk-slider-runway .bk-slider-bar {
+  position: absolute;
+  height: 4px;
+  background: #3a84ff;
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.bk-slider .bk-slider-runway .bk-slider-bar.vertical {
+  width: 4px;
+}
+.bk-slider .bk-slider-runway .bk-slider-bar.horizontal {
+  height: 4px;
+}
+.bk-slider .bk-slider-runway .disable {
+  background: #979ba5;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels {
+  position: relative;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels.vertical {
+  left: 18px;
+  display: flex;
+  width: 10px;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels.horizontal {
+  top: 10px;
+  display: flex;
+  width: 100%;
+  height: 10px;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label {
+  position: absolute;
+  display: flex;
+  width: 10px;
+  height: 10px;
+  text-align: center;
+  white-space: nowrap;
+  align-items: center;
+  justify-content: center;
+}
+.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.vertical {
+  left: 10px;
+  transform: translateY(50%);
+}
+.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.horizontal {
+  top: 10px;
+  transform: translateX(-50%);
+}
+.bk-slider .bk-slider-interval {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background-color: #fff;
+  border-radius: 100%;
+  transform: translateX(-50%);
+}
+.bk-slider .bk-slider-interval.vertical {
+  left: 2px;
+}
+.bk-slider-input {
+  display: flex;
+  margin: 0 0 0 28px;
+  flex-direction: row;
+  align-items: center;
+}
+.bk-slider-input .input-item {
+  width: 92px;
+}
+.bk-slider-input .input-center {
+  margin: 0 7px;
+}
+.bk-slider-button {
+  position: absolute;
+  z-index: 1001;
+  display: flex;
+  width: 24px;
+  height: 24px;
+  line-height: normal;
+  text-align: center;
+  background-color: transparent;
+  user-select: none;
+  justify-content: center;
+  align-items: center;
+}
+.bk-slider-button:hover {
+  cursor: grab;
+}
+.bk-slider-button.grabbing {
+  cursor: grabbing;
+}
+.bk-slider-button.vertical {
+  left: -10px;
+  transform: translateY(50%);
+}
+.bk-slider-button.horizontal {
+  top: -10px;
+  transform: translateX(-50%);
+}
+.bk-slider-button .slider-button {
+  width: 12px;
+  height: 12px;
+  background-color: #fff;
+  border: 2px solid #3a84ff;
+  border-radius: 50%;
+  transition: 0.2s;
+  user-select: none;
+}
+.bk-slider-button .slider-button-disable {
+  border: 2px solid #979ba5;
+}
+.bk-slider-button .slider-button:hover {
+  box-shadow: 0px 0px 0px 4px rgba(58, 132, 255, 0.3);
+}
+.bk-slider-button .slider-button:focus {
+  box-shadow: 0px 0px 10px 0px rgba(58, 132, 255, 0.9);
+}
+.bk-slider-button .slider-button-label {
+  position: absolute;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+}
+.bk-slider-button .slider-button-label.vertical {
+  left: 28px;
+}
+.bk-slider-button .slider-button-label.horizontal {
+  top: 20px;
+}
+@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;
+}
+.collapse {
+  width: 60px;
+}
+.open {
+  background: #151d2c;
+}
+.bk-menu {
+  display: flex;
+  width: 260px;
+  background-color: #182132;
+  flex-direction: column;
+  transition: width 0.3s ease-out;
+}
+.bk-menu.is-collapse {
+  width: 60px;
+}
+.bk-menu-submenu {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+  align-items: center;
+  transition: width 0.3s ease-out;
+}
+.bk-menu-submenu.is-opened {
+  background: #151d2c;
+}
+.bk-menu-submenu:hover {
+  color: white;
+  cursor: pointer;
+}
+.bk-menu-submenu .submenu-header {
+  display: flex;
+  width: 100%;
+  height: 40px;
+  align-items: center;
+}
+.bk-menu-submenu .submenu-header.is-collapse {
+  color: white;
+  background: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+}
+.bk-menu-submenu .submenu-header-icon {
+  display: flex;
+  height: 100%;
+  font-size: 18px;
+  flex: 0 0 60px;
+  align-items: center;
+  justify-content: center;
+}
+.bk-menu-submenu .submenu-header-icon .menu-icon {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  align-items: center;
+  justify-content: center;
+  color: #b0bdd5;
+}
+.bk-menu-submenu .submenu-header-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  flex: 1;
+  color: #acb9d1;
+}
+.bk-menu-submenu .submenu-header-collapse {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16px;
+  color: #acb9d1;
+  transform: rotate(-90deg);
+  transition: transform 0.3s ease-out;
+}
+.bk-menu-submenu .submenu-header-collapse.is-collapse {
+  transform: rotate(0deg);
+}
+.bk-menu-submenu .submenu-list {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  flex-direction: column;
+  flex: 1;
+  /* stylelint-disable-next-line declaration-no-important */
+  transition-property: all !important;
+}
+.bk-menu-item {
+  display: flex;
+  width: 100%;
+  height: 40px;
+  min-height: 40px;
+  margin: 2px 0;
+  overflow: hidden;
+  font-size: 14px;
+  color: #96a2b9;
+  text-overflow: clip;
+  white-space: nowrap;
+  align-items: center;
+  transition: width 0.3s ease-in-out;
+}
+.bk-menu-item:hover {
+  color: white;
+  cursor: pointer;
+}
+.bk-menu-item.is-active {
+  color: white;
+  background: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+}
+.bk-menu-item .item-icon {
+  display: flex;
+  height: 100%;
+  font-size: 18px;
+  flex: 0 0 60px;
+  align-items: center;
+  justify-content: center;
+}
+.bk-menu-item .item-icon .default-icon {
+  display: inline-block;
+  width: 3px;
+  height: 3px;
+  background: #63656e;
+  background-color: white;
+  border-radius: 50%;
+}
+.bk-menu-item .item-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  flex: 1;
+}
+.bk-menu-group {
+  display: flex;
+  flex-direction: column;
+}
+.bk-menu-group .group-name {
+  display: flex;
+  height: 40px;
+  margin: 0 18px;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 16px;
+  color: #63656e;
+  text-overflow: clip;
+  white-space: nowrap;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.bk-menu-group .group-wrap {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+}
+.bk-menu .collapse-transition {
+  transition: all 0.3s ease-in-out;
+}
+.bk-navigation {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+.bk-navigation-title {
+  display: flex;
+  height: 100%;
+  padding: 0 16px;
+  overflow: hidden;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  align-items: center;
+  justify-content: flex-start;
+  flex: 0 0 260px;
+}
+.bk-navigation-title .title-icon {
+  display: flex;
+  font-size: 28px;
+  color: #768197;
+  flex: 0 0 28px;
+  align-items: center;
+  justify-content: center;
+}
+.bk-navigation-title .title-desc {
+  display: inline-block;
+  margin-left: 16px;
+  overflow: hidden;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 24px;
+  color: #96a2b9;
+  white-space: nowrap;
+}
+.bk-navigation-header {
+  flex: 0 0 52px;
+  display: flex;
+  align-items: center;
+  padding-right: 24px;
+  overflow: hidden;
+  background: #182132;
+}
+.bk-navigation-header .header-right {
+  display: flex;
+  height: 100%;
+  flex: 1;
+  align-items: center;
+}
+.bk-navigation-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+}
+.bk-navigation-wrapper .navigation-nav {
+  position: relative;
+  z-index: 101;
+  display: flex;
+  width: 60px;
+  min-width: 0;
+  min-height: 0;
+  overflow: visible;
+  transition: width cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+  flex: 0 1 auto;
+  flex-direction: column;
+}
+.bk-navigation-wrapper .navigation-nav:hover {
+  cursor: pointer;
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider {
+  display: flex;
+  width: 60px;
+  height: 100%;
+  background-color: #182132;
+  transition: width cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+  flex: 1;
+  flex-direction: column;
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider-list {
+  max-height: calc(100vh - 100px);
+  padding: 12px 0 4px 0;
+  margin: 0;
+  overflow: auto;
+  flex: 1 1 auto;
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar {
+  display: none;
+  width: 6px;
+  height: 5px;
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider-list::-webkit-scrollbar:hover {
+  transform: none;
+  transition: opacity 340ms ease-out;
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider-footer {
+  display: flex;
+  padding-left: 14px;
+  flex: 0 0 56px;
+  align-items: center;
+  justify-content: flex-start;
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon {
+  display: flex;
+  width: 32px;
+  height: 32px;
+  font-size: 14px;
+  color: #63656e;
+  border-radius: 100%;
+  align-items: center;
+  justify-content: center;
+  transform-origin: center center;
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon-svg {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+  align-items: center;
+  justify-content: center;
+  transform-origin: center center;
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left {
+  color: #96a2b9;
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon.is-left:hover {
+  color: #d3d9e4;
+  cursor: pointer;
+  background: linear-gradient(270deg, #253047 0%, #263247 100%);
+}
+.bk-navigation-wrapper .navigation-nav .nav-slider-footer .footer-icon:hover {
+  color: #3a3c42;
+  cursor: pointer;
+  background: linear-gradient(270deg, #dee0ea 0%, #eaecf2 100%);
+}
+.bk-navigation-wrapper .navigation-container {
+  position: relative;
+  display: flex;
+  max-width: calc(100vw - 60px);
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 1px;
+  flex-direction: column;
+}
+.bk-navigation-wrapper .navigation-container .container-header {
+  z-index: 100;
+  display: flex;
+  width: 100%;
+  height: 60px;
+  padding: 0 24px;
+  background: #fff;
+  border-bottom: 1px solid #dcdee5;
+  box-shadow: 0px 3px 4px 0px rgba(64, 112, 203, 0.06);
+  flex-basis: 60px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+}
+.bk-navigation-wrapper .navigation-container .container-header-title {
+  height: 21px;
+  font-size: 16px;
+  line-height: 21px;
+  color: #313238;
+}
+.bk-navigation-wrapper .navigation-container .container-header-sets {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: flex-end;
+}
+.bk-navigation-wrapper .navigation-container .container-content {
+  max-height: calc(100vh - 60px);
+  padding: 20px 24px 0;
+  overflow: auto;
+  background: #f5f7fa;
+  flex: 1;
+}
+.bk-navigation-wrapper .navigation-container .container-footer {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.bk-date-picker {
+  display: inline-block;
+  width: 261px;
+  line-height: normal;
+}
+.bk-date-picker.long {
+  width: 342px;
+}
+.bk-date-picker.medium-width {
+  width: 362px;
+}
+.bk-date-picker.large-width {
+  width: 402px;
+}
+.bk-date-picker-rel {
+  position: relative;
+}
+.bk-date-picker-rel .bk-date-picker-editor {
+  display: block;
+  width: 100%;
+  height: 32px;
+  padding: 0 10px 0 30px;
+  font-size: 12px;
+  line-height: 32px;
+  color: #63656e;
+  cursor: pointer;
+  border: 1px solid #c4c6cc;
+  border-radius: 2px;
+  outline: none;
+}
+.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border {
+  border-color: transparent transparent #c4c6cc transparent;
+}
+.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border:focus {
+  border-color: transparent transparent #3a84ff transparent;
+  box-shadow: none;
+}
+.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border[disabled],
+.bk-date-picker-rel .bk-date-picker-editor.only-bottom-border.readonly {
+  border-color: transparent transparent #dcdee5 transparent;
+}
+.bk-date-picker-rel .bk-date-picker-editor:focus {
+  border: 1px solid #3a84ff;
+}
+.bk-date-picker-rel .bk-date-picker-editor::placeholder {
+  color: #c4c6cc;
+}
+.bk-date-picker-rel .bk-date-picker-editor[disabled] {
+  color: #c4c6cc;
+  cursor: not-allowed;
+  background-color: #fafbfd;
+  border-color: #c4c6cc;
+}
+.bk-date-picker-rel .bk-date-picker-editor.readonly {
+  background-color: #fafbfd;
+  border-color: #c4c6cc;
+}
+.bk-date-picker-rel .bk-date-picker-editor.medium-font {
+  font-size: 14px;
+}
+.bk-date-picker-rel .bk-date-picker-editor.large-font {
+  font-size: 16px;
+}
+.bk-date-picker-rel .clear-action {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  font-size: 14px;
+  color: #c4c6cc;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+.bk-date-picker-rel .clear-action:hover {
+  color: #979ba5;
+}
+.bk-date-picker-rel .icon-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  color: #c4c6cc;
+  cursor: pointer;
+  background-color: transparent;
+}
+.bk-date-picker-rel .icon-wrapper.disabled {
+  cursor: not-allowed;
+}
+.bk-date-picker-rel .icon-wrapper i.icon-clock {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.bk-date-picker-rel .icon-wrapper .picker-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 18px;
+  height: 18px;
+  transform: translate(-50%, -50%);
+}
+.bk-date-picker-dropdown {
+  position: absolute;
+  z-index: 900;
+  padding: 5px 0 0 0;
+  overflow: auto;
+  background-color: #fff;
+  border: 1px solid #dcdee5;
+  border-radius: 2px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+.bk-date-picker .bk-select-dropdown {
+  max-height: none;
+  padding: 0;
+  overflow: visible;
+}
+.bk-date-picker-footer-wrapper {
+  clear: both;
+  font-size: 14px;
+  color: #979ba5;
+  background-color: #fafbfd;
+  border-top: 1px solid #dcdee5;
+}
+.bk-date-picker-top-wrapper {
+  margin-top: -5px;
+  clear: both;
+  font-size: 14px;
+  color: #979ba5;
+}
+.bk-picker-panel-body-wrapper.bk-picker-panel-with-sidebar {
+  padding-right: 140px;
+}
+.bk-picker-panel-sidebar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 140px;
+  padding: 12px 0;
+  overflow: auto;
+  font-size: 14px;
+  color: #3a84ff;
+  background-color: #fafbfd;
+  border-left: 1px solid #dcdee5;
+}
+.bk-picker-panel-sidebar .bk-picker-panel-shortcut {
+  /* &:nth-of-type(1) {
+          padding-top: 18px;
+      }
+      &:last-child {
+          padding-bottom: 18px;
+      } */
+  padding: 6px 21px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.bk-picker-panel-sidebar .bk-picker-panel-shortcut:hover {
+  background-color: #e1ecff;
+}
+.bk-picker-panel-body {
+  float: left;
+}
+.bk-picker-confirm {
+  height: 42px;
+  padding: 0 20px;
+  clear: both;
+  font-size: 14px;
+  line-height: 41px;
+  text-align: right;
+  background-color: #fafbfd;
+  border-top: 1px solid #dcdee5;
+}
+.bk-picker-confirm a {
+  color: #979ba5;
+}
+.bk-picker-confirm a.confirm {
+  margin-left: 10px;
+  color: #3a84ff;
+}
+.bk-picker-confirm a[disabled] {
+  color: #c4c6cc;
+  cursor: not-allowed;
+}
+.bk-picker-confirm .bk-picker-confirm-time {
+  float: left;
+}
+.bk-date-picker-header {
+  height: 46px;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 46px;
+  color: #63656e;
+  text-align: center;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-date-picker-header .bk-date-picker-header-label {
+  cursor: pointer;
+}
+.bk-date-picker-header .bk-date-picker-header-label:hover {
+  color: #3a84ff;
+}
+.bk-date-picker-header .up-to-now {
+  margin-left: 3px;
+  font-weight: 400;
+  cursor: pointer;
+}
+.bk-date-picker-header .up-to-now.disabled {
+  color: #c4c6cc;
+  cursor: not-allowed;
+}
+.bk-date-picker-cells {
+  margin: 9px;
+  font-size: 12px;
+  color: #63656e;
+  white-space: normal;
+}
+.bk-date-picker-cells span {
+  display: inline-block;
+  width: 34px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+}
+.bk-date-picker-cells span em {
+  display: inline-block;
+  width: 34px;
+  height: 32px;
+  font-style: normal;
+  line-height: 32px;
+  cursor: pointer;
+}
+.bk-date-picker-cells .bk-date-picker-cells-header {
+  text-align: center;
+}
+.bk-date-picker-cells .bk-date-picker-cells-header span {
+  width: 28px;
+  height: 26px;
+  margin: 3px;
+  line-height: 26px;
+  color: #63656e;
+  text-align: center;
+  cursor: default;
+}
+.bk-date-picker-cells-cell:hover em {
+  /* background-color: #e1ecff; */
+  background-color: #f0f1f5;
+}
+.bk-date-picker-cells-focused em {
+  color: #3a84ff;
+  box-shadow: 0 0 0 1px #a3c5fd inset;
+}
+.bk-date-picker-cells-cell-prev-month em,
+.bk-date-picker-cells-cell-next-month em {
+  color: #c4c6cc;
+}
+.bk-date-picker-cells-cell-prev-month:hover em,
+.bk-date-picker-cells-cell-next-month:hover em {
+  background: transparent;
+}
+span.bk-date-picker-cells-cell-week-label,
+span.bk-date-picker-cells-cell-week-label:hover,
+span.bk-date-picker-cells-cell-disabled,
+span.bk-date-picker-cells-cell-disabled:hover {
+  color: #c4c6cc;
+  cursor: not-allowed;
+}
+span.bk-date-picker-cells-cell-week-label em,
+span.bk-date-picker-cells-cell-week-label:hover em,
+span.bk-date-picker-cells-cell-disabled em,
+span.bk-date-picker-cells-cell-disabled:hover em {
+  color: inherit;
+  cursor: not-allowed;
+  background: inherit;
+}
+span.bk-date-picker-cells-cell-disabled,
+span.bk-date-picker-cells-cell-disabled:hover {
+  background-color: #f0f1f5;
+}
+.bk-date-picker-cells-cell-today em {
+  position: relative;
+  color: #3a84ff;
+  box-shadow: 0 0 0 1px #a3c5fd inset;
+}
+.bk-date-picker-cells-cell-range {
+  position: relative;
+}
+.bk-date-picker-cells-cell-range:before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  background: #e1ecff;
+  border: 0;
+  border-radius: 0;
+  content: '';
+}
+.bk-date-picker-cells-cell-range em {
+  position: relative;
+  z-index: 1;
+}
+.bk-date-picker-cells-cell-selected em,
+.bk-date-picker-cells-cell-selected:hover em {
+  color: #fff;
+  background-color: #3a84ff;
+  box-shadow: 0 0 0 1px #3a84ff inset;
+}
+span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em {
+  color: #f7f7f7;
+  background: #c4c6cc;
+}
+.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em:after {
+  background: #fff;
+}
+.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em,
+.bk-date-picker-cells-cell-today.bk-date-picker-cells-cell-selected em:hover {
+  box-shadow: 0 0 0 1px #3a84ff inset;
+}
+.bk-date-picker-cells-year,
+.bk-date-picker-cells-month {
+  margin-top: 7px;
+}
+.bk-date-picker-cells-year span,
+.bk-date-picker-cells-month span {
+  width: 36px;
+  height: 32px;
+  margin: 10px 12px;
+  line-height: 32px;
+  text-align: center;
+  border-radius: 3px;
+}
+.bk-date-picker-cells-year span em,
+.bk-date-picker-cells-month span em {
+  width: 36px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+}
+.bk-picker-panel-icon-btn {
+  display: inline-block;
+  width: 20px;
+  height: 46px;
+  line-height: 44px;
+  color: #979ba5;
+  text-align: center;
+  cursor: pointer;
+  transition: color 0.2s ease-in-out;
+}
+.bk-picker-panel-icon-btn:hover {
+  color: #2d8cf0;
+}
+.bk-picker-panel-icon-btn i {
+  font-size: 20px;
+}
+.bk-date-picker-prev-btn {
+  float: left;
+}
+.bk-date-picker-prev-btn-arrow-double {
+  margin-left: 10px;
+}
+.bk-date-picker-prev-btn-arrow-double i:after {
+  margin-left: -8px;
+}
+.bk-date-picker-next-btn {
+  float: right;
+}
+.bk-date-picker-next-btn-arrow-double {
+  margin-right: 10px;
+}
+.bk-date-picker-next-btn-arrow-double i:after {
+  margin-left: -8px;
+}
+.bk-date-picker-with-range .bk-picker-panel-body {
+  min-width: 532px;
+}
+.bk-date-picker-with-range .bk-picker-panel-content {
+  float: left;
+}
+.bk-date-picker-with-range .bk-picker-cells-show-week-numbers {
+  min-width: 492px;
+}
+.bk-date-picker-transfer {
+  z-index: 1060;
+  max-height: none;
+}
+.bk-fade-down-transition-enter-from,
+.bk-fade-down-transition-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+.bk-fade-down-transition-enter-to,
+.bk-fade-down-transition-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+.bk-fade-down-transition-enter-active {
+  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+}
+.bk-fade-down-transition-leave-active {
+  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+}
+.bk-divider {
+  position: relative;
+  background: #c4c6cc;
+}
+.bk-divider-horizontal {
+  width: 100%;
+  height: 1px;
+  margin: 1em 0;
+}
+.bk-divider-info {
+  position: absolute;
+  top: 50%;
+  padding: 0 1.4em;
+  color: #63656e;
+  background-color: white;
+  transform: translateY(-50%);
+}
+.bk-divider-info-center {
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+.bk-divider-info .bk-divider-horizontal-left {
+  left: 2em;
+}
+.bk-divider-info .bk-divider-horizontal-right {
+  right: 2em;
+}
+.bk-divider-vertical .bk-divider-info {
+  padding: 20px 0;
+}
+.bk-divider-vertical {
+  display: inline-block;
+  width: 1px;
+  height: 100%;
+  min-height: 1em;
+  margin: 0 8px;
+  vertical-align: middle;
+}
+.bk-tab {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+.bk-tab--top {
+  flex-direction: column;
+}
+.bk-tab--right {
+  flex-direction: row-reverse;
+}
+.bk-tab-header {
+  display: flex;
+  color: #63656e;
+}
+.bk-tab-header > div {
+  display: flex;
+  margin-bottom: -1px;
+  flex-wrap: nowrap;
+}
+.bk-tab--card .bk-tab-header > div,
+.bk-tab--border-card .bk-tab-header > div {
+  border-right: 1px solid #dcdee5;
+}
+.bk-tab--top .bk-tab-header-nav {
+  overflow-x: auto;
+  overflow-y: visible;
+}
+.bk-tab--left .bk-tab-header-nav,
+.bk-tab--right .bk-tab-header-nav {
+  overflow-x: visible;
+  overflow-y: auto;
+}
+.bk-tab--card .bk-tab-header-nav,
+.bk-tab--border-card .bk-tab-header-nav {
+  border-left: 1px solid #dcdee5;
+}
+.bk-tab-header-nav::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+.bk-tab-header-operation .bk-tab-header-item {
+  padding: 0 12px;
+}
+.bk-tab--left .bk-tab-header {
+  border-right: 1px solid #dcdee5;
+}
+.bk-tab--right .bk-tab-header {
+  border-left: 1px solid #dcdee5;
+}
+.bk-tab--left .bk-tab-header,
+.bk-tab--right .bk-tab-header {
+  flex-direction: column;
+}
+.bk-tab--left .bk-tab-header > div,
+.bk-tab--right .bk-tab-header > div {
+  flex-direction: column;
+}
+.bk-tab--card .bk-tab-header {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-tab--border-card .bk-tab-header {
+  background: #FAFBFD;
+  border: solid #dcdee5;
+  border-width: 1px 1px 1px 0;
+}
+.bk-tab--unborder-card .bk-tab-header {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-tab-header-item {
+  display: flex;
+  white-space: nowrap;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+}
+.bk-tab-header-item:hover {
+  color: #3a84ff;
+}
+.bk-tab-header-item:hover .bk-tab-header-item-close {
+  display: block;
+  margin-left: 10px;
+  color: #ea3636;
+}
+.bk-tab--top .bk-tab-header-item {
+  padding: 0 20px;
+}
+.bk-tab--left .bk-tab-header-item,
+.bk-tab--right .bk-tab-header-item {
+  padding: 0 12px;
+}
+.bk-tab--left .bk-tab-header-item {
+  text-align: right;
+}
+.bk-tab--card .bk-tab-header-item {
+  border-top: 1px solid #dcdee5;
+}
+.bk-tab--card .bk-tab-header-item,
+.bk-tab--border-card .bk-tab-header-item {
+  border-right: 1px solid #dcdee5;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-tab--card .bk-tab-header-item:last-of-type,
+.bk-tab--border-card .bk-tab-header-item:last-of-type {
+  border-right: none;
+}
+.bk-tab-header-operation .bk-tab-header-item {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+.bk-tab-header-item-close {
+  display: none;
+  color: #c4c6cc;
+}
+.bk-tab-header--active {
+  color: #3a84ff;
+}
+.bk-tab--card .bk-tab-header--active,
+.bk-tab--border-card .bk-tab-header--active {
+  border-bottom-color: white;
+}
+.bk-tab--unborder-card .bk-tab-header--active {
+  border-bottom: 2px solid #3a84ff;
+}
+.bk-tab--left .bk-tab-header--active {
+  border-right: 2px solid #3a84ff;
+}
+.bk-tab--right .bk-tab-header--active {
+  border-left: 2px solid #3a84ff;
+}
+.bk-tab-header--disabled {
+  color: #aaa;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.bk-tab-content {
+  flex: 1;
+  padding: 10px;
+}
+.bk-tab--border-card .bk-tab-content {
+  border: solid #dcdee5;
+  border-width: 0 1px 1px;
+}
+.bk-tab-panel {
+  height: 100%;
+}
+* {
+  box-sizing: border-box;
+}
+.bk-process {
+  position: relative;
+  display: flex;
+}
+@keyframes loadingCircle {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.bk-process .bk-process-toggle {
+  position: relative;
+  left: 15px;
+  width: 24px;
+  height: 24px;
+  font-size: 12px;
+  line-height: 24px;
+  color: #63656e;
+  text-align: center;
+  text-decoration: none;
+  border: 1px solid #c4c6cc;
+  border-radius: 50%;
+}
+.bk-process .bk-process-toggle.active,
+.bk-process .bk-process-toggle:hover {
+  color: #fff;
+  background: #3a84ff;
+  border-color: #3a84ff;
+}
+.bk-process .bk-process-icon-done {
+  display: inline-block;
+  height: 20px;
+  font-size: 21px;
+  line-height: 20px;
+}
+.bk-process .bk-icon.icon-loading {
+  display: inline-block;
+  font-size: 14px;
+  animation: loadingCircle 1s infinite linear;
+}
+.bk-process > ul {
+  -ms-display: flex;
+  -moz-display: flex;
+  -webkit-display: flex;
+  display: table;
+  display: flex;
+  width: 100%;
+  padding: 0;
+  margin: auto;
+}
+.bk-process li {
+  position: relative;
+  display: table-cell;
+  height: 24px;
+  font-family: PingFang SC,Microsoft Yahei,Helvetica,Aria;
+  font-size: 12px;
+  line-height: 24px;
+  color: #63656e;
+  text-align: center;
+  background-color: #f0f1f5;
+  flex: 1;
+}
+.bk-process li i {
+  display: none;
+}
+.bk-process li:first-of-type {
+  border-radius: 13px 0 0 13px;
+}
+.bk-process li:last-of-type {
+  border-radius: 0 13px 13px 0;
+}
+.bk-process li:last-of-type::before {
+  display: none;
+}
+.bk-process li:last-of-type::after {
+  display: none;
+}
+.bk-process li::before {
+  position: absolute;
+  top: 0;
+  right: -25px;
+  z-index: 1;
+  width: 0;
+  height: 0;
+  border: 12px solid;
+  border-color: transparent transparent transparent #fff;
+  content: '';
+}
+.bk-process li::after {
+  position: absolute;
+  top: 0;
+  right: -23px;
+  z-index: 1;
+  width: 0;
+  height: 0;
+  border: 12px solid;
+  border-color: transparent transparent transparent #f0f1f5;
+  content: '';
+}
+.bk-process li .bk-process-step {
+  font-size: 12px;
+}
+.bk-process li .bk-process-step dd {
+  margin: 0;
+  line-height: 32px;
+}
+.bk-process li .bk-process-step i {
+  display: none;
+}
+.bk-process li .bk-process-step .success i {
+  display: inline-block;
+  color: #2dcb56;
+}
+.bk-process li .bk-process-step .steps-loading {
+  top: -2px;
+}
+.bk-process li.success {
+  color: #fff;
+  background: #2dcb56;
+}
+.bk-process li.success::after {
+  border-color: transparent transparent transparent #2dcb56;
+}
+.bk-process li.success .icon-done {
+  font-size: 22px;
+  line-height: 18px;
+}
+.bk-process li.current {
+  color: #fff;
+  background: #3a84ff;
+}
+.bk-process li.current::after {
+  border-color: transparent transparent transparent #3a84ff;
+}
+.bk-process li.current > .bk-spin-loading {
+  vertical-align: -3px;
+}
+.bk-popper {
+  display: none;
+  padding: 7px 14px;
+  font-size: 12px;
+  color: #fff;
+  background: #333;
+  border-radius: 4px;
+}
+.bk-popper.light {
+  color: #63656e;
+  background: #fff;
+  box-shadow: #dcdee5 0px 0px 6px 0px;
+}
+.bk-popper .bk-popper-arrow,
+.bk-popper .bk-popper-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+.bk-popper .bk-popper-arrow {
+  visibility: hidden;
+}
+.bk-popper .bk-popper-arrow::before {
+  content: '';
+  visibility: visible;
+  transform: rotate(45deg);
+}
+.bk-popper[data-show] {
+  display: block;
+}
+.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
+  bottom: -4px;
+}
+.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
+  top: -4px;
+}
+.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
+  right: -4px;
+}
+.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
+  left: -4px;
+}