@arco-design/mobile-react 2.30.1 → 2.30.3

package/umd/image-preview/index.d.ts

@@ -18,6 +18,12 @@ export interface PreviewImageProps {
      * @en Transition image url
      */
     fallbackSrc?: string;
+    /**
+     * 过渡图到原图放大动效完成后，移除过渡图的延迟时间(ms)，一般当原图过大时有调整需求
+     * @en After the transition image to the original image enlargement effect is completed, the delay time (ms) before the transition image is removed
+     * @default 30
+     */
+    transitionEndDelay?: number;
     /**
      * 缩略图填充方式（backgroundPosition），默认top center
      * @en Thumbnail fill mode (backgroundPosition), default value is top center

package/umd/image-preview/index.js

@@ -173,7 +173,7 @@
         transformersRef.current = []; // 移除过渡图片
         // @en Remove transition image
 
-        removeChild(document.querySelector('.image-preview-fake-trans-image'));
+        removeChild(transImageRef.current);
         setTransImageInfo(null);
         setPlaceholders({});
         var mounted = isInitialMount.current;
@@ -216,7 +216,9 @@
 
     function removeChild(child) {
       try {
-        child && document.body.removeChild(child);
+        var _domRef$current, _domRef$current$query, _domRef$current$query2;
+
+        child && ((_domRef$current = domRef.current) == null ? void 0 : (_domRef$current$query = _domRef$current.querySelectorAll('.carousel-item')) == null ? void 0 : (_domRef$current$query2 = _domRef$current$query[innerIndexRef.current]) == null ? void 0 : _domRef$current$query2.removeChild(child));
       } catch (e) {}
     } // 监听滑动到上下边缘后还在往外滑动的操作，则关闭弹窗
     // @en Monitor the operation of sliding out after sliding to the upper and lower edges, then close the popup
@@ -635,7 +637,41 @@
       }
     }
 
-    var handleClick = (0, _helpers.useSingleAndDoubleClick)(handleImageClick, handleImageDoubleClick);
+    var handleClick = (0, _helpers.useSingleAndDoubleClick)(handleImageClick, handleImageDoubleClick); // 当使用 getThumbBounds 时，关闭图片预览有缩小效果
+    // @en When using getThumbBounds, closing the image preview has a shrinking effect
+
+    function animateBeforeClose() {
+      var _imagesRef$current$in2;
+
+      var index = innerIndexRef.current;
+      var imageDom = (_imagesRef$current$in2 = imagesRef.current[index]) == null ? void 0 : _imagesRef$current$in2.image;
+      var thumbBounds = getThumbBounds == null ? void 0 : getThumbBounds(index);
+
+      if (!imageDom || !thumbBounds || !thumbBounds.width || !thumbBounds.height) {
+        return;
+      } // 小图超过一半在视野外时，不展示缩小效果
+      // @en When more than half of the thumbnail is outside the field of view, the zoom effect will not be displayed
+
+
+      if (thumbBounds.top < -1 * thumbBounds.height / 2 || thumbBounds.top > windowHeight - thumbBounds.height / 2 || thumbBounds.left < -1 * thumbBounds.width / 2 || thumbBounds.left > windowWidth - thumbBounds.width / 2) {
+        return;
+      }
+
+      var imageDomRect = imageDom.getBoundingClientRect();
+
+      if (!imageDomRect.width || !imageDomRect.height) {
+        return;
+      }
+
+      imageDom.classList.add('closing-animation');
+      setImageBounds(imageDom, imageDomRect, imageDomRect);
+      imageDom.style.objectPosition = images[index].thumbPosition || 'top center';
+      (0, _mobileUtils.nextTick)(function () {
+        imageDom.style.transitionDuration = displayDuration + "ms";
+        imageDom.style.webkitTransitionDuration = displayDuration + "ms";
+        setImageBounds(imageDom, thumbBounds, imageDomRect);
+      });
+    }
 
     function goClose(e) {
       if (closingRef.current) {
@@ -643,6 +679,7 @@
       }
 
       closingRef.current = true;
+      animateBeforeClose();
       close(e);
     }
     /**
@@ -665,7 +702,7 @@
 
 
     function setDisplayAnimation(index) {
-      var _imagesStatusRef$curr4;
+      var _imagesStatusRef$curr4, _domRef$current2, _domRef$current2$quer, _domRef$current2$quer2;
 
       var firstLoaded = (_imagesStatusRef$curr4 = imagesStatusRef.current[index]) == null ? void 0 : _imagesStatusRef$curr4.firstLoaded;
       var fallbackSrc = replaceFallbackWhenLoaded && firstLoaded ? images[index].src : images[index].fallbackSrc; // 用户设置了getThumbBounds和images的fallbackSrc属性才有放大过渡效果
@@ -696,7 +733,7 @@
       transImage.style.opacity = '0';
       transImage.style.transitionDuration = displayDuration + "ms";
       transImage.style.webkitTransitionDuration = displayDuration + "ms";
-      document.body.appendChild(transImage); // 拿到放大之后的位置rect，没拿到就取消小图放大效果
+      (_domRef$current2 = domRef.current) == null ? void 0 : (_domRef$current2$quer = _domRef$current2.querySelectorAll('.carousel-item')) == null ? void 0 : (_domRef$current2$quer2 = _domRef$current2$quer[index]) == null ? void 0 : _domRef$current2$quer2.prepend(transImage); // 拿到放大之后的位置rect，没拿到就取消小图放大效果
       // @en Get the zoomed-in position rect, and cancel the zoom-in effect if not getting it
 
       getNewImageBounds(index, fallbackSrc, transImage, function (rect) {
@@ -718,9 +755,10 @@
               return (0, _extends5.default)({}, holders, (_extends3 = {}, _extends3[index] = true, _extends3));
             });
           }, Math.max(0, displayDuration - 80));
+          var transitionEndDelay = images[index].transitionEndDelay || 30;
           setTimeout(function () {
             resetAnimation(index);
-          }, displayDuration + 30);
+          }, displayDuration + transitionEndDelay);
         });
       });
     }
@@ -880,18 +918,14 @@
       }) : null;
     }
 
-    function renderLoadingArea(index) {
-      // loadingArea提出来，放到过渡图上层
-      // @en The loadingArea is extracted and placed on the upper layer of the transition image
-      return index === openIndex ? /*#__PURE__*/_react.default.createElement(_portal.default, {
-        getContainer: getContainer
-      }, /*#__PURE__*/_react.default.createElement("div", {
+    function renderLoadingArea() {
+      return /*#__PURE__*/_react.default.createElement("div", {
         className: "image-preview-loading-area"
       }, loadingArea || /*#__PURE__*/_react.default.createElement(_loading.default, {
         type: "circle",
         className: "loading-icon",
         radius: 7
-      }))) : loadingArea;
+      }));
     }
 
     return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref3) {
@@ -939,7 +973,7 @@
             imagesRef.current[index] = r;
           },
           showLoading: showLoading,
