@varlet/ui 2.0.6 → 2.1.0-alpha.1667210582672

package/highlight/attributes.json

@@ -1465,12 +1465,20 @@
   },
   "var-slider/step": {
     "type": "string | number",
-    "description": "步长，取值为 `1 ~ 100` 间的整数 默认值：1"
+    "description": "步长，取值必须大于 0 默认值：1"
   },
   "var-slider/range": {
     "type": "boolean",
     "description": "是否启用双滑块 默认值：false"
   },
+  "var-slider/max": {
+    "type": "string | number",
+    "description": "最大值 默认值：100"
+  },
+  "var-slider/min": {
+    "type": "string | number",
+    "description": "最小值 默认值：0"
+  },
   "var-slider/label-visible": {
     "type": "string",
     "description": "是否显示标签，可选值为 `always normal never` 默认值：normal"
@@ -1479,14 +1487,30 @@
     "type": "string",
     "description": "标签文字颜色 默认值：#fff"
   },
+  "var-slider/label-color": {
+    "type": "string",
+    "description": "标签颜色 默认值：-"
+  },
+  "var-slider/active-color": {
+    "type": "string",
+    "description": "已激活的轨道背景颜色 默认值：-"
+  },
+  "var-slider/track-color": {
+    "type": "string",
+    "description": "轨道背景颜色 默认值：-"
+  },
   "var-slider/track-height": {
     "type": "string | number",
-    "description": "slider的高度 默认值：2"
+    "description": "轨道的高度 默认值：2"
   },
   "var-slider/thumb-size": {
     "type": "string | number",
     "description": "滑块的大小 默认值：12"
   },
+  "var-slider/thumb-color": {
+    "type": "string",
+    "description": "滑块的背景颜色 默认值：-"
+  },
   "var-slider/disabled": {
     "type": "boolean",
     "description": "是否禁用 默认值：false"

package/highlight/tags.json

@@ -549,10 +549,16 @@
       "v-model",
       "step",
       "range",
+      "max",
+      "min",
       "label-visible",
       "label-text-color",
+      "label-color",
+      "active-color",
+      "track-color",
       "track-height",
       "thumb-size",
+      "thumb-color",
       "disabled",
       "readonly",
       "rules"

package/highlight/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -4188,6 +4188,10 @@
             {
               "name": "append-icon",
               "description": "后置图标"
+            },
+            {
+              "name": "arrow-icon",
+              "description": "箭头图标"
             }
           ]
         },
