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

package/lib/code-diff/code-diff.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;
@@ -128,207 +128,207 @@
   --select-hover-color: #f5f7fa;
 }
 /* stylelint-disable declaration-no-important */
-:where(.bk-code-diff) {
+.bk-code-diff {
   position: relative;
 }
-:where(.bk-code-diff) .d2h-files-diff .d2h-file-side-diff:last-child .d2h-diff-table {
+.bk-code-diff .d2h-files-diff .d2h-file-side-diff:last-child .d2h-diff-table {
   border-left: 1px solid #dcdee5;
 }
-:where(.bk-code-diff) td {
+.bk-code-diff td {
   padding: 0;
 }
-:where(.bk-code-diff) tr {
+.bk-code-diff tr {
   line-height: 18px;
 }
-:where(.bk-code-diff) tr .d2h-code-line-ctn {
+.bk-code-diff tr .d2h-code-line-ctn {
   vertical-align: top;
 }
-:where(.bk-code-diff) .d2h-code-side-linenumber {
+.bk-code-diff .d2h-code-side-linenumber {
   line-height: 18px;
   background-color: #fafbfd;
   border: 0;
 }
-:where(.bk-code-diff) .d2h-file-header {
+.bk-code-diff .d2h-file-header {
   display: none;
 }
-:where(.bk-code-diff) .hljs {
+.bk-code-diff .hljs {
   color: #000;
   background: #fff;
 }
-:where(.bk-code-diff) .hljs-comment,
-:where(.bk-code-diff) .hljs-quote {
+.bk-code-diff .hljs-comment,
+.bk-code-diff .hljs-quote {
   color: #800;
 }
-:where(.bk-code-diff) .hljs-keyword,
-:where(.bk-code-diff) .hljs-name,
-:where(.bk-code-diff) .hljs-section,
-:where(.bk-code-diff) .hljs-selector-tag,
-:where(.bk-code-diff) .hljs-title {
+.bk-code-diff .hljs-keyword,
+.bk-code-diff .hljs-name,
+.bk-code-diff .hljs-section,
+.bk-code-diff .hljs-selector-tag,
+.bk-code-diff .hljs-title {
   color: #008;
 }
-:where(.bk-code-diff) .hljs-template-variable,
-:where(.bk-code-diff) .hljs-variable {
+.bk-code-diff .hljs-template-variable,
+.bk-code-diff .hljs-variable {
   color: #660;
 }
-:where(.bk-code-diff) .hljs-regexp,
-:where(.bk-code-diff) .hljs-selector-attr,
-:where(.bk-code-diff) .hljs-selector-pseudo,
-:where(.bk-code-diff) .hljs-string {
+.bk-code-diff .hljs-regexp,
+.bk-code-diff .hljs-selector-attr,
+.bk-code-diff .hljs-selector-pseudo,
+.bk-code-diff .hljs-string {
   color: #080;
 }
-:where(.bk-code-diff) .hljs-bullet,
-:where(.bk-code-diff) .hljs-link,
-:where(.bk-code-diff) .hljs-literal,
-:where(.bk-code-diff) .hljs-meta,
-:where(.bk-code-diff) .hljs-number,
-:where(.bk-code-diff) .hljs-symbol {
+.bk-code-diff .hljs-bullet,
+.bk-code-diff .hljs-link,
+.bk-code-diff .hljs-literal,
+.bk-code-diff .hljs-meta,
+.bk-code-diff .hljs-number,
+.bk-code-diff .hljs-symbol {
   color: #066;
 }
-:where(.bk-code-diff) .hljs-attr,
-:where(.bk-code-diff) .hljs-built_in,
-:where(.bk-code-diff) .hljs-doctag,
-:where(.bk-code-diff) .hljs-params,
-:where(.bk-code-diff) .hljs-title,
-:where(.bk-code-diff) .hljs-type {
+.bk-code-diff .hljs-attr,
+.bk-code-diff .hljs-built_in,
+.bk-code-diff .hljs-doctag,
+.bk-code-diff .hljs-params,
+.bk-code-diff .hljs-title,
+.bk-code-diff .hljs-type {
   color: #606;
 }
-:where(.bk-code-diff) .hljs-attribute,
-:where(.bk-code-diff) .hljs-subst {
+.bk-code-diff .hljs-attribute,
+.bk-code-diff .hljs-subst {
   color: #000;
 }
-:where(.bk-code-diff) .hljs-formula {
+.bk-code-diff .hljs-formula {
   font-style: italic;
   background-color: #eee;
 }
-:where(.bk-code-diff) .hljs-selector-class,
-:where(.bk-code-diff) .hljs-selector-id {
+.bk-code-diff .hljs-selector-class,
+.bk-code-diff .hljs-selector-id {
   color: #9b703f;
 }
-:where(.bk-code-diff) .hljs-addition {
+.bk-code-diff .hljs-addition {
   background-color: #e9faed;
 }
-:where(.bk-code-diff) .hljs-deletion {
+.bk-code-diff .hljs-deletion {
   background-color: #fbe9eb;
 }
-:where(.bk-code-diff) .hljs-doctag,
-:where(.bk-code-diff) .hljs-strong {
+.bk-code-diff .hljs-doctag,
+.bk-code-diff .hljs-strong {
   font-weight: 700;
 }
-:where(.bk-code-diff) .hljs-emphasis {
+.bk-code-diff .hljs-emphasis {
   font-style: italic;
 }
-:where(.bk-code-diff) .d2h-del .hljs {
+.bk-code-diff .d2h-del .hljs {
   background: transparent;
 }
-:where(.bk-code-diff) .d2h-ins .hljs {
+.bk-code-diff .d2h-ins .hljs {
   background: transparent;
 }
-:where(.bk-code-diff).dark {
+.bk-code-diff.dark {
   color: #abb2bf !important;
   background: #1d1d1d;
 }
-:where(.bk-code-diff).dark .hljs {
+.bk-code-diff.dark .hljs {
   color: #abb2bf !important;
   background: #1d1d1d;
 }
-:where(.bk-code-diff).dark .d2h-files-diff:last-child .d2h-diff-table {
+.bk-code-diff.dark .d2h-files-diff:last-child .d2h-diff-table {
   border-left: 1px solid #313238;
 }
-:where(.bk-code-diff).dark .d2h-file-side-diff:nth-child(n + 2) .d2h-code-wrapper {
+.bk-code-diff.dark .d2h-file-side-diff:nth-child(n + 2) .d2h-code-wrapper {
   border-left-color: #313238;
 }
-:where(.bk-code-diff).dark pre code.hljs {
+.bk-code-diff.dark pre code.hljs {
   display: block;
   padding: 1em;
   overflow-x: auto;
 }
-:where(.bk-code-diff).dark code.hljs {
+.bk-code-diff.dark code.hljs {
   padding: 3px 5px;
 }
-:where(.bk-code-diff).dark .hljs-comment,
-:where(.bk-code-diff).dark .hljs-quote {
+.bk-code-diff.dark .hljs-comment,
+.bk-code-diff.dark .hljs-quote {
   font-style: italic;
   color: #5c6370;
 }
-:where(.bk-code-diff).dark .hljs-doctag,
-:where(.bk-code-diff).dark .hljs-formula,
-:where(.bk-code-diff).dark .hljs-keyword,
-:where(.bk-code-diff).dark .hljs-params {
+.bk-code-diff.dark .hljs-doctag,
+.bk-code-diff.dark .hljs-formula,
+.bk-code-diff.dark .hljs-keyword,
+.bk-code-diff.dark .hljs-params {
   color: #c678dd;
 }
-:where(.bk-code-diff).dark .hljs-deletion,
-:where(.bk-code-diff).dark .hljs-name,
-:where(.bk-code-diff).dark .hljs-section,
-:where(.bk-code-diff).dark .hljs-selector-tag,
-:where(.bk-code-diff).dark .hljs-subst {
+.bk-code-diff.dark .hljs-deletion,
+.bk-code-diff.dark .hljs-name,
+.bk-code-diff.dark .hljs-section,
+.bk-code-diff.dark .hljs-selector-tag,
+.bk-code-diff.dark .hljs-subst {
   color: #e06c75;
 }
-:where(.bk-code-diff).dark .hljs-literal {
+.bk-code-diff.dark .hljs-literal {
   color: #56b6c2;
 }
-:where(.bk-code-diff).dark .hljs-addition,
-:where(.bk-code-diff).dark .hljs-attribute,
-:where(.bk-code-diff).dark .hljs-meta .hljs-string,
-:where(.bk-code-diff).dark .hljs-regexp,
-:where(.bk-code-diff).dark .hljs-string {
+.bk-code-diff.dark .hljs-addition,
+.bk-code-diff.dark .hljs-attribute,
+.bk-code-diff.dark .hljs-meta .hljs-string,
+.bk-code-diff.dark .hljs-regexp,
+.bk-code-diff.dark .hljs-string {
   color: #98c379;
 }
-:where(.bk-code-diff).dark .hljs-attr,
-:where(.bk-code-diff).dark .hljs-number,
-:where(.bk-code-diff).dark .hljs-selector-attr,
-:where(.bk-code-diff).dark .hljs-selector-class,
-:where(.bk-code-diff).dark .hljs-selector-pseudo,
-:where(.bk-code-diff).dark .hljs-template-variable,
-:where(.bk-code-diff).dark .hljs-type,
-:where(.bk-code-diff).dark .hljs-variable {
+.bk-code-diff.dark .hljs-attr,
+.bk-code-diff.dark .hljs-number,
+.bk-code-diff.dark .hljs-selector-attr,
+.bk-code-diff.dark .hljs-selector-class,
+.bk-code-diff.dark .hljs-selector-pseudo,
+.bk-code-diff.dark .hljs-template-variable,
+.bk-code-diff.dark .hljs-type,
+.bk-code-diff.dark .hljs-variable {
   color: #d19a66;
 }
-:where(.bk-code-diff).dark .hljs-bullet,
-:where(.bk-code-diff).dark .hljs-link,
-:where(.bk-code-diff).dark .hljs-meta,
-:where(.bk-code-diff).dark .hljs-selector-id,
-:where(.bk-code-diff).dark .hljs-symbol,
-:where(.bk-code-diff).dark .hljs-title {
+.bk-code-diff.dark .hljs-bullet,
+.bk-code-diff.dark .hljs-link,
+.bk-code-diff.dark .hljs-meta,
+.bk-code-diff.dark .hljs-selector-id,
+.bk-code-diff.dark .hljs-symbol,
+.bk-code-diff.dark .hljs-title {
   color: #61aeee;
 }
-:where(.bk-code-diff).dark .hljs-built_in,
-:where(.bk-code-diff).dark .hljs-class .hljs-title,
-:where(.bk-code-diff).dark .hljs-title.class_ {
+.bk-code-diff.dark .hljs-built_in,
+.bk-code-diff.dark .hljs-class .hljs-title,
+.bk-code-diff.dark .hljs-title.class_ {
   color: #e6c07b;
 }
-:where(.bk-code-diff).dark .hljs-emphasis {
+.bk-code-diff.dark .hljs-emphasis {
   font-style: italic;
 }
-:where(.bk-code-diff).dark .hljs-strong {
+.bk-code-diff.dark .hljs-strong {
   font-weight: 700;
 }
-:where(.bk-code-diff).dark .hljs-link {
+.bk-code-diff.dark .hljs-link {
   text-decoration: underline;
 }
-:where(.bk-code-diff).dark .d2h-code-linenumber,
-:where(.bk-code-diff).dark .d2h-code-side-linenumber {
+.bk-code-diff.dark .d2h-code-linenumber,
+.bk-code-diff.dark .d2h-code-side-linenumber {
   font-size: 12px;
   color: #8f8f89;
   background: #212121;
   border: 0;
 }
-:where(.bk-code-diff).dark .d2h-info {
+.bk-code-diff.dark .d2h-info {
   color: inherit;
   background-color: transparent;
 }
-:where(.bk-code-diff).dark .d2h-del {
+.bk-code-diff.dark .d2h-del {
   background-color: #422321 !important;
 }
-:where(.bk-code-diff).dark .d2h-del .hljs {
+.bk-code-diff.dark .d2h-del .hljs {
   background: transparent;
 }
-:where(.bk-code-diff).dark .d2h-ins {
+.bk-code-diff.dark .d2h-ins {
   background: #212121 !important;
 }
-:where(.bk-code-diff).dark .d2h-ins .hljs {
+.bk-code-diff.dark .d2h-ins .hljs {
   background: transparent;
 }
-:where(.bk-code-diff).dark .d2h-code-side-emptyplaceholder,
-:where(.bk-code-diff).dark .d2h-emptyplaceholder {
+.bk-code-diff.dark .d2h-code-side-emptyplaceholder,
+.bk-code-diff.dark .d2h-emptyplaceholder {
   background-color: #292929 !important;
 }

package/lib/code-diff/index.js

@@ -1,9 +1,7 @@
-import "../styles/reset.css";
-import "./code-diff.less";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__ from "../shared";
+import * as __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__ from "../shared";
 import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
 import * as __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__ from "vue-types";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ from "../config-provider";
+import * as __WEBPACK_EXTERNAL_MODULE__config_provider_9d0186d9__ from "../config-provider";
 /******/ var __webpack_modules__ = ({
 
 /***/ 9003:
@@ -1002,7 +1000,7 @@ __webpack_require__.d(__webpack_exports__, {
 ;// CONCATENATED MODULE: external "../shared"
 var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var y = x => () => x
-const shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.PropTypes, ["classes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.classes, ["stringEnum"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.stringEnum, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstall });
+const external_shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.PropTypes, ["classes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.classes, ["stringEnum"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.stringEnum, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.withInstall });
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -5423,9 +5421,9 @@ var external_vue_types_x = y => { var x = {}; __webpack_require__.d(x, y); retur
 var external_vue_types_y = x => () => x
 const external_vue_types_namespaceObject = external_vue_types_x({ ["number"]: () => __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__.number, ["string"]: () => __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__.string });
 ;// CONCATENATED MODULE: external "../config-provider"
-var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var config_provider_y = x => () => x
-const config_provider_namespaceObject = config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.usePrefix });
+var external_config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_config_provider_y = x => () => x
+const external_config_provider_namespaceObject = external_config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE__config_provider_9d0186d9__.usePrefix });
 // EXTERNAL MODULE: ../../node_modules/diff2html/bundles/css/diff2html.min.css
 var diff2html_min = __webpack_require__(9003);
 ;// CONCATENATED MODULE: ../../packages/code-diff/src/code-diff.tsx
@@ -5464,10 +5462,10 @@ var diff2html_min = __webpack_require__(9003);
 
 
 var diffFormats = ['side-by-side', 'line-by-line'];
-var CodeDiffFormat = (0,shared_namespaceObject.stringEnum)([].concat(diffFormats));
+var CodeDiffFormat = (0,external_shared_namespaceObject.stringEnum)([].concat(diffFormats));
 var LANGUAGES = (/* unused pure expression or super */ null && (['css', 'java', 'javascript', 'json', 'scss', 'less', 'stylus', 'shell', 'bash', 'cpp', 'go', 'xml', 'python', 'typescript', 'sql', 'ruby', 'vim', 'php', 'perl', 'powershell', 'makefile']));
 var themes = ['dark', 'light'];
-var themesEnum = (0,shared_namespaceObject.stringEnum)([].concat(themes));
+var themesEnum = (0,external_shared_namespaceObject.stringEnum)([].concat(themes));
 var codeDiffProps = {
   oldContent: (0,external_vue_types_namespaceObject.string)().def(''),
   newContent: (0,external_vue_types_namespaceObject.string)().def(''),
@@ -5476,7 +5474,7 @@ var codeDiffProps = {
   // conf: Object as PropType<Diff2Html.Diff2HtmlUIConfig>,
   theme: (0,external_vue_types_namespaceObject.string)().def('light'),
   language: (0,external_vue_types_namespaceObject.string)().def('javascript'),
-  hljs: shared_namespaceObject.PropTypes.any.isRequired
+  hljs: external_shared_namespaceObject.PropTypes.any.isRequired
 };
 // TODO: 感觉像是highlight.js的问题, 一些关键字无法显示高亮
 function changeCodeCls(htmlStr, lang) {
@@ -5489,12 +5487,12 @@ function changeCodeCls(htmlStr, lang) {
   props: codeDiffProps,
   emits: [],
   setup: function setup(props) {
-    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
     var diffBox = (0,external_vue_namespaceObject.ref)(null);
     var diffHtml = (0,external_vue_namespaceObject.ref)('');
     var diffBoxCls = (0,external_vue_namespaceObject.computed)(function () {
-      return (0,shared_namespaceObject.classes)({
+      return (0,external_shared_namespaceObject.classes)({
         dark: props.theme === themesEnum.dark
       }, "hljs ".concat(resolveClassName('code-diff')));
     });
@@ -5574,7 +5572,7 @@ function changeCodeCls(htmlStr, lang) {
  */
 
 
-var BkCodeDiff = (0,shared_namespaceObject.withInstall)(code_diff);
+var BkCodeDiff = (0,external_shared_namespaceObject.withInstall)(code_diff);
 /* harmony default export */ const src = (BkCodeDiff);
 })();
 

package/lib/collapse/collapse.css

@@ -1,17 +1,17 @@
-:where(.bk-collapse-item) {
-  position: relative;
+.bk-collapse-item {
   display: flex;
-  text-align: left;
   flex-direction: column;
+  text-align: left;
+  position: relative;
 }
-:where(.bk-collapse-item).is-disabled {
+.bk-collapse-item.is-disabled {
   cursor: not-allowed;
 }
-:where(.bk-collapse-item).is-disabled .bk-collapse-header {
+.bk-collapse-item.is-disabled .bk-collapse-header {
   color: #dcdee5;
   pointer-events: none;
 }
-:where(.bk-collapse-header) {
+.bk-collapse-header {
   position: relative;
   height: 46px;
   padding: 0 14px;
@@ -22,64 +22,64 @@
   text-overflow: ellipsis;
   cursor: pointer;
 }
-:where(.bk-collapse-header) .bk-collapse-title {
+.bk-collapse-header .bk-collapse-title {
   margin-left: 26px;
-  font-size: 14px;
   color: #313238;
+  font-size: 14px;
 }
-:where(.bk-collapse-content) {
+.bk-collapse-content {
   padding: 5px 49px;
   font-size: 12px;
   line-height: 22px;
   will-change: all;
-  color: #63656e;
+  color: #63656E;
 }
-:where(.bk-collapse-content).active {
+.bk-collapse-content.active {
   display: block;
 }
-:where(.bk-collapse-icon) {
+.bk-collapse-icon {
   position: absolute;
   top: 13px;
   transition: all linear 0.3s;
 }
-:where(.bk-collapse-icon).rotate-icon {
+.bk-collapse-icon.rotate-icon {
   transform: rotate(90deg);
 }
-:where(.bk-collapse-icon) svg {
+.bk-collapse-icon svg {
   font-size: 20px;
 }
-:where(.bk-collapse-transition) {
+.bk-collapse-transition {
   transition: all 0.3s ease-in-out;
 }
-:where(.bk-collapse-header-border) .bk-collapse-item::after {
+.bk-collapse-header-border .bk-collapse-item::after {
+  height: 1px;
+  content: '';
+  background-color: #DCDEE5;
+  display: block;
   position: absolute;
-  right: 14px;
   bottom: 0;
   left: 14px;
-  display: block;
-  height: 1px;
-  background-color: #dcdee5;
-  content: '';
+  right: 14px;
 }
-:where(.bk-collapse-header-border) .bk-collapse-item:last-child::after {
+.bk-collapse-header-border .bk-collapse-item:last-child::after {
   display: none;
 }
-:where(.bk-collapse-header-hover) .bk-collapse-header:hover {
-  background-color: #f0f1f5;
+.bk-collapse-header-hover .bk-collapse-header:hover {
+  background-color: #F0F1F5;
 }
-:where(.bk-collapse-card) .bk-collapse-item {
-  margin-bottom: 10px;
+.bk-collapse-card .bk-collapse-item {
   box-shadow: 0 0 8px 0px #ccc;
+  margin-bottom: 10px;
 }
-:where(.bk-collapse-card) .bk-collapse-item:last-child {
+.bk-collapse-card .bk-collapse-item:last-child {
   margin-bottom: 0;
 }
-:where(.bk-collapse-icon-right) .bk-collapse-icon {
+.bk-collapse-icon-right .bk-collapse-icon {
   right: 13px;
 }
-:where(.bk-collapse-icon-right) .bk-collapse-title {
+.bk-collapse-icon-right .bk-collapse-title {
   margin-left: 0;
 }
-:where(.bk-collapse-icon-left) .bk-collapse-icon {
+.bk-collapse-icon-left .bk-collapse-icon {
   left: 13px;
 }

package/lib/collapse/collapse.less

@@ -1,10 +1,10 @@
 @import '../styles/themes/themes.less';
 
-:where(.@{bk-prefix}-collapse-item) {
-  position: relative;
+.@{bk-prefix}-collapse-item {
   display: flex;
-  text-align: left;
   flex-direction: column;
+  text-align: left;
+  position: relative;
 
   &.is-disabled {
     cursor: not-allowed;
@@ -16,7 +16,7 @@
   }
 }
 
-:where(.@{bk-prefix}-collapse-header) {
+.@{bk-prefix}-collapse-header {
   position: relative;
   height: 46px;
   padding: 0 14px;
@@ -29,27 +29,27 @@
 
   .@{bk-prefix}-collapse-title {
     margin-left: 26px;
-    font-size: 14px;
     color: #313238;
+    font-size: 14px;
   }
 }
 
-:where(.@{bk-prefix}-collapse-content) {
+.@{bk-prefix}-collapse-content {
   padding: 5px 49px;
   font-size: 12px;
   line-height: 22px;
   will-change: all;
-  color: #63656e;
+  color: #63656E;
 
   &.active {
     display: block;
   }
 }
 
-:where(.@{bk-prefix}-collapse-icon) {
+.@{bk-prefix}-collapse-icon {
   position: absolute;
   top: 13px;
-  transition: all linear 0.3s;
+  transition: all linear .3s;
 
   &.rotate-icon {
     transform: rotate(90deg);
@@ -60,23 +60,22 @@
   }
 }
 
-:where(.@{bk-prefix}-collapse-transition) {
-  transition: all 0.3s ease-in-out;
+.@{bk-prefix}-collapse-transition {
+  transition: all .3s ease-in-out;
 }
 
-:where(.@{bk-prefix}-collapse-header-border) {
+.@{bk-prefix}-collapse-header-border {
   .@{bk-prefix}-collapse-item {
     &::after {
+      height: 1px;
+      content: '';
+      background-color: #DCDEE5;
+      display: block;
       position: absolute;
-      right: 14px;
       bottom: 0;
       left: 14px;
-      display: block;
-      height: 1px;
-      background-color: #dcdee5;
-      content: '';
+      right: 14px;
     }
-
     &:last-child {
       &::after {
         display: none;
@@ -85,18 +84,18 @@
   }
 }
 
-:where(.@{bk-prefix}-collapse-header-hover) {
+.@{bk-prefix}-collapse-header-hover {
   .@{bk-prefix}-collapse-header {
     &:hover {
-      background-color: #f0f1f5;
+      background-color: #F0F1F5;
     }
   }
 }
 
-:where(.@{bk-prefix}-collapse-card) {
+.@{bk-prefix}-collapse-card {
   .@{bk-prefix}-collapse-item {
-    margin-bottom: 10px;
     box-shadow: 0 0 8px 0px #ccc;
+    margin-bottom: 10px;
 
     &:last-child {
       margin-bottom: 0;
@@ -104,7 +103,7 @@
   }
 }
 
-:where(.@{bk-prefix}-collapse-icon-right) {
+.@{bk-prefix}-collapse-icon-right {
   .@{bk-prefix}-collapse-icon {
     right: 13px;
   }
@@ -113,8 +112,8 @@
   }
 }
 
-:where(.@{bk-prefix}-collapse-icon-left) {
+.@{bk-prefix}-collapse-icon-left {
   .@{bk-prefix}-collapse-icon {
     left: 13px;
   }
-}
+}