-          loadingArea: renderLoadingArea(index),
+          loadingArea: renderLoadingArea(),
           errorArea: errorArea,
           showError: showError,
           retryTime: retryTime,

package/umd/image-preview/style/css/index.css

@@ -575,6 +575,7 @@
   height: 100%;
   opacity: 0;
 }
+.arco-image-preview .image-container img.closing-animation,
 .image-preview-fake-trans-image {
   position: fixed;
   left: 0;
@@ -584,7 +585,7 @@
   transition:  all cubic-bezier(0.34, 0.69, 0.1, 1) ;
   will-change: transform;
   pointer-events: none;
-  z-index: 1001;
+  height: auto !important;
 }
 .image-preview-loading-area {
   position: fixed;

package/umd/image-preview/style/index.less

@@ -77,6 +77,7 @@
     opacity: 0;
 }
 
+.@{prefix}-image-preview .image-container img.closing-animation,
 .image-preview-fake-trans-image {
     position: fixed;
     left: 0;
@@ -85,7 +86,7 @@
     .use-var(transition, image-preview-thumb-transition);
     will-change: transform;
     pointer-events: none;
-    z-index: @full-screen-z-index + 1;
+    height: auto !important;
 }
 
 .image-preview-loading-area {

package/umd/nav-bar/back-icon.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react"], factory);
+    define(["exports", "react", "@arco-design/mobile-utils", "../context-provider"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"));
+    factory(exports, require("react"), require("@arco-design/mobile-utils"), require("../context-provider"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react);
+    factory(mod.exports, global.react, global.mobileUtils, global.contextProvider);
     global.backIcon = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _mobileUtils, _contextProvider) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -22,16 +22,22 @@
   function BackArrow(_ref) {
     var _ref$color = _ref.color,
         color = _ref$color === void 0 ? 'currentColor' : _ref$color;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "c-svg-arrow nav-bar-back"
-    }, /*#__PURE__*/_react.default.createElement("svg", {
-      height: "100%",
-      viewBox: "0 0 16 16"
-    }, /*#__PURE__*/_react.default.createElement("path", {
-      id: "path-1_1_",
-      d: "M2.1,8l5.4,5.4c0.1,0.1,0.1,0.3,0,0.5L7,14.4c-0.1,0.1-0.3,0.1-0.5,0L0.7,8.5c-0.3-0.3-0.3-0.7,0-0.9 l5.9-5.9c0.1-0.1,0.3-0.1,0.5,0l0.5,0.5c0.1,0.1,0.1,0.3,0,0.5L2.1,8z",
-      fill: color
-    })));
+    return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref2) {
+      var _ref2$locale = _ref2.locale,
+          locale = _ref2$locale === void 0 ? _mobileUtils.defaultLocale : _ref2$locale;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        role: "button",
+        className: "c-svg-arrow nav-bar-back",
+        "aria-label": locale.NavBar.backBtnAriaLabel
+      }, /*#__PURE__*/_react.default.createElement("svg", {
+        height: "100%",
+        viewBox: "0 0 16 16"
+      }, /*#__PURE__*/_react.default.createElement("path", {
+        id: "path-1_1_",
+        d: "M2.1,8l5.4,5.4c0.1,0.1,0.1,0.3,0,0.5L7,14.4c-0.1,0.1-0.3,0.1-0.5,0L0.7,8.5c-0.3-0.3-0.3-0.7,0-0.9 l5.9-5.9c0.1-0.1,0.3-0.1,0.5,0l0.5,0.5c0.1,0.1,0.1,0.3,0,0.5L2.1,8z",
+        fill: color
+      })));
+    });
   }
 
   var _default = BackArrow;