@@ -4316,7 +4320,7 @@
             },
             {
               "name": "step",
-              "description": "步长，取值为 `1 ~ 100` 间的整数",
+              "description": "步长，取值必须大于 0",
               "default": "1",
               "value": {
                 "type": "string | number",
@@ -4332,6 +4336,24 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "max",
+              "description": "最大值",
+              "default": "100",
+              "value": {
+                "type": "string | number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "min",
+              "description": "最小值",
+              "default": "0",
+              "value": {
+                "type": "string | number",
+                "kind": "expression"
+              }
+            },
             {
               "name": "label-visible",
               "description": "是否显示标签，可选值为 `always normal never`",
@@ -4350,9 +4372,36 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "label-color",
+              "description": "标签颜色",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "active-color",
+              "description": "已激活的轨道背景颜色",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "track-color",
+              "description": "轨道背景颜色",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
             {
               "name": "track-height",
-              "description": "slider的高度",
+              "description": "轨道的高度",
               "default": "2",
               "value": {
                 "type": "string | number",
@@ -4368,6 +4417,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "thumb-color",
+              "description": "滑块的背景颜色",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
             {
               "name": "disabled",
               "description": "是否禁用",

package/lib/collapse/CollapseSfc.css

@@ -1 +1 @@
-.var-collapse { position: relative; width: 100%;}
+.var-collapse { position: relative; width: 100%; z-index: 0;}

package/lib/select/Select.js

@@ -127,14 +127,16 @@ function render(_ctx, _cache) {
     /* TEXT, CLASS */
     ))])) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", _hoisted_2, (0, _vue.toDisplayString)(_ctx.label), 1
     /* TEXT */
-    )), (0, _vue.createVNode)(_component_var_icon, {
+    )), (0, _vue.renderSlot)(_ctx.$slots, "arrow-icon", {
+      focus: _ctx.isFocus
+    }, () => [(0, _vue.createVNode)(_component_var_icon, {
       class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('arrow'), [_ctx.isFocus, _ctx.n('--arrow-rotate')])),
       "var-select-cover": "",
       name: "menu-down",
       transition: 300
     }, null, 8
     /* PROPS */
-    , ["class"])], 6
+    , ["class"])])], 6
     /* CLASS, STYLE */
     ), (0, _vue.createElementVNode)("label", {
       class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('placeholder'), 'var--ellipsis', [_ctx.isFocus, _ctx.n('--focus')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')], _ctx.computePlaceholderState(), [!_ctx.hint, _ctx.n('--placeholder-non-hint')])),

package/lib/slider/Slider.js

@@ -20,8 +20,6 @@ var _formDetails = _interopRequireDefault(require("../form-details"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var {
   n,
   classes
@@ -44,10 +42,6 @@ function render(_ctx, _cache) {
     class: (0, _vue.normalizeClass)(_ctx.n())
   }, [(0, _vue.createElementVNode)("div", {
     class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('block'), [_ctx.isDisabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')])),
-    style: (0, _vue.normalizeStyle)({
-      height: _ctx.thumbSize === undefined ? _ctx.thumbSize : _ctx.multiplySizeUnit(_ctx.thumbSize, 3),
-      margin: _ctx.thumbSize === undefined ? _ctx.thumbSize : "0 " + _ctx.multiplySizeUnit(_ctx.thumbSize, 0.5)
-    }),
     ref: "sliderEl",
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.click && _ctx.click(...arguments);
@@ -82,21 +76,19 @@ function render(_ctx, _cache) {
       onTouchend: $event => _ctx.end(item.enumValue),
       onTouchcancel: $event => _ctx.end(item.enumValue)
     }, [(0, _vue.renderSlot)(_ctx.$slots, "button", {
-      currentValue: item.value
+      currentValue: item.text
     }, () => [(0, _vue.createElementVNode)("div", {
       class: (0, _vue.normalizeClass)(_ctx.n('thumb-block')),
       style: (0, _vue.normalizeStyle)({
-        background: _ctx.thumbColor,
-        height: _ctx.multiplySizeUnit(_ctx.thumbSize),
-        width: _ctx.multiplySizeUnit(_ctx.thumbSize)
+        background: _ctx.thumbColor
       })
     }, null, 6
     /* CLASS, STYLE */
     ), (0, _vue.createElementVNode)("div", {
       class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('thumb-ripple'), [_ctx.thumbsProps[item.enumValue].active, _ctx.n('thumb-ripple--active')])),
-      style: (0, _vue.normalizeStyle)(_extends({
+      style: (0, _vue.normalizeStyle)({
         background: _ctx.thumbColor
-      }, _ctx.getRippleSize(item)))
+      })
     }, null, 6
     /* CLASS, STYLE */
     ), (0, _vue.createElementVNode)("div", {
@@ -107,7 +99,7 @@ function render(_ctx, _cache) {
         height: _ctx.thumbSize === undefined ? _ctx.thumbSize : _ctx.multiplySizeUnit(_ctx.thumbSize, 2),
         width: _ctx.thumbSize === undefined ? _ctx.thumbSize : _ctx.multiplySizeUnit(_ctx.thumbSize, 2)
       })
-    }, [(0, _vue.createElementVNode)("span", null, (0, _vue.toDisplayString)(item.value), 1
+    }, [(0, _vue.createElementVNode)("span", null, (0, _vue.toDisplayString)(item.text), 1
     /* TEXT */
     )], 6
     /* CLASS, STYLE */
@@ -116,8 +108,8 @@ function render(_ctx, _cache) {
     , _hoisted_1);
   }), 128
   /* KEYED_FRAGMENT */
-  ))], 6
-  /* CLASS, STYLE */
+  ))], 2
+  /* CLASS */
   ), (0, _vue.createVNode)(_component_var_form_details, {
     "error-message": _ctx.errorMessage,
     class: (0, _vue.normalizeClass)(_ctx.n('form')),
@@ -167,53 +159,43 @@ var _default = (0, _vue.defineComponent)({
       [Thumbs.First]: getThumbProps(),
       [Thumbs.Second]: getThumbProps()
     });
-    var unitWidth = (0, _vue.computed)(() => maxWidth.value / 100 * (0, _shared.toNumber)(props.step));
+    var scope = (0, _vue.computed)(() => (0, _shared.toNumber)(props.max) - (0, _shared.toNumber)(props.min));
+    var unitWidth = (0, _vue.computed)(() => maxWidth.value / scope.value * (0, _shared.toNumber)(props.step));
     var thumbList = (0, _vue.computed)(() => {
-      var list = [{
-        value: props.modelValue,
-        enumValue: Thumbs.First
-      }];
+      var {
+        modelValue,
+        range
+      } = props;
+      var list = [];
 
-      if (props.range && (0, _shared.isArray)(props.modelValue)) {
+      if (range && (0, _shared.isArray)(modelValue)) {
         list = [{
-          value: props.modelValue[0],
-          enumValue: Thumbs.First
+          value: getValue(modelValue[0]),
+          enumValue: Thumbs.First,
+          text: toPrecision(modelValue[0])
         }, {
-          value: props.modelValue[1],
-          enumValue: Thumbs.Second
+          value: getValue(modelValue[1]),
+          enumValue: Thumbs.Second,
+          text: toPrecision(modelValue[1])
+        }];
+      } else if ((0, _shared.isNumber)(modelValue)) {
+        list = [{
+          value: getValue(modelValue),
+          enumValue: Thumbs.First,
+          text: toPrecision(modelValue)
         }];
       }
 
       return list;
     });
-
-    var getRippleSize = item => {
-      var size;
-
-      if (props.thumbSize !== undefined) {
-        size = thumbsProps[item.enumValue].active ? (0, _elements.multiplySizeUnit)(props.thumbSize, 3) : '0px';
-      }
-
-      return {
-        height: size,
-        width: size
-      };
-    };
-
-    var showLabel = type => {
-      if (props.labelVisible === 'always') return true;
-      if (props.labelVisible === 'never') return false;
-      return thumbsProps[type].active;
-    };
-
     var getFillStyle = (0, _vue.computed)(() => {
       var {
         activeColor,
         range,
         modelValue
       } = props;
-      var width = range && (0, _shared.isArray)(modelValue) ? Math.abs(modelValue[0] - modelValue[1]) : modelValue;
-      var left = range && (0, _shared.isArray)(modelValue) ? Math.min(modelValue[0], modelValue[1]) : 0;
+      var left = range && (0, _shared.isArray)(modelValue) ? getValue(Math.min(modelValue[0], modelValue[1])) : 0;
+      var width = range && (0, _shared.isArray)(modelValue) ? getValue(Math.max(modelValue[0], modelValue[1])) - left : getValue(modelValue);
       return {
         width: width + "%",
         left: left + "%",
@@ -223,26 +205,52 @@ var _default = (0, _vue.defineComponent)({
     var isDisabled = (0, _vue.computed)(() => props.disabled || (form == null ? void 0 : form.disabled.value));
     var isReadonly = (0, _vue.computed)(() => props.readonly || (form == null ? void 0 : form.readonly.value));
 
+    var showLabel = type => {
+      if (props.labelVisible === 'always') return true;
+      if (props.labelVisible === 'never') return false;
+      return thumbsProps[type].active;
+    };
+
+    var getValue = value => {
+      var {
+        min,
+        max
+      } = props;
+      if (value < (0, _shared.toNumber)(min)) return 0;
+      if (value > (0, _shared.toNumber)(max)) return 100;
+      return (value - (0, _shared.toNumber)(min)) / scope.value * 100;
+    };
+
+    var toPrecision = value => {
+      if (!(0, _shared.isNumber)(value)) return 0;
+      var num = value;
+      if (num < Number(props.min)) num = Number(props.min);
+      if (num > Number(props.max)) num = Number(props.max);
+      var isInteger = parseInt("" + num, 10) === num;
+      return isInteger ? num : (0, _shared.toNumber)(num.toPrecision(5));
+    };
+
     var setPercent = (moveDistance, type) => {
       var rangeValue = [];
       var {
         step,
         range,
         modelValue,
-        onChange
+        onChange,
+        min
       } = props;
       var stepNumber = (0, _shared.toNumber)(step);
       var roundDistance = Math.round(moveDistance / unitWidth.value);
-      var curValue = roundDistance * stepNumber;
-      var prevValue = thumbsProps[type].percentValue;
-      thumbsProps[type].percentValue = curValue / stepNumber;
+      var curValue = roundDistance * stepNumber + (0, _shared.toNumber)(min);
+      var prevValue = thumbsProps[type].percentValue * stepNumber + (0, _shared.toNumber)(min);
+      thumbsProps[type].percentValue = roundDistance;
 
       if (range && (0, _shared.isArray)(modelValue)) {
         rangeValue = type === Thumbs.First ? [curValue, modelValue[1]] : [modelValue[0], curValue];
       }
 
       if (prevValue !== curValue) {
-        var value = range ? rangeValue : curValue;
+        var value = range ? rangeValue.map(value => toPrecision(value)) : toPrecision(curValue);
         (0, _components.call)(onChange, value);
         (0, _components.call)(props['onUpdate:modelValue'], value);
         validateWithTrigger();
@@ -278,13 +286,15 @@ var _default = (0, _vue.defineComponent)({
       var {
         range,
         modelValue,
-        onEnd
+        onEnd,
+        step,
+        min
       } = props;
       if (isDisabled.value || isReadonly.value) return;
       var rangeValue = [];
       thumbsProps[type].currentLeft = thumbsProps[type].percentValue * unitWidth.value;
       thumbsProps[type].active = false;
-      var curValue = thumbsProps[type].percentValue;
+      var curValue = thumbsProps[type].percentValue * (0, _shared.toNumber)(step) + (0, _shared.toNumber)(min);
 
       if (range && (0, _shared.isArray)(modelValue)) {
         rangeValue = type === Thumbs.First ? [curValue, modelValue[1]] : [modelValue[0], curValue];
@@ -311,13 +321,8 @@ var _default = (0, _vue.defineComponent)({
         return false;
       }
 
-      if (stepNumber < 1 || stepNumber > 100) {
-        console.warn('[Varlet] Slider: "step" should be >= 0 and <= 100');
-        return false;
-      }
-
-      if (parseInt("" + props.step, 10) !== stepNumber) {
-        console.warn('[Varlet] Slider: "step" should be an Integer');
+      if (stepNumber < 0) {
+        console.warn('[Varlet] Slider: "step" should be > 0');
         return false;
       }
 
@@ -357,27 +362,26 @@ var _default = (0, _vue.defineComponent)({
         step = (0, _shared.toNumber)(props.step);
       }
 
+      var getPercent = value => {
+        var {
+          min,
+          max
+        } = props;
+        if (value < (0, _shared.toNumber)(min)) return 0;
+        if (value > (0, _shared.toNumber)(max)) return scope.value / step;
+        return (value - (0, _shared.toNumber)(min)) / step;
+      };
+
       if (props.range && (0, _shared.isArray)(modelValue)) {
-        thumbsProps[Thumbs.First].percentValue = modelValue[0] / step;
+        thumbsProps[Thumbs.First].percentValue = getPercent(modelValue[0]);
         thumbsProps[Thumbs.First].currentLeft = thumbsProps[Thumbs.First].percentValue * unitWidth.value;
-        thumbsProps[Thumbs.Second].percentValue = modelValue[1] / step;
+        thumbsProps[Thumbs.Second].percentValue = getPercent(modelValue[1]);
         thumbsProps[Thumbs.Second].currentLeft = thumbsProps[Thumbs.Second].percentValue * unitWidth.value;
       } else if ((0, _shared.isNumber)(modelValue)) {
-        thumbsProps[Thumbs.First].currentLeft = modelValue / step * unitWidth.value;
+        thumbsProps[Thumbs.First].currentLeft = getPercent(modelValue) * unitWidth.value;
       }
     };
 
-    (0, _vue.watch)([() => props.modelValue, () => props.step], _ref => {
-      var [modelValue, step] = _ref;
-      if (!stepValidator() || !valueValidator() || isScroll.value) return;
-      setProps(modelValue, (0, _shared.toNumber)(step));
-    });
-    (0, _vue.watch)(maxWidth, () => setProps());
-    (0, _vue.onMounted)(() => {
-      if (!stepValidator() || !valueValidator()) return;
-      maxWidth.value = sliderEl.value.offsetWidth;
-    });
-
     var reset = () => {
       var resetValue = props.range ? [0, 0] : 0;
       (0, _components.call)(props['onUpdate:modelValue'], resetValue);
@@ -390,6 +394,16 @@ var _default = (0, _vue.defineComponent)({
       resetValidation
     };
     (0, _components.call)(bindForm, sliderProvider);
+    (0, _vue.watch)([() => props.modelValue, () => props.step], _ref => {
+      var [modelValue, step] = _ref;
+      if (!stepValidator() || !valueValidator() || isScroll.value) return;
+      setProps(modelValue, (0, _shared.toNumber)(step));
+    });
+    (0, _vue.watch)(maxWidth, () => setProps());
+    (0, _vue.onMounted)(() => {
+      if (!stepValidator() || !valueValidator()) return;
+      maxWidth.value = sliderEl.value.offsetWidth;
+    });
     return {
       n,
       classes,
@@ -402,7 +416,6 @@ var _default = (0, _vue.defineComponent)({
       thumbList,
       multiplySizeUnit: _elements.multiplySizeUnit,
       toNumber: _shared.toNumber,
-      getRippleSize,
       showLabel,
       start,
       move,

package/lib/slider/props.js

@@ -46,6 +46,14 @@ var props = {
   trackHeight: {
     type: [String, Number]
   },
+  max: {
+    type: [String, Number],
+    default: 100
+  },
+  min: {
+    type: [String, Number],
+    default: 0
+  },
   thumbSize: {
     type: [String, Number]
   },

package/lib/slider/slider.css

@@ -1 +1 @@
-:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-fill-background: var(--color-primary); --slider-thumb-block-background: var(--color-primary); --slider-thumb-ripple-background: var(--color-primary); --slider-thumb-label-background: var(--color-primary); --slider-thumb-label-font-size: var(--font-size-sm);}.var-slider { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%;}.var-slider__block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px;}.var-slider--disabled { filter: opacity(0.6);}.var-slider__track { width: 100%; align-items: center; position: relative;}.var-slider__track-background { width: 100%; height: 2px; background: var(--slider-track-background);}.var-slider__track-fill { position: absolute; height: 100%; left: 0; top: 0; background-color: var(--slider-track-fill-background);}.var-slider__thumb { position: absolute;}.var-slider__thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background-color: var(--slider-thumb-block-background);}.var-slider__thumb-ripple { position: absolute; width: 0; z-index: -1; height: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: var(--slider-thumb-ripple-background); transition: 0.3s var(--cubic-bezier);}.var-slider__thumb-ripple--active { width: 36px; height: 36px;}.var-slider__thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__thumb-label span { transform: rotate(-45deg);}.var-slider__thumb-label--active { transform: translateY(-50%) translateX(-50%) rotate(45deg) scale(1);}.var-slider--error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.5);}.var-slider--error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-ripple { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__form[var-slider-cover] { margin: 0;}
+:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-fill-background: var(--color-primary); --slider-thumb-block-background: var(--color-primary); --slider-thumb-ripple-background: var(--color-primary); --slider-thumb-label-background: var(--color-primary); --slider-thumb-label-font-size: var(--font-size-sm);}.var-slider { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%;}.var-slider__block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px;}.var-slider--disabled { filter: opacity(0.6);}.var-slider__track { width: 100%; align-items: center; position: relative;}.var-slider__track-background { width: 100%; height: 2px; background: var(--slider-track-background);}.var-slider__track-fill { position: absolute; height: 100%; left: 0; top: 0; background-color: var(--slider-track-fill-background);}.var-slider__thumb { position: absolute;}.var-slider__thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background-color: var(--slider-thumb-block-background);}.var-slider__thumb-ripple { position: absolute; width: 0; z-index: -1; height: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: var(--slider-thumb-ripple-background); transition: 0.3s var(--cubic-bezier);}.var-slider__thumb-ripple--active { width: 36px; height: 36px;}.var-slider__thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__thumb-label span { transform: rotate(-45deg);}.var-slider__thumb-label--active { transform: translateY(-20%) translateY(-8px) translateX(-50%) rotate(45deg) scale(1);}.var-slider--error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.5);}.var-slider--error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-ripple { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__form[var-slider-cover] { margin: 0;}

package/lib/snackbar/style/index.js

@@ -1,8 +1,8 @@
 require('../../styles/common.css')
+require('../SnackbarSfc.css')
 require('../../styles/elevation.css')
 require('../../loading/loading.css')
 require('../../button/button.css')
 require('../../icon/icon.css')
 require('../snackbar.css')
 require('../coreSfc.css')
-require('../SnackbarSfc.css')