bkui-vue 1.0.3-beta.25 → 1.0.3-beta.26

package/lib/time-picker/time-picker.variable.css

@@ -12,13 +12,13 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
-  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
   --line-height-base: 16px;
   --line-height-medium: 16px;
   --line-height-large: 18px;
+  --border-color: #dcdee5;
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
@@ -111,7 +111,7 @@
   --table-border-color: #dcdee5;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
-  --table-body-font-color: #63656E;
+  --table-body-font-color: #63656e;
   --table-row-hover-bg-color: #f5f7fa;
   --table-row-active-bg-color: #f0f1f5;
   --cascader-panel-border-color: #dcdee5;
@@ -127,7 +127,7 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-.bk-time-picker-header {
+:where(.bk-time-picker-header) {
   height: 46px;
   font-size: 14px;
   font-weight: 700;
@@ -136,7 +136,7 @@
   text-align: center;
   border-bottom: 1px solid #dcdee5;
 }
-.bk-time-picker-cells:after {
+:where(.bk-time-picker-cells):after {
   position: absolute;
   right: 0;
   left: 0;
@@ -152,8 +152,8 @@
   box-sizing: border-box;
   mix-blend-mode: multiply;
 }
-.bk-time-picker-cells-with-seconds .bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title:nth-of-type(1):before,
-.bk-time-picker-cells-with-seconds .bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title:nth-of-type(2):before {
+:where(.bk-time-picker-cells-with-seconds) .bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title:nth-of-type(1):before,
+:where(.bk-time-picker-cells-with-seconds) .bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title:nth-of-type(2):before {
   position: absolute;
   top: 55px;
   left: 85px;
@@ -164,8 +164,8 @@
   border-radius: 50%;
   content: '';
 }
-.bk-time-picker-cells-with-seconds .bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title:nth-of-type(1):after,
-.bk-time-picker-cells-with-seconds .bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title:nth-of-type(2):after {
+:where(.bk-time-picker-cells-with-seconds) .bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title:nth-of-type(1):after,
+:where(.bk-time-picker-cells-with-seconds) .bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title:nth-of-type(2):after {
   position: absolute;
   top: calc(55px + 5px);
   left: 85px;
@@ -176,12 +176,12 @@
   border-radius: 50%;
   content: '';
 }
-.bk-time-picker-cells-title-wrapper {
+:where(.bk-time-picker-cells-title-wrapper) {
   width: 100%;
   height: 42px;
   line-height: 42px;
 }
-.bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title {
+:where(.bk-time-picker-cells-title-wrapper) .bk-time-picker-cells-title {
   position: relative;
   float: left;
   width: 33.33%;
@@ -191,10 +191,10 @@
   text-align: center;
   list-style: none;
 }
-.bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title.active {
+:where(.bk-time-picker-cells-title-wrapper) .bk-time-picker-cells-title.active {
   color: #3a84ff;
 }
-.bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title:nth-of-type(1):before {
+:where(.bk-time-picker-cells-title-wrapper) .bk-time-picker-cells-title:nth-of-type(1):before {
   position: absolute;
   top: 55px;
   left: 133px;
@@ -205,7 +205,7 @@
   border-radius: 50%;
   content: '';
 }
-.bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title:nth-of-type(1):after {
+:where(.bk-time-picker-cells-title-wrapper) .bk-time-picker-cells-title:nth-of-type(1):after {
   position: absolute;
   top: calc(55px + 5px);
   left: 133px;
@@ -216,39 +216,39 @@
   border-radius: 50%;
   content: '';
 }
-.bk-time-picker-cells-list {
+:where(.bk-time-picker-cells-list) {
   position: relative;
   float: left;
   width: 33.33%;
   max-height: 200px;
   overflow: hidden;
 }
-.bk-time-picker-cells-list:hover {
+:where(.bk-time-picker-cells-list:hover) {
   overflow-y: auto;
 }
-.bk-time-picker-cells-list:first-child {
+:where(.bk-time-picker-cells-list:first-child) {
   border-radius: 2px 0 0 2px;
 }
-.bk-time-picker-cells-list:last-child {
+:where(.bk-time-picker-cells-list:last-child) {
   border-radius: 0 2px 2px 0;
 }
-.bk-time-picker-cells-list::-webkit-scrollbar {
+:where(.bk-time-picker-cells-list::-webkit-scrollbar) {
   width: 0;
   height: 0;
   background-color: rgba(204, 204, 204, 0);
 }
-.bk-time-picker-cells-list::-webkit-scrollbar-thumb {
+:where(.bk-time-picker-cells-list::-webkit-scrollbar-thumb) {
   width: 0;
   height: 0;
   background-color: transparent;
 }
-.bk-time-picker-cells-list .bk-time-picker-cells-ul {
+:where(.bk-time-picker-cells-list) .bk-time-picker-cells-ul {
   width: 100%;
   padding: 0 0 168px 0;
   margin: 0;
   list-style: none;
 }
-.bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell {
+:where(.bk-time-picker-cells-list) .bk-time-picker-cells-ul .bk-time-picker-cells-cell {
   position: relative;
   width: 100%;
   height: 32px;
@@ -264,23 +264,23 @@
   transition: background 0.2s ease-in-out;
   user-select: none;
 }
-.bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell:hover {
+:where(.bk-time-picker-cells-list) .bk-time-picker-cells-ul .bk-time-picker-cells-cell:hover {
   color: #3a84ff;
 }
-.bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell-disabled {
+:where(.bk-time-picker-cells-list) .bk-time-picker-cells-ul .bk-time-picker-cells-cell-disabled {
   color: #c4c6cc;
   cursor: not-allowed;
 }
-.bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell-disabled:hover {
+:where(.bk-time-picker-cells-list) .bk-time-picker-cells-ul .bk-time-picker-cells-cell-disabled:hover {
   color: #c4c6cc;
   cursor: not-allowed;
   background-color: #fff;
 }
-.bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell-selected,
-.bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell-selected:hover {
+:where(.bk-time-picker-cells-list) .bk-time-picker-cells-ul .bk-time-picker-cells-cell-selected,
+:where(.bk-time-picker-cells-list) .bk-time-picker-cells-ul .bk-time-picker-cells-cell-selected:hover {
   color: #3a84ff;
 }
-.bk-time-picker-header {
+:where(.bk-time-picker-header) {
   height: 46px;
   font-size: 14px;
   font-weight: 700;
@@ -289,11 +289,11 @@
   text-align: center;
   border-bottom: 1px solid #dcdee5;
 }
-.bk-time-picker-with-range .bk-picker-panel-content {
+:where(.bk-time-picker-with-range) .bk-picker-panel-content {
   position: relative;
   float: left;
 }
-.bk-time-picker-with-range .bk-picker-panel-content:after {
+:where(.bk-time-picker-with-range) .bk-picker-panel-content:after {
   position: absolute;
   top: 45px;
   right: 0;
@@ -304,42 +304,42 @@
   background: #e8eaec;
   content: '';
 }
-.bk-time-picker-with-range .bk-picker-panel-content-right {
+:where(.bk-time-picker-with-range) .bk-picker-panel-content-right {
   float: right;
 }
-.bk-time-picker-with-range .bk-picker-panel-content-right:after {
+:where(.bk-time-picker-with-range) .bk-picker-panel-content-right:after {
   right: auto;
   left: 0;
 }
-.bk-time-picker-with-range .bk-time-picker-cells-list:first-child {
+:where(.bk-time-picker-with-range) .bk-time-picker-cells-list:first-child {
   border-radius: 0;
 }
-.bk-time-picker-with-range .bk-time-picker-cells-list:last-child {
+:where(.bk-time-picker-with-range) .bk-time-picker-cells-list:last-child {
   border-radius: 0;
 }
-.bk-picker-panel-content .bk-picker-panel-content .bk-time-picker-cells {
-  min-width: 216px;
+:where(.bk-picker-panel-content) .bk-picker-panel-content .bk-time-picker-cells {
   position: relative;
+  min-width: 216px;
 }
-.bk-picker-panel-content .bk-picker-panel-content .bk-time-picker-cells-with-seconds {
+:where(.bk-picker-panel-content) .bk-picker-panel-content .bk-time-picker-cells-with-seconds {
   min-width: 216px;
 }
-.bk-picker-panel-content .bk-picker-panel-content .bk-time-picker-cells-with-seconds .bk-time-picker-cells-list {
+:where(.bk-picker-panel-content) .bk-picker-panel-content .bk-time-picker-cells-with-seconds .bk-time-picker-cells-list {
   width: 72px;
 }
-.bk-picker-panel-content .bk-picker-panel-content .bk-time-picker-cells-with-seconds .bk-time-picker-cells-list ul li {
+:where(.bk-picker-panel-content) .bk-picker-panel-content .bk-time-picker-cells-with-seconds .bk-time-picker-cells-list ul li {
   padding: 0;
 }
-.bk-picker-panel-content .bk-picker-panel-content .bk-time-picker-cells-list {
+:where(.bk-picker-panel-content) .bk-picker-panel-content .bk-time-picker-cells-list {
   width: 108px;
   max-height: 200px;
 }
-.bk-picker-panel-content .bk-picker-panel-content .bk-time-picker-cells-list:first-child {
+:where(.bk-picker-panel-content) .bk-picker-panel-content .bk-time-picker-cells-list:first-child {
   border-radius: 0;
 }
-.bk-picker-panel-content .bk-picker-panel-content .bk-time-picker-cells-list:last-child {
+:where(.bk-picker-panel-content) .bk-picker-panel-content .bk-time-picker-cells-list:last-child {
   border-radius: 0;
 }
-.bk-picker-panel-content .bk-picker-panel-content .bk-time-picker-cells-list ul {
+:where(.bk-picker-panel-content) .bk-picker-panel-content .bk-time-picker-cells-list ul {
   padding: 0 0 168px 0;
 }

package/lib/timeline/timeline.css

@@ -1,7 +1,7 @@
 * {
   box-sizing: border-box;
 }
-.bk-timeline {
+:where(.bk-timeline) {
   padding: 0;
   margin: 16px 0 0;
   font-style: normal;
@@ -10,7 +10,7 @@
   text-align: left;
   list-style: none;
 }
-.bk-timeline .bk-timeline-dot {
+:where(.bk-timeline) .bk-timeline-dot {
   position: relative;
   padding-bottom: 24px;
   padding-left: 16px;
@@ -19,7 +19,7 @@
   font-size: 0;
   border-left: 1px solid #d8d8d8;
 }
-.bk-timeline .bk-timeline-dot::before {
+:where(.bk-timeline) .bk-timeline-dot::before {
   position: absolute;
   top: calc(12px * -1);
   left: -6px;
@@ -32,12 +32,12 @@
   content: '';
   box-sizing: border-box;
 }
-.bk-timeline .bk-timeline-dot:last-child {
+:where(.bk-timeline) .bk-timeline-dot:last-child {
   padding-bottom: 0;
   /* 保留border使用间距保持一致 */
   border-left: 1px solid transparent;
 }
-.bk-timeline .bk-timeline-dot .bk-timeline-title {
+:where(.bk-timeline) .bk-timeline-dot .bk-timeline-title {
   display: inline-block;
   padding-bottom: 10px;
   margin-top: -3px;
@@ -45,13 +45,13 @@
   color: #63656e;
   cursor: pointer;
 }
-.bk-timeline .bk-timeline-dot .bk-timeline-content {
+:where(.bk-timeline) .bk-timeline-dot .bk-timeline-content {
   max-width: 300px;
   font-size: 14px;
   color: #979ba5;
   word-break: break-all;
 }
-.bk-timeline .bk-timeline-dot .bk-timeline-icon {
+:where(.bk-timeline) .bk-timeline-dot .bk-timeline-icon {
   position: absolute;
   top: calc(16px * -1);
   left: -8px;
@@ -63,165 +63,165 @@
   justify-content: center;
   align-items: center;
 }
-.bk-timeline .bk-timeline-dot .bk-timeline-icon .bk-timeline-icon-inner {
+:where(.bk-timeline) .bk-timeline-dot .bk-timeline-icon .bk-timeline-icon-inner {
   display: inline-block;
 }
-.bk-timeline .bk-timeline-dot .bk-timeline-icon .bk-timeline-icon-inner > :first-child {
+:where(.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 {
+:where(.bk-timeline) .bk-timeline-dot .bk-timeline-section {
   position: relative;
   top: calc((11px + 2px) * -1);
 }
-.bk-timeline .bk-timeline-dot.bk-timeline-large {
+:where(.bk-timeline) .bk-timeline-dot.bk-timeline-large {
   margin-top: calc(15px + 2px);
 }
-.bk-timeline .bk-timeline-dot.bk-timeline-large::before {
+:where(.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 {
+:where(.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 {
+:where(.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 {
+:where(.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 {
+:where(.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 {
+:where(.bk-timeline) .bk-timeline-dot:first-child {
   margin-top: 0;
 }
-.bk-timeline .bk-timeline-custom::before {
+:where(.bk-timeline) .bk-timeline-custom::before {
   /* stylelint-disable-next-line declaration-no-important */
   border: none !important;
 }
-.bk-timeline .bk-timeline-custom .bk-timeline-icon {
+:where(.bk-timeline) .bk-timeline-custom .bk-timeline-icon {
   /* stylelint-disable-next-line declaration-no-important */
   border: none !important;
 }
-.bk-timeline .bk-timeline-primary {
+:where(.bk-timeline) .bk-timeline-primary {
   border-left: 1px solid #3a84ff;
 }
-.bk-timeline .bk-timeline-primary::before,
-.bk-timeline .bk-timeline-primary .bk-timeline-icon {
+:where(.bk-timeline) .bk-timeline-primary::before,
+:where(.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 {
+:where(.bk-timeline) .bk-timeline-primary.bk-timeline-filled::before,
+:where(.bk-timeline) .bk-timeline-primary.bk-timeline-filled .bk-timeline-icon {
   background: #3a84ff;
 }
-.bk-timeline .bk-timeline-warning {
+:where(.bk-timeline) .bk-timeline-warning {
   border-left: 1px solid #ff9c01;
 }
-.bk-timeline .bk-timeline-warning::before,
-.bk-timeline .bk-timeline-warning .bk-timeline-icon {
+:where(.bk-timeline) .bk-timeline-warning::before,
+:where(.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 {
+:where(.bk-timeline) .bk-timeline-warning.bk-timeline-filled::before,
+:where(.bk-timeline) .bk-timeline-warning.bk-timeline-filled .bk-timeline-icon {
   background: #ff9c01;
 }
-.bk-timeline .bk-timeline-success {
+:where(.bk-timeline) .bk-timeline-success {
   border-left: 1px solid #2dcb56;
 }
-.bk-timeline .bk-timeline-success::before,
-.bk-timeline .bk-timeline-success .bk-timeline-icon {
+:where(.bk-timeline) .bk-timeline-success::before,
+:where(.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 {
+:where(.bk-timeline) .bk-timeline-success.bk-timeline-filled::before,
+:where(.bk-timeline) .bk-timeline-success.bk-timeline-filled .bk-timeline-icon {
   background: #2dcb56;
 }
-.bk-timeline .bk-timeline-danger {
+:where(.bk-timeline) .bk-timeline-danger {
   border-left: 1px solid #ea3636;
 }
-.bk-timeline .bk-timeline-danger::before,
-.bk-timeline .bk-timeline-danger .bk-timeline-icon {
+:where(.bk-timeline) .bk-timeline-danger::before,
+:where(.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 {
+:where(.bk-timeline) .bk-timeline-danger.bk-timeline-filled::before,
+:where(.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 {
+:where(.bk-timeline) .bk-timeline-blue::before,
+:where(.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 {
+:where(.bk-timeline) .bk-timeline-blue.bk-timeline-filled::before,
+:where(.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 {
+:where(.bk-timeline) .bk-timeline-red::before,
+:where(.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 {
+:where(.bk-timeline) .bk-timeline-red.bk-timeline-filled::before,
+:where(.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 {
+:where(.bk-timeline) .bk-timeline-green::before,
+:where(.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 {
+:where(.bk-timeline) .bk-timeline-green.bk-timeline-filled::before,
+:where(.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 {
+:where(.bk-timeline) .bk-timeline-yellow::before,
+:where(.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 {
+:where(.bk-timeline) .bk-timeline-yellow.bk-timeline-filled::before,
+:where(.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 {
+:where(.bk-timeline) .bk-timeline-gray::before,
+:where(.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 {
+:where(.bk-timeline) .bk-timeline-gray.bk-timeline-filled::before,
+:where(.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 {
+:where(.bk-timeline) .bk-timeline-dashed .bk-step .bk-step-title::after,
+:where(.bk-timeline) .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 {
+:where(.bk-timeline) .bk-timeline-solid .bk-step .bk-step-title::after,
+:where(.bk-timeline) .bk-timeline-solid .bk-step .bk-step-indicator::after {
   background-color: #c4c6cc;
 }
-.bk-timeline-vertical {
+:where(.bk-timeline) .bk-timeline-vertical {
   height: 100%;
   flex-direction: column;
 }
-.bk-timeline-vertical .bk-step {
+:where(.bk-timeline) .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 {
+:where(.bk-timeline) .bk-timeline-vertical .bk-step .bk-step-title::after,
+:where(.bk-timeline) .bk-timeline-vertical .bk-step .bk-step-indicator::after {
   display: none;
 }
-.bk-timeline-vertical .bk-step::after {
+:where(.bk-timeline) .bk-timeline-vertical .bk-step::after {
   position: absolute;
   top: 32px;
   left: 12px;
@@ -233,7 +233,7 @@
   background-size: 1px 6px;
   content: '';
 }
-.bk-timeline-vertical .bk-step .bk-step-title {
+:where(.bk-timeline) .bk-timeline-vertical .bk-step .bk-step-title {
   display: flex;
   height: 100%;
   margin-top: 0;

package/lib/timeline/timeline.less

@@ -14,7 +14,7 @@
   box-sizing: border-box;
 }
 
-.@{bk-prefix}-timeline {
+:where(.@{bk-prefix}-timeline) {
   padding: 0;
   margin: 16px 0 0;
   font-style: normal;
@@ -61,7 +61,6 @@
       font-size: 14px;
       color: #63656e;
       cursor: pointer;
-
     }
 
     .@{bk-prefix}-timeline-content {
@@ -88,7 +87,7 @@
         display: inline-block;
         // transform: scale(1) translate(-.5px, -4px);
 
-        >:first-child {
+        > :first-child {
           font-size: 12px;
         }
       }
@@ -129,7 +128,6 @@
     &:first-child {
       margin-top: 0;
     }
-
   }
 
   .@{bk-prefix}-timeline-custom {
@@ -142,10 +140,8 @@
       /* stylelint-disable-next-line declaration-no-important */
       border: none !important;
     }
-
   }
 
-
   each(@themeSelectors, {
   @color: '@{value}-color';
 
@@ -166,8 +162,7 @@
     }
   }
 })
-
-  each(@colorSelectors, {
+    each(@colorSelectors, {
   @color: '@{value}-color';
 
   .@{bk-prefix}-timeline{
@@ -186,8 +181,7 @@
     }
   }
 })
-
-  &-dashed {
+    .@{bk-prefix}-timeline-dashed {
     .@{bk-prefix}-step {
       .@{bk-prefix}-step-title,
       .@{bk-prefix}-step-indicator {
@@ -201,7 +195,7 @@
     }
   }
 
-  &-solid {
+  .@{bk-prefix}-timeline-solid {
     .@{bk-prefix}-step {
       .@{bk-prefix}-step-title,
       .@{bk-prefix}-step-indicator {
@@ -212,7 +206,7 @@
     }
   }
 
-  &-vertical {
+  .@{bk-prefix}-timeline-vertical {
     height: 100%;
     flex-direction: column;