package/umd/picker-view/components/picker-cell.js

@@ -308,7 +308,7 @@
     function getCurrentCellValue() {
       var _data$currentIndex;
 
-      return currentValue || ((_data$currentIndex = data[currentIndex]) == null ? void 0 : _data$currentIndex.value);
+      return (_data$currentIndex = data[currentIndex]) == null ? void 0 : _data$currentIndex.value;
     }
 
     function _clearTimer() {

package/umd/picker-view/index.js

@@ -127,7 +127,7 @@
       // @en Remove empty values from cascader
 
       return curValues.filter(function (v) {
-        return v;
+        return v !== undefined;
       });
     };
 

package/umd/popover/style/css/index.css

@@ -549,6 +549,10 @@
   font-size: 0.4rem;
   line-height: 1;
 }
+[dir="rtl"] .arco-popover-menu-icon {
+  margin-right: initial;
+  margin-left: 0.16rem;
+}
 .arco-popover-menu-icon > * {
   float: left;
 }
@@ -634,7 +638,6 @@
   width: -webkit-max-content;
   width: max-content;
   z-index: 1010;
-  right: 0;
   background-color: transparent;
   visibility: hidden;
   will-change: transform;
@@ -716,11 +719,15 @@
   padding:  0 0.2rem 0 0.22rem ;
 }
 .arco-popover-inner .text-suffix {
-  padding:  0 0.24rem 0 0 ;
+  padding-right:  0.24rem ;
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 auto;
           flex: 0 0 auto;
 }
+[dir="rtl"] .arco-popover-inner .text-suffix {
+  padding-right: initial;
+  padding-left:  0.24rem ;
+}
 .arco-popover-inner .popover-arrow {
   position: absolute;
   -webkit-transform: rotate(45deg);

package/umd/popover/style/css/menu.css

@@ -549,6 +549,10 @@
   font-size: 0.4rem;
   line-height: 1;
 }
+[dir="rtl"] .arco-popover-menu-icon {
+  margin-right: initial;
+  margin-left: 0.16rem;
+}
 .arco-popover-menu-icon > * {
   float: left;
 }

package/umd/popover/style/index.less

@@ -29,7 +29,6 @@
     position: absolute;
     width: max-content;
     z-index: @full-screen-z-index + 10;
-    right: 0;
     background-color: transparent;
     visibility: hidden;
     will-change: transform;
@@ -104,7 +103,7 @@
     }
 
     .text-suffix {
-        .use-var(padding, popover-text-suffix-padding);
+        .use-var-with-rtl(padding-right, popover-text-suffix-edge);
         flex: 0 0 auto;
     }
 

package/umd/popover/style/menu.less

