bkui-vue 0.0.1-beta.12 → 0.0.1-beta.15

package/dist/style.css

@@ -547,8 +547,17 @@ optgroup {
   margin: 0 6px;
   font-weight: normal;
 }
+.bk-breadcrumb-goback {
+  margin-right: 12px;
+  color: #0082ff;
+  cursor: pointer;
+}
+.bk-breadcrumb-goback svg {
+  font-size: 26px;
+}
 .bk-breadcrumb-item-inner.is-link,
 .bk-breadcrumb-item-inner a {
+  color: #63656e;
   text-decoration: none;
 }
 .bk-breadcrumb-item-inner.is-link:hover,
@@ -557,7 +566,7 @@ optgroup {
   cursor: pointer;
 }
 .bk-breadcrumb-item:last-child {
-  color: #63656e;
+  color: #979ba5;
 }
 .bk-breadcrumb-item:last-child .el-breadcrumb__inner,
 .bk-breadcrumb-item:last-child .el-breadcrumb__inner a,
@@ -1153,6 +1162,7 @@ optgroup {
 .bk-input--suffix-icon {
   padding-right: 10px;
   font-size: 16px;
+  line-height: 1;
   color: #c4c6cc;
   align-self: center;
 }
@@ -1589,7 +1599,16 @@ optgroup {
 .bk-popover .bk-popover-reference {
   display: inline-block;
 }
-.bk-popover .bk-popover-content {
+.bk-popover .fade-in-enter-active,
+.bk-popover .fade-in-linear-leave-active {
+  transition: opacity 200ms linear;
+}
+.bk-popover .fade-in-enter,
+.bk-popover .fade-in-leave,
+.bk-popover .fade-in-leave-active {
+  opacity: 0;
+}
+.bk-popover-content {
   display: none;
   padding: 7px 14px;
   font-size: 12px;
@@ -1598,29 +1617,29 @@ optgroup {
   border-radius: 4px;
   box-sizing: border-box;
 }
-.bk-popover .bk-popover-content[data-theme='dark'] {
+.bk-popover-content[data-theme^='dark'] {
   color: #fff;
   background: #26323d;
 }
-.bk-popover .bk-popover-content[data-theme='light'] {
+.bk-popover-content[data-theme^='light'] {
   color: #26323d;
   background-color: #fff;
   box-shadow: 0 0 6px 0 #dcdee5;
 }
-.bk-popover .bk-popover-content[data-theme='light'][data-show] {
+.bk-popover-content[data-theme^='light'][data-show] {
   box-shadow: 0 0 6px 0 #dcdee5;
 }
-.bk-popover .bk-popover-content[data-show] {
+.bk-popover-content[data-show] {
   display: block;
 }
-.bk-popover .bk-popover-content .arrow {
+.bk-popover-content .arrow {
   position: absolute;
   width: 8px;
   height: 8px;
   background: inherit;
   visibility: hidden;
 }
-.bk-popover .bk-popover-content .arrow::before {
+.bk-popover-content .arrow::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -1629,17 +1648,17 @@ optgroup {
   visibility: visible;
   transform: rotate(45deg);
 }
-.bk-popover .bk-popover-content[data-popper-placement^='top'] > .arrow {
+.bk-popover-content[data-popper-placement^='top'] > .arrow {
   bottom: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='bottom'] > .arrow {
+.bk-popover-content[data-popper-placement^='bottom'] > .arrow {
   top: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='left'] > .arrow {
-  right: 0;
+.bk-popover-content[data-popper-placement^='left'] > .arrow {
+  right: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='right'] > .arrow {
-  left: -8px;
+.bk-popover-content[data-popper-placement^='right'] > .arrow {
+  left: -4px;
 }
 @keyframes loading-scale-animate {
   0% {
@@ -1719,9 +1738,6 @@ optgroup {
   width: 7%;
   text-align: center;
 }
-.bk-progress .process-circle-trail {
-  stroke: #f5f5f5;
-}
 .bk-progress .progress-circle-text {
   position: absolute;
   top: 50%;
@@ -1963,6 +1979,7 @@ optgroup {
   position: absolute;
   top: 6px;
   left: 4px;
+  font-size: 14px;
 }
 .bk-select .bk-select-trigger .angle-up {
   transform: rotate(180deg);
@@ -1994,6 +2011,38 @@ optgroup {
 .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;
+}
+.bk-select .bk-select-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 56px;
+  color: #63656e;
+}
+.bk-select .bk-select-empty .spinner {
+  display: flex;
+  width: 14px;
+  height: 14px;
+  margin-right: 4px;
+  font-size: 14px;
+  color: #c4c6cc;
+  align-items: center;
+  justify-content: center;
+}
+.bk-select .bk-select-dropdown {
+  overflow: auto;
+}
 .bk-select .bk-select-dropdown .bk-select-search {
   position: relative;
   padding: 0 5px;
@@ -2016,20 +2065,19 @@ optgroup {
   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-extension {
+  display: flex;
+  height: 40px;
+  background-color: #fafbfd;
+  align-items: center;
 }
 .bk-select .bk-select-options {
-  padding: 6px 0;
+  padding: 8px 0;
 }
 .bk-select .bk-select-option {
+  position: relative;
   height: 32px;
-  padding: 0 10px;
+  padding: 0 20px 0 12px;
   line-height: 32px;
   color: #63656e;
   text-align: left;
@@ -2041,15 +2089,14 @@ optgroup {
 }
 .bk-select .bk-select-option:hover {
   color: #3a84ff;
-  background-color: #eaf3ff;
+  background-color: #f5f7fa;
 }
 .bk-select .bk-select-option.is-selected {
   color: #3a84ff;
-  background-color: #f4f6fa;
 }
 .bk-select .bk-select-option.is-selected.is-multiple::after {
   position: absolute;
-  right: 20px;
+  right: 12px;
   font-size: 12px;
   font-weight: 700;
   content: '\2713';
@@ -2061,11 +2108,37 @@ optgroup {
 }
 .bk-select .bk-option-group-label {
   height: 32px;
-  margin: 0 10px;
+  padding: 0 8px;
   line-height: 32px;
   color: #979ba5;
   text-align: left;
-  border-bottom: 1px solid #dcdee5;
+}
+.bk-select .bk-option-group-label.collapsible {
+  cursor: pointer;
+}
+.bk-select .bk-option-group.collapsible .bk-select-option {
+  padding-left: 40px;
+}
+.bk-select .bk-option-group .default-group-label {
+  display: flex;
+  user-select: none;
+  align-items: center;
+}
+.bk-select .bk-option-group .default-group-label-icon {
+  display: flex;
+  width: 12px;
+  height: 12px;
+  margin-right: 8px;
+  font-size: 12px;
+  transition: all 0.1s;
+  align-items: center;
+  justify-content: center;
+}
+.bk-select .bk-option-group .default-group-label-icon.collapse {
+  transform: rotate(-90deg);
+}
+.bk-select .bk-option-group .bk-select-option {
+  padding-left: 24px;
 }
 .bk-modal-wrapper.bk-sideslider-wrapper {
   position: fixed;
@@ -2160,181 +2233,181 @@ optgroup {
 .bk-switcher {
   position: relative;
   display: inline-block;
-  /* 默认尺寸 */
-  width: 36px;
   height: 20px;
+  /* 默认尺寸 */
+  min-width: 36px;
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
   line-height: 20px;
   text-align: left;
   vertical-align: middle;
+  list-style: none;
+  cursor: pointer;
   background-color: #c4c6cc;
+  border: 1px solid transparent;
   border-radius: 50px;
+  border-radius: 100px;
+  box-sizing: border-box;
   transition: all 0.4s ease;
+  transition: all 0.36s;
+  user-select: none;
   /* 显示文本时固定尺寸 */
 }
-.bk-switcher:focus {
-  box-shadow: 0px 0px 6px #c4c6cc;
-}
 .bk-switcher:after {
   position: absolute;
-  top: 2px;
-  left: 2px;
-  display: block;
-  width: 24px;
-  height: 24px;
+  top: 1px;
+  left: 1px;
+  width: 16px;
+  height: 16px;
   cursor: pointer;
   background: #fff;
-  border-radius: 100px;
-  content: '';
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  background-color: #fff;
+  border-radius: 18px;
+  content: ' ';
   transition: all 0.3s ease;
 }
-.bk-switcher:not(.show-label):after {
-  width: 16px;
-  height: 16px;
-}
-.bk-switcher:not(.show-label).is-checked:after {
-  margin-left: -18px;
-}
-.bk-switcher.is-loading {
-  cursor: defalt;
+.bk-switcher .switcher-text {
+  display: block;
+  margin-right: 6px;
+  margin-left: 28px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #fff;
+  text-align: center;
+  transition: all 0.3s ease;
 }
-.bk-switcher.is-loading input[type=checkbox] {
-  cursor: default;
+.bk-switcher .animating-node {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  pointer-events: none;
+  border-radius: inherit;
+  content: '';
+  opacity: 0.2;
+  box-shadow: 0 0 0 0 #1890ff;
+  animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
+  animation-fill-mode: forwards;
 }
 .bk-switcher .bk-switcher-loading {
   position: absolute;
-  top: 50%;
+  top: 1px;
   left: 1px;
-  z-index: 10;
-  display: flex;
-  width: 18px;
-  height: 18px;
-  transform: translateY(-50%);
+  z-index: 1;
+  width: 16px;
+  height: 16px;
+  font-size: 12px;
+  color: #c4c6cc;
+  cursor: pointer;
+  background: transparent;
+  border-radius: 16px;
+  content: ' ';
+  transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
 }
 .bk-switcher .bk-switcher-loading svg {
-  color: #3a84ff;
-}
-.bk-switcher .switcher-label {
-  display: none;
-  width: 30px;
-  height: 28px;
-  margin: 0 0 0 26px;
-  font-size: 12px;
-  font-weight: normal;
-  color: #fff;
-  text-align: center;
-  vertical-align: top;
-  transition: all ease 0.3s;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  animation: loading 1s linear infinite;
 }
-.bk-switcher .switcher-label .on-text {
-  display: none;
+.bk-switcher.is-loading {
+  cursor: defalt;
 }
-.bk-switcher .switcher-label .off-text {
-  display: inline-block;
+.bk-switcher.is-loading input[type=checkbox] {
+  cursor: default;
 }
 .bk-switcher.show-label {
-  width: 60px;
   height: 28px;
+  min-width: 60px;
   line-height: 28px;
 }
-.bk-switcher.show-label .switcher-label {
-  display: inline-block;
+.bk-switcher.show-label::after {
+  width: 24px;
+  height: 24px;
 }
 .bk-switcher.show-label .bk-switcher-loading {
-  width: 26px;
-  height: 26px;
-  align-items: center;
-  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 20px;
 }
-.bk-switcher.show-label .bk-switcher-loading svg {
-  font-size: 24px;
+.bk-switcher.show-label.is-checked .bk-switcher-loading {
+  left: 100%;
+  margin-left: -25px;
 }
 .bk-switcher.is-disabled {
-  cursor: default;
-  /* background-color: #eee !important; */
+  cursor: not-allowed;
   opacity: 0.3;
 }
-.bk-switcher.is-disabled input[type=checkbox] {
+.bk-switcher.is-disabled .bk-switcher-loading {
+  cursor: not-allowed;
+}
+.bk-switcher.is-disabled::after {
   cursor: not-allowed;
 }
 .bk-switcher.is-checked {
   background: #2dcb56;
 }
-.bk-switcher.is-checked:focus {
-  box-shadow: 0px 0px 6px #2dcb56;
+.bk-switcher.is-checked .bk-switcher-loading svg {
+  color: #2dcb56;
 }
-.bk-switcher.is-checked.primary {
+.bk-switcher.is-checked:not(.bk-switcher-outline).bk-switcher.is-checked.primary {
   background: #3a84ff;
 }
-.bk-switcher.is-checked.primary:focus {
-  box-shadow: 0px 0px 6px #3a84ff;
+.bk-switcher.is-checked:not(.bk-switcher-outline).bk-switcher.is-checked.primary .bk-switcher-loading svg {
+  color: #3a84ff;
 }
 .bk-switcher.is-checked:after {
-  top: 2px;
   left: 100%;
-  margin-left: -26px;
-}
-.bk-switcher.is-checked .switcher-label {
-  margin-left: 4px;
-}
-.bk-switcher.is-checked .switcher-label .on-text {
-  display: inline-block;
+  margin-left: -1px;
+  transform: translateX(-100%);
 }
-.bk-switcher.is-checked .switcher-label .off-text {
-  display: none;
+.bk-switcher.is-checked .switcher-text {
+  margin-right: 28px;
+  margin-left: 6px;
 }
-.bk-switcher.is-checked .bk-switcher-loading {
-  right: 1px;
-  left: auto;
+.bk-switcher:not(.show-label).is-checked .bk-switcher-loading {
+  left: 100%;
+  margin-left: -17px;
 }
 .bk-switcher.bk-switcher-outline {
   background: #fff;
   border: 1px solid #c4c6cc;
 }
 .bk-switcher.bk-switcher-outline:after {
-  width: 22px;
-  height: 22px;
+  width: 24px;
+  height: 24px;
   background-color: #c4c6cc;
   box-shadow: none;
 }
-.bk-switcher.bk-switcher-outline .switcher-label {
-  height: 26px;
-  margin-left: 24px;
+.bk-switcher.bk-switcher-outline .switcher-text {
   color: #c4c6cc;
 }
-.bk-switcher.bk-switcher-outline .bk-switcher-loading {
-  width: 22px;
-  height: 22px;
-  align-items: center;
-  justify-content: center;
-}
 .bk-switcher.bk-switcher-outline.is-checked {
   border: 1px solid #2dcb56;
 }
 .bk-switcher.bk-switcher-outline.is-checked:after {
-  margin-left: -24px;
   background-color: #2dcb56;
 }
-.bk-switcher.bk-switcher-outline.is-checked .switcher-label {
-  margin-left: 4px;
+.bk-switcher.bk-switcher-outline.is-checked .switcher-text {
   color: #2dcb56;
 }
-.bk-switcher.bk-switcher-outline.is-disabled {
-  background-color: #fff;
-  border-color: #eee;
-}
-.bk-switcher.bk-switcher-outline.is-disabled .switcher-label {
-  color: #eee;
+.bk-switcher.bk-switcher-outline .bk-switcher-loading svg {
+  color: #fff;
 }
-.bk-switcher.bk-switcher-outline.is-disabled:after {
-  background-color: #eee;
+.bk-switcher.bk-switcher-outline.bk-switcher.primary.is-checked {
+  border: 1px solid #3a84ff;
 }
-.bk-switcher.bk-switcher-outline.bk-switcher-large:after {
-  width: 18px;
-  height: 18px;
+.bk-switcher.bk-switcher-outline.bk-switcher.primary.is-checked:after {
+  background: #3a84ff;
 }
-.bk-switcher.bk-switcher-outline.bk-switcher-large.is-checked:after {
-  margin-left: -20px;
+.bk-switcher.bk-switcher-outline.bk-switcher.primary.is-checked .switcher-text {
+  color: #3a84ff;
 }
 .bk-switcher.bk-switcher-square {
   border-radius: 2px;
@@ -2342,61 +2415,76 @@ optgroup {
 .bk-switcher.bk-switcher-square:after {
   border-radius: 2px;
 }
-.bk-switcher.bk-switcher-square .switcher-label {
-  width: 35px;
-}
 .bk-switcher.bk-switcher-large {
-  width: 42px;
   height: 24px;
+  min-width: 42px;
   line-height: 22px;
-  border-radius: 12px;
 }
 .bk-switcher.bk-switcher-large:after {
   width: 20px;
   height: 20px;
 }
-.bk-switcher.bk-switcher-large.is-checked:after {
-  top: 2px;
-  left: 100%;
-  margin-left: -22px;
-}
 .bk-switcher.bk-switcher-large .bk-switcher-loading {
-  width: 22px;
-  height: 22px;
+  width: 20px;
+  height: 20px;
+  font-size: 16px;
+}
+.bk-switcher.bk-switcher-large.is-checked .bk-switcher-loading {
+  margin-left: -21px;
 }
 .bk-switcher.bk-switcher-small {
-  width: 26px;
   height: 16px;
+  min-width: 26px;
   line-height: 22px;
 }
 .bk-switcher.bk-switcher-small:after {
   width: 12px;
   height: 12px;
 }
-.bk-switcher.bk-switcher-small.is-checked:after {
-  top: 2px;
-  left: 100%;
-  margin-left: -14px;
-}
 .bk-switcher.bk-switcher-small .bk-switcher-loading {
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
+  font-weight: 700;
+  transform: scale(0.66667);
 }
-.bk-switcher input[type=checkbox],
-.bk-switcher input[type=radio] {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  cursor: pointer;
-  opacity: 0;
+.bk-switcher.bk-switcher-small.is-checked .bk-switcher-loading {
+  margin-left: -13px;
 }
-.bk-table .bk-table-body {
-  height: 500px;
+:not(.show-label).bk-switcher-nomal.bk-switcher-outline::after {
+  width: 16px;
+  height: 16px;
+}
+:not(.show-label).bk-switcher-outline.is-checked.bk-switcher-small::after {
+  width: 12px;
+  height: 12px;
+}
+:not(.show-label).bk-switcher-outline.is-checked.bk-switcher-large::after {
+  width: 20px;
+  height: 20px;
+}
+:not(.show-label).bk-switcher-outline.is-checked::after {
+  width: 16px;
+  height: 16px;
+}
+@keyframes fadeEffect {
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes waveEffect {
+  100% {
+    box-shadow: 0 0 0 #1890ff;
+  }
+}
+@keyframes loading {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+.bk-table {
   overflow: auto;
+}
+.bk-table .bk-table-body {
   background: white;
 }
 .bk-table .bk-table-body table {
@@ -2404,10 +2492,10 @@ optgroup {
   border-collapse: collapse;
 }
 .bk-table .bk-table-body table .cell {
-  height: 40px;
+  height: var(--row-height);
   padding: 0 15px;
   overflow: hidden;
-  line-height: 40px;
+  line-height: var(--row-height);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -2421,6 +2509,7 @@ optgroup {
   top: 0;
   z-index: 1;
   background-color: #fff;
+  transform: translateY(var(--translate-y));
 }
 .bk-table .bk-table-body table thead th.active {
   background: #f0f1f5;
@@ -2871,13 +2960,13 @@ optgroup {
   line-height: var(--lineHeight);
   cursor: pointer;
 }
-.bk-tree .bk-tree-node.is-open::after {
+.bk-tree .bk-tree-node.is-open:not(.is-virtual-render)::after {
   position: absolute;
-  top: calc(var(--lineHeight) / 2);
-  left: 0;
+  top: calc(var(--lineHeight) / 2 + 6px);
+  left: 6px;
   z-index: 1;
   width: 0;
-  height: calc(var(--lines) * var(--lineHeight));
+  height: calc(var(--lines) * var(--lineHeight) - 6px);
   pointer-events: none;
   border-left: var(--level-line);
   content: '';
@@ -2887,15 +2976,24 @@ optgroup {
 }
 .bk-tree .bk-tree-node:not(.is-root)::before {
   position: absolute;
-  top: 50%;
-  left: calc(0px - var(--indent));
+  top: calc(50% + 1px);
+  left: calc(0px - var(--indent) + 6px);
   z-index: 1;
-  width: var(--indent);
+  width: calc(var(--indent) - 6px);
   height: 0;
   pointer-events: none;
   border-bottom: var(--level-line);
   content: '';
 }
+.bk-tree .bk-tree-node .node-virtual-line {
+  display: inline-block;
+  position: absolute;
+  left: calc(var(--depth) * var(--indent) * -1 + 6px);
+  top: -12px;
+  bottom: 50%;
+  width: 0;
+  border-left: var(--level-line);
+}
 .bk-tree .bk-tree-node .bk-tree-icon {
   margin: 0 6px 0 4px;
 }
@@ -4006,6 +4104,185 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em {
 .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-virtual-render {
+  position: relative;
+}
+.bk-virtual-render .bk-virtual-content,
+.bk-virtual-render.bk-virtual-content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.bk-virtual-render .bk-virtual-section {
+  width: 1px;
+  background: transparent;
+}
+.bk-virtual-render.bk-scroll-x {
+  overflow-x: auto;
+  scrollbar-color: #a0a0a0 transparent;
+  scrollbar-width: thin;
+}
+.bk-virtual-render.bk-scroll-x::-webkit-scrollbar {
+  height: 8px;
+  background-color: transparent;
+}
+.bk-virtual-render.bk-scroll-x::-webkit-scrollbar-thumb {
+  background-color: #a0a0a0;
+  border-radius: 8px;
+}
+.bk-virtual-render.bk-scroll-y {
+  overflow-y: auto;
+}
+.bk-virtual-render.bk-scroll-y::-webkit-scrollbar {
+  width: 6px;
+  background-color: transparent;
+}
+.bk-virtual-render.bk-scroll-y::-webkit-scrollbar-thumb {
+  background-color: #dcdee5;
+  border-radius: 6px;
+}
 .bk-popper {
   display: none;
   padding: 7px 14px;