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

package/lib/sideslider/sideslider.css

@@ -1,4 +1,4 @@
-:where(.bk-sideslider) {
+.bk-sideslider {
   position: fixed;
   top: 0;
   right: 0;
@@ -9,7 +9,7 @@
 /* slide过渡动画 */
 .slide-enter-active,
 .slide-leave-active,
-:where(.bk-modal-body) {
+.bk-modal-body {
   transform: translateX(0);
   transition: transform 0.25s;
 }
@@ -37,24 +37,24 @@
     opacity: 1;
   }
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper {
   position: absolute;
   top: 0;
   bottom: 0;
   left: auto;
   transform: initial;
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper.scroll-able .bk-modal-content {
-  height: 100%;
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper.scroll-able .bk-modal-content {
   overflow: auto;
+  height: 100%;
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header {
   width: 100%;
   height: 52px;
   background: #fff;
   border-bottom: 1px solid #dcdee5;
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close {
   position: absolute;
   top: 0;
   width: 30px;
@@ -66,10 +66,10 @@
   cursor: pointer;
   background-color: #3a84ff;
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right {
   left: 0;
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right::before {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right::before {
   top: 50%;
   left: 50%;
   display: inline-block;
@@ -80,10 +80,10 @@
   content: '';
   transform: translate(-50%, -50%) rotate(45deg);
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left {
   right: 0;
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left::before {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left::before {
   top: 50%;
   left: 50%;
   display: inline-block;
@@ -94,7 +94,7 @@
   content: '';
   transform: translate(50%, -50%) rotate(-45deg);
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title {
   display: flex;
   height: 52px;
   padding-left: 30px;
@@ -102,11 +102,11 @@
   color: #313238;
   align-items: center;
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title.right {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title.right {
   width: 100%;
   padding: 0 0 0 46px;
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-footer {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-footer {
   display: flex;
   width: 100%;
   height: 54px;

package/lib/sideslider/sideslider.less

@@ -1,6 +1,6 @@
 @import '../styles/themes/themes.less';
 
-:where(.@{bk-prefix}-sideslider) {
+.@{bk-prefix}-sideslider {
   position: fixed;
   top: 0;
   right: 0;
@@ -13,29 +13,29 @@
 /* slide过渡动画 */
 .slide-enter-active,
 .slide-leave-active,
-:where(.@{bk-prefix}-modal-body) {
+.@{bk-prefix}-modal-body {
   transform: translateX(0);
-  transition: transform 0.25s;
+  transition: transform .25s;
 }
 
 .slide-enter-active {
-  animation: slider-fade-in 0.25s;
+  animation: slider-fade-in .25s;
 }
 
 .slide-leave-active {
-  animation: slider-fade-in 0.25s reverse;
+  animation: slider-fade-in .25s reverse;
 }
 
 .slide-enter-from,
 .slide-leave-to {
   &.left {
     transform: translateX(-100%);
-    transition: transform 0.25s;
+    transition: transform .25s;
   }
 
   &.right {
     transform: translateX(100%);
-    transition: transform 0.25s;
+    transition: transform .25s;
   }
 }
 
@@ -49,7 +49,7 @@
   }
 }
 
-:where(.@{bk-prefix}-modal-ctx) {
+.@{bk-prefix}-modal-ctx {
   &.@{bk-prefix}-sideslider-wrapper {
     .@{bk-prefix}-modal-wrapper {
       position: absolute;
@@ -60,8 +60,8 @@
 
       &.scroll-able {
         .@{bk-prefix}-modal-content {
-          height: 100%;
           overflow: auto;
+          height: 100%;
         }
       }
 
@@ -114,6 +114,8 @@
               transform: translate(50%, -50%) rotate(-45deg);
             }
           }
+
+
         }
 
         .@{bk-prefix}-sideslider-title {
@@ -141,5 +143,7 @@
         box-shadow: rgb(0 0 0 / 6%) 0 -2px 4px 0;
       }
     }
+
   }
 }
+

package/lib/sideslider/sideslider.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;
 }
-:where(.bk-sideslider) {
+.bk-sideslider {
   position: fixed;
   top: 0;
   right: 0;
@@ -138,7 +138,7 @@
 /* slide过渡动画 */
 .slide-enter-active,
 .slide-leave-active,
-:where(.bk-modal-body) {
+.bk-modal-body {
   transform: translateX(0);
   transition: transform 0.25s;
 }
@@ -166,24 +166,24 @@
     opacity: 1;
   }
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper {
   position: absolute;
   top: 0;
   bottom: 0;
   left: auto;
   transform: initial;
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper.scroll-able .bk-modal-content {
-  height: 100%;
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper.scroll-able .bk-modal-content {
   overflow: auto;
+  height: 100%;
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header {
   width: 100%;
   height: 52px;
   background: #fff;
   border-bottom: 1px solid #dcdee5;
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close {
   position: absolute;
   top: 0;
   width: 30px;
@@ -195,10 +195,10 @@
   cursor: pointer;
   background-color: var(--primary-color);
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right {
   left: 0;
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right::before {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right::before {
   top: 50%;
   left: 50%;
   display: inline-block;
@@ -209,10 +209,10 @@
   content: '';
   transform: translate(-50%, -50%) rotate(45deg);
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left {
   right: 0;
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left::before {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left::before {
   top: 50%;
   left: 50%;
   display: inline-block;
@@ -223,7 +223,7 @@
   content: '';
   transform: translate(50%, -50%) rotate(-45deg);
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title {
   display: flex;
   height: 52px;
   padding-left: 30px;
@@ -231,11 +231,11 @@
   color: #313238;
   align-items: center;
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title.right {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title.right {
   width: 100%;
   padding: 0 0 0 46px;
 }
-:where(.bk-modal-ctx).bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-footer {
+.bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-footer {
   display: flex;
   width: 100%;
   height: 54px;

package/lib/slider/index.js

@@ -1,12 +1,8 @@
-import "../styles/reset.css";
-import "./slider.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_bkui_vue_lib_config_provider_fe8577a3__ from "../config-provider";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_input_d525237e__ from "../input";
-import "../input/input.less";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_popover_9b03f19d__ from "../popover";
-import "../popover/popover.less";
+import * as __WEBPACK_EXTERNAL_MODULE__config_provider_9d0186d9__ from "../config-provider";
+import * as __WEBPACK_EXTERNAL_MODULE__input_752b0149__ from "../input";
+import * as __WEBPACK_EXTERNAL_MODULE__popover_cf5f8dce__ from "../popover";
 /******/ var __webpack_modules__ = ({
 
 /***/ 7609:
@@ -426,7 +422,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({ ["PlacementEnum"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.PlacementEnum, ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.PropTypes, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstall });
+const external_shared_namespaceObject = x({ ["PlacementEnum"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.PlacementEnum, ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.PropTypes, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.withInstall });
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -466,25 +462,17 @@ const external_vue_namespaceObject = external_vue_x({ ["Fragment"]: () => __WEBP
 var regenerator = __webpack_require__(2841);
 var regenerator_default = /*#__PURE__*/__webpack_require__.n(regenerator);
 ;// 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 });
 ;// CONCATENATED MODULE: external "../input"
-var input_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var input_y = x => () => x
-const input_namespaceObject = input_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_input_d525237e__["default"] });
-;// CONCATENATED MODULE: external "../input/input.less"
-var input_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var input_less_y = x => () => x
-const input_less_namespaceObject = input_less_x({  });
+var external_input_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_input_y = x => () => x
+const external_input_namespaceObject = external_input_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE__input_752b0149__["default"] });
 ;// CONCATENATED MODULE: external "../popover"
-var popover_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var popover_y = x => () => x
-const popover_namespaceObject = popover_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_popover_9b03f19d__["default"] });
-;// CONCATENATED MODULE: external "../popover/popover.less"
-var popover_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var popover_less_y = x => () => x
-const popover_less_namespaceObject = popover_less_x({  });
+var external_popover_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_popover_y = x => () => x
+const external_popover_namespaceObject = external_popover_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE__popover_cf5f8dce__["default"] });
 ;// CONCATENATED MODULE: ../../packages/slider/src/slider-button.tsx
 
 /**
@@ -517,7 +505,6 @@ const popover_less_namespaceObject = popover_less_x({  });
 
 
 
-
 /* harmony default export */ const slider_button = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'SliderButton',
   props: {
@@ -553,7 +540,7 @@ const popover_less_namespaceObject = popover_less_x({  });
         var customContent = props.params.customContent[props.modelValue];
         tip = customContent.tip || customContent.label || '';
       }
-      var placement = props.params.vertical ? shared_namespaceObject.PlacementEnum.RIGHT : shared_namespaceObject.PlacementEnum.TOP;
+      var placement = props.params.vertical ? external_shared_namespaceObject.PlacementEnum.RIGHT : external_shared_namespaceObject.PlacementEnum.TOP;
       if ((_props$params = props.params) !== null && _props$params !== void 0 && _props$params.showTip) {
         return {
           content: props.params.formatterTipLabel("".concat(tip || (props === null || props === void 0 ? void 0 : props.modelValue) || '0')),
@@ -646,7 +633,7 @@ const popover_less_namespaceObject = popover_less_x({  });
         oldValue.value = props.modelValue;
       }
     };
-    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
     var renderDom = function renderDom() {
       return (0,external_vue_namespaceObject.createVNode)("div", {
@@ -660,7 +647,7 @@ const popover_less_namespaceObject = popover_less_x({  });
           return event.stopPropagation();
         },
         "onMousedown": onButtonDown
-      }, [Boolean(tip.value.content) ? (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)(popover_namespaceObject["default"], {
+      }, [Boolean(tip.value.content) ? (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [(0,external_vue_namespaceObject.createVNode)(external_popover_namespaceObject["default"], {
         "content": tip.value.content,
         "theme": 'dark',
         "placement": tip.value.placement,
@@ -725,7 +712,6 @@ const popover_less_namespaceObject = popover_less_x({  });
 
 
 
-
 var on = function on(element, event, handler) {
   if (element && event && handler) {
     element.addEventListener(event, handler, false);
@@ -739,7 +725,7 @@ var off = function off(element, event, handler) {
 /* harmony default export */ const slider = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'Slider',
   props: {
-    modelValue: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.arrayOf(shared_namespaceObject.PropTypes.number), shared_namespaceObject.PropTypes.number]),
+    modelValue: external_shared_namespaceObject.PropTypes.oneOfType([external_shared_namespaceObject.PropTypes.arrayOf(external_shared_namespaceObject.PropTypes.number), external_shared_namespaceObject.PropTypes.number]),
     extCls: {
       type: String,
       "default": ''
@@ -1153,7 +1139,7 @@ var off = function off(element, event, handler) {
       }
       return '1';
     };
-    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
     var renderDom = function renderDom() {
       var _slots$start, _slots$end;
@@ -1248,7 +1234,7 @@ var off = function off(element, event, handler) {
         "class": "".concat(resolveClassName('slider-input'))
       }, [(0,external_vue_namespaceObject.createVNode)("div", {
         "class": "input-item"
-      }, [(0,external_vue_namespaceObject.createVNode)(input_namespaceObject["default"], {
+      }, [(0,external_vue_namespaceObject.createVNode)(external_input_namespaceObject["default"], {
         "type": "number",
         "modelValue": firstInput.value,
         "max": props.maxValue,
@@ -1258,7 +1244,7 @@ var off = function off(element, event, handler) {
         "class": "input-center"
       }, [(0,external_vue_namespaceObject.createTextVNode)("\uFF5E")]), (0,external_vue_namespaceObject.createVNode)("div", {
         "class": "input-item"
-      }, [(0,external_vue_namespaceObject.createVNode)(input_namespaceObject["default"], {
+      }, [(0,external_vue_namespaceObject.createVNode)(external_input_namespaceObject["default"], {
         "type": "number",
         "modelValue": secondInput.value,
         "max": props.maxValue,
@@ -1302,7 +1288,7 @@ var off = function off(element, event, handler) {
  */
 
 
-var Slider = (0,shared_namespaceObject.withInstall)(slider);
+var Slider = (0,external_shared_namespaceObject.withInstall)(slider);
 /* harmony default export */ const src = (Slider);
 })();
 

package/lib/slider/slider.css

@@ -1,9 +1,9 @@
-:where(.bk-slider) {
+.bk-slider {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
-:where(.bk-slider) .bk-slider-runway {
+.bk-slider .bk-slider-runway {
   position: relative;
   width: 100%;
   height: 4px;
@@ -13,28 +13,28 @@
   border-radius: 2px;
   opacity: 1;
 }
-:where(.bk-slider) .bk-slider-runway .bk-slider-bar {
+.bk-slider .bk-slider-runway .bk-slider-bar {
   position: absolute;
   height: 4px;
   background: #3a84ff;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
   border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
 }
-:where(.bk-slider) .bk-slider-runway .bk-slider-bar.vertical {
+.bk-slider .bk-slider-runway .bk-slider-bar.vertical {
   width: 4px;
 }
-:where(.bk-slider) .bk-slider-runway .bk-slider-bar.horizontal {
+.bk-slider .bk-slider-runway .bk-slider-bar.horizontal {
   height: 4px;
 }
-:where(.bk-slider) .bk-slider-runway .disable {
+.bk-slider .bk-slider-runway .disable {
   background: #979ba5;
 }
-:where(.bk-slider) .bk-slider-runway .bk-slider-labels {
+.bk-slider .bk-slider-runway .bk-slider-labels {
   position: relative;
 }
-:where(.bk-slider) .bk-slider-runway .bk-slider-labels.vertical {
+.bk-slider .bk-slider-runway .bk-slider-labels.vertical {
   left: 18px;
   display: flex;
   width: 10px;
@@ -42,7 +42,7 @@
   flex-direction: column;
   justify-content: space-between;
 }
-:where(.bk-slider) .bk-slider-runway .bk-slider-labels.horizontal {
+.bk-slider .bk-slider-runway .bk-slider-labels.horizontal {
   top: 10px;
   display: flex;
   width: 100%;
@@ -50,7 +50,7 @@
   flex-direction: row;
   justify-content: space-between;
 }
-:where(.bk-slider) .bk-slider-runway .bk-slider-labels .bk-slider-label {
+.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label {
   position: absolute;
   display: flex;
   width: 10px;
@@ -60,15 +60,15 @@
   align-items: center;
   justify-content: center;
 }
-:where(.bk-slider) .bk-slider-runway .bk-slider-labels .bk-slider-label.vertical {
+.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.vertical {
   left: 10px;
   transform: translateY(50%);
 }
-:where(.bk-slider) .bk-slider-runway .bk-slider-labels .bk-slider-label.horizontal {
+.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.horizontal {
   top: 10px;
   transform: translateX(-50%);
 }
-:where(.bk-slider) .bk-slider-interval {
+.bk-slider .bk-slider-interval {
   position: absolute;
   width: 4px;
   height: 4px;
@@ -76,22 +76,22 @@
   border-radius: 100%;
   transform: translateX(-50%);
 }
-:where(.bk-slider) .bk-slider-interval.vertical {
+.bk-slider .bk-slider-interval.vertical {
   left: 2px;
 }
-:where(.bk-slider) .bk-slider-input {
+.bk-slider-input {
   display: flex;
   margin: 0 0 0 28px;
   flex-direction: row;
   align-items: center;
 }
-:where(.bk-slider) .bk-slider-input .input-item {
+.bk-slider-input .input-item {
   width: 92px;
 }
-:where(.bk-slider) .bk-slider-input .input-center {
+.bk-slider-input .input-center {
   margin: 0 7px;
 }
-:where(.bk-slider-button) {
+.bk-slider-button {
   position: absolute;
   z-index: 1001;
   display: flex;
@@ -104,21 +104,21 @@
   justify-content: center;
   align-items: center;
 }
-:where(.bk-slider-button):hover {
+.bk-slider-button:hover {
   cursor: grab;
 }
-:where(.bk-slider-button).grabbing {
+.bk-slider-button.grabbing {
   cursor: grabbing;
 }
-:where(.bk-slider-button).vertical {
+.bk-slider-button.vertical {
   left: -10px;
   transform: translateY(50%);
 }
-:where(.bk-slider-button).horizontal {
+.bk-slider-button.horizontal {
   top: -10px;
   transform: translateX(-50%);
 }
-:where(.bk-slider-button) .slider-button {
+.bk-slider-button .slider-button {
   width: 12px;
   height: 12px;
   background-color: #fff;
@@ -127,25 +127,25 @@
   transition: 0.2s;
   user-select: none;
 }
-:where(.bk-slider-button) .slider-button-disable {
+.bk-slider-button .slider-button-disable {
   border: 2px solid #979ba5;
 }
-:where(.bk-slider-button) .slider-button:hover {
+.bk-slider-button .slider-button:hover {
   box-shadow: 0px 0px 0px 4px rgba(58, 132, 255, 0.3);
 }
-:where(.bk-slider-button) .slider-button:focus {
+.bk-slider-button .slider-button:focus {
   box-shadow: 0px 0px 10px 0px rgba(58, 132, 255, 0.9);
 }
-:where(.bk-slider-button) .slider-button-label {
+.bk-slider-button .slider-button-label {
   position: absolute;
   display: flex;
   text-align: center;
   align-items: center;
   justify-content: center;
 }
-:where(.bk-slider-button) .slider-button-label.vertical {
+.bk-slider-button .slider-button-label.vertical {
   left: 28px;
 }
-:where(.bk-slider-button) .slider-button-label.horizontal {
+.bk-slider-button .slider-button-label.horizontal {
   top: 20px;
 }

package/lib/slider/slider.less

@@ -1,6 +1,6 @@
 @import '../styles/themes/themes.less';
 
-:where(.@{bk-prefix}-slider) {
+.@{bk-prefix}-slider {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -19,10 +19,10 @@
       position: absolute;
       height: 4px;
       background: @primary-color;
-      border-top-right-radius: 3px;
-      border-bottom-right-radius: 3px;
       border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
       border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
 
       &.vertical {
         width: 4px;
@@ -94,7 +94,7 @@
     }
   }
 
-  .@{bk-prefix}-slider-input {
+  &-input {
     display: flex;
     margin: 0 0 0 28px;
     flex-direction: row;
@@ -110,7 +110,7 @@
   }
 }
 
-:where(.@{bk-prefix}-slider-button) {
+.@{bk-prefix}-slider-button {
   position: absolute;
   z-index: 1001;
   display: flex;
@@ -147,7 +147,7 @@
     background-color: #fff;
     border: 2px solid @primary-color;
     border-radius: 50%;
-    transition: 0.2s;
+    transition: .2s;
     user-select: none;
 
     &-disable {
@@ -155,11 +155,11 @@
     }
 
     &:hover {
-      box-shadow: 0px 0px 0px 4px rgba(58, 132, 255, 0.3);
+      box-shadow: 0px 0px 0px 4px rgba(58, 132, 255, .30);
     }
 
     &:focus {
-      box-shadow: 0px 0px 10px 0px rgba(58, 132, 255, 0.9);
+      box-shadow: 0px 0px 10px 0px rgba(58, 132, 255, .9);
     }
   }