@@ -32,7 +32,7 @@
         }
     }
     &-icon {
-        .rem(margin-right, 8);
+        .rem-with-rtl(margin-right, 8);
         .rem(font-size, 20);
         line-height: 1;
         & > * {

package/umd/slider/hooks/useSliderEvents.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "."], factory);
+    define(["exports", "react", ".", "../../context-provider"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("."));
+    factory(exports, require("react"), require("."), require("../../context-provider"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global._);
+    factory(mod.exports, global.react, global._, global.contextProvider);
     global.useSliderEvents = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _, _contextProvider) {
   "use strict";
 
   _exports.__esModule = true;
@@ -30,13 +30,16 @@
         setValueGroup = _ref.setValueGroup,
         setCommonIsTouching = _ref.setCommonIsTouching;
 
-    var _useContext = (0, _react.useContext)(_.SliderContext),
-        disabled = _useContext.disabled,
-        step = _useContext.step,
-        min = _useContext.min,
-        max = _useContext.max,
-        type = _useContext.type,
-        draggableTrackOnly = _useContext.draggableTrackOnly;
+    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+        useRtl = _useContext.useRtl;
+
+    var _useContext2 = (0, _react.useContext)(_.SliderContext),
+        disabled = _useContext2.disabled,
+        step = _useContext2.step,
+        min = _useContext2.min,
+        max = _useContext2.max,
+        type = _useContext2.type,
+        draggableTrackOnly = _useContext2.draggableTrackOnly;
 
     var _useState = (0, _react.useState)(IsTouchingStatus.Idle),
         isTouching = _useState[0],
@@ -62,7 +65,8 @@
           length = _linePositionRef$curr.length,
           start = _linePositionRef$curr.start;
       if (length === 0) return 0;
-      var newWidth = isHorizontal ? touchPosition - start : length - touchPosition + start;
+      var rtlRatio = useRtl ? -1 : 1;
+      var newWidth = isHorizontal ? (touchPosition - start) * rtlRatio : length - touchPosition + start;
 
       if (newWidth < 0) {
         newWidth = 0;

package/umd/slider/hooks/useSliderStyle.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "."], factory);
+    define(["exports", "react", ".", "../../context-provider"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("."));
+    factory(exports, require("react"), require("."), require("../../context-provider"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global._);
+    factory(mod.exports, global.react, global._, global.contextProvider);
     global.useSliderStyle = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _, _contextProvider) {
   "use strict";
 
   _exports.__esModule = true;
@@ -21,12 +21,15 @@
         commonIsTouching = _ref.commonIsTouching,
         valueGroup = _ref.valueGroup;
 
-    var _useContext = (0, _react.useContext)(_.SliderContext),
-        size = _useContext.size,
-        useAnimation = _useContext.useAnimation,
-        min = _useContext.min,
-        max = _useContext.max,
-        type = _useContext.type;
+    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+        useRtl = _useContext.useRtl;
+
+    var _useContext2 = (0, _react.useContext)(_.SliderContext),
+        size = _useContext2.size,
+        useAnimation = _useContext2.useAnimation,
+        min = _useContext2.min,
+        max = _useContext2.max,
+        type = _useContext2.type;
 
     var isHorizontal = /^horizontal/g.test(type);
     var heightStyle = (0, _react.useMemo)(function () {
@@ -60,7 +63,8 @@
         length = (larger - min) / (max - min) * length - start;
       }
 
-      return _ref3 = {}, _ref3[isHorizontal ? 'left' : 'bottom'] = start + "px", _ref3[isHorizontal ? 'width' : 'height'] = Math.abs(length) + "px", _ref3;
+      var leftStyle = useRtl ? 'right' : 'left';
+      return _ref3 = {}, _ref3[isHorizontal ? leftStyle : 'bottom'] = start + "px", _ref3[isHorizontal ? 'width' : 'height'] = Math.abs(length) + "px", _ref3;
     }, [valueGroup, getLinePosition, min, max, isHorizontal]);
     return {
       heightStyle: heightStyle,

package/umd/slider/index.js

@@ -29,7 +29,8 @@
   var Slider = /*#__PURE__*/(0, _react.forwardRef)(function (_, ref) {
     var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
         _useContext$prefixCls = _useContext.prefixCls,
-        prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls;
+        prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls,
+        useRtl = _useContext.useRtl;
 
     var _useContext2 = (0, _react.useContext)(_hooks.SliderContext),
         className = _useContext2.className,
@@ -80,9 +81,10 @@
           top = _ref.top,
           height = _ref.height;
 
+      var leftValue = useRtl ? left + width : left;
       return {
         length: isHorizontal ? width : height,
-        start: isHorizontal ? left : top
+        start: isHorizontal ? leftValue : top
       };
     }, [isHorizontal, firstRender]);
 

package/umd/slider/marks.js

@@ -33,7 +33,8 @@
 
     var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
         _useContext$prefixCls = _useContext.prefixCls,
-        prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls;
+        prefixCls = _useContext$prefixCls === void 0 ? '' : _useContext$prefixCls,
+        useRtl = _useContext.useRtl;
 
     var _useContext2 = (0, _react.useContext)(_hooks.SliderContext),
         type = _useContext2.type,
@@ -45,7 +46,8 @@
     var genMarkStyle = (0, _react.useCallback)(function (value) {
       var _ref2;
 
-      return _ref2 = {}, _ref2[isHorizontal ? 'left' : 'bottom'] = (value - min) / (max - min) * 100 + "%", _ref2;
+      var leftStyle = useRtl ? 'right' : 'left';
+      return _ref2 = {}, _ref2[isHorizontal ? leftStyle : 'bottom'] = (value - min) / (max - min) * 100 + "%", _ref2;
     }, [isHorizontal, min, max]);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefixCls + "-slider-marks"

package/umd/slider/style/css/index.css

@@ -541,6 +541,10 @@
 .is-horizontal .arco-slider-label {
   margin-right:  0.24rem ;
 }
+[dir="rtl"] .is-horizontal .arco-slider-label {
+  margin-right: initial;
+  margin-left:  0.24rem ;
+}
 .is-vertical .arco-slider-label {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
@@ -552,6 +556,10 @@
   margin-right: 0;
   margin-left:  0.24rem ;
 }
+[dir="rtl"] .is-horizontal .arco-slider-wrapper + .arco-slider-label {
+  margin-left: initial;
+  margin-right:  0.24rem ;
+}
 .is-vertical .arco-slider-wrapper + .arco-slider-label {
   margin-bottom: 0;
   margin-top:  0.24rem ;
@@ -636,11 +644,27 @@
   -webkit-transform: translateX(50%);
           transform: translateX(50%);
 }
+[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-end {
+  right: initial;
+  left: 0;
+}
+[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-end {
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
 .is-horizontal .arco-slider-thumb-wrapper.is-start {
   left: 0;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
 }
+[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-start {
+  left: initial;
+  right: 0;
+}
+[dir="rtl"] .is-horizontal .arco-slider-thumb-wrapper.is-start {
+  -webkit-transform: translateX(50%);
+          transform: translateX(50%);
+}
 .arco-slider-popover-wrapper .arco-slider-thumb {
   position: relative;
 }
@@ -739,6 +763,10 @@
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
 }
+[dir="rtl"] .arco-slider-marks-item {
+  -webkit-transform: translateX(50%);
+          transform: translateX(50%);
+}
 .arco-slider-marks-item.is-activated {
   background:  #165DFF ;
 }

package/umd/slider/style/index.less

@@ -31,7 +31,7 @@
         .use-var(color, slider-text-color);
 
         .is-horizontal & {
-            .use-var(margin-right, slider-label-gutter);
+            .use-var-with-rtl(margin-right, slider-label-gutter);
         }
 
         .is-vertical & {
@@ -44,7 +44,7 @@
 
         .is-horizontal & {
             margin-right: 0;
-            .use-var(margin-left, slider-label-gutter);
+            .use-var-with-rtl(margin-left, slider-label-gutter);
         }
 
         .is-vertical & {
@@ -124,13 +124,19 @@
                 bottom: 0;
 
                 &.is-end {
-                    right: 0;
+                    .set-prop-with-rtl(right, 0);
                     transform: translateX(50%);
+                    [dir="rtl"] & {
+                        transform: translateX(-50%);
+                    }
                 }
 
                 &.is-start {
-                    left: 0;
+                    .set-prop-with-rtl(left, 0);
                     transform: translateX(-50%);
+                    [dir="rtl"] & {
+                        transform: translateX(50%);
+                    }
                 }
             }
         }
@@ -236,6 +242,9 @@
             .use-var(border-radius, slider-mark-border-radius);
             .use-var(background, slider-line-color);
             transform: translateX(-50%);
+            [dir="rtl"] & {
+                transform: translateX(50%);
+            }
 
             &.is-activated {
                 .use-var(background, slider-line-activated-color);