@megafon/ui-core 5.8.0 → 5.9.0

package/dist/lib/components/Chips/components/ChipsDropdown.css

@@ -0,0 +1,106 @@
+@-webkit-keyframes listAppear {
+  from {
+    -webkit-transform: translateY(-25px);
+            transform: translateY(-25px);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes listAppear {
+  from {
+    -webkit-transform: translateY(-25px);
+            transform: translateY(-25px);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+.mfui-chips-dropdown {
+  position: relative;
+}
+.mfui-chips-dropdown__button {
+  width: 100%;
+}
+.mfui-chips-dropdown__list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  display: block;
+  border-radius: 12px;
+  background-color: var(--base);
+  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  -webkit-animation-name: listAppear;
+          animation-name: listAppear;
+  -webkit-animation-duration: 0.3s;
+          animation-duration: 0.3s;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+}
+.mfui-chips-dropdown__list-inner {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  max-height: 320px;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 256px;
+  padding: 16px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--spbSky2) transparent;
+  overflow-wrap: normal;
+}
+.mfui-chips-dropdown__list-inner::-webkit-scrollbar {
+  width: 16px;
+}
+.mfui-chips-dropdown__list-inner::-webkit-scrollbar-thumb {
+  border: 6px solid transparent;
+  border-radius: 16px;
+  background-color: var(--spbSky2);
+  background-clip: padding-box;
+}
+.mfui-chips-dropdown__list-inner::-webkit-scrollbar-thumb:hover {
+  background-color: var(--spbSky3);
+}
+.mfui-chips-dropdown__list-item {
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 12px 32px;
+  border-radius: 12px;
+  background-color: transparent;
+  cursor: pointer;
+}
+.mfui-chips-dropdown__list-item:hover {
+  background-color: var(--spbSky0);
+}
+.mfui-chips-dropdown__list-item_with-icon {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.mfui-chips-dropdown__icon {
+  display: block;
+  width: 24px;
+  min-width: 24px;
+  max-height: 24px;
+  margin-right: 16px;
+}
+.mfui-chips-dropdown__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: var(--content);
+}

package/dist/lib/components/Chips/components/ChipsDropdown.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ChipColorsType, ChipIdType, IChipProps } from '../Chip';
+import './ChipsDropdown.less';
+export interface IChipsDropdownProps {
+    moreTitle: string;
+    value: ChipIdType;
+    items: IChipProps[];
+    color: ChipColorsType;
+    onClick: (e: React.SyntheticEvent<EventTarget>, id: ChipIdType) => void;
+    dataAttrs?: {
+        root?: Record<string, string>;
+        list?: Record<string, string>;
+    };
+}
+declare const ChipsDropdown: React.FC<IChipsDropdownProps>;
+export default ChipsDropdown;

package/dist/lib/components/Chips/components/ChipsDropdown.js

@@ -0,0 +1,131 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+require("core-js/modules/es.array.find.js");
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.object.values.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+var _Chip = _interopRequireWildcard(require("../Chip"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-chips-dropdown');
+
+var ChipsDropdown = function ChipsDropdown(_ref) {
+  var color = _ref.color,
+      moreTitle = _ref.moreTitle,
+      _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      value = _ref.value,
+      onClick = _ref.onClick,
+      dataAttrs = _ref.dataAttrs;
+
+  var _React$useState = _react["default"].useState(false),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      isDropdownOpen = _React$useState2[0],
+      setIsDropdownOpen = _React$useState2[1];
+
+  var dropdownRef = _react["default"].useRef(null);
+
+  var listRef = _react["default"].useRef(null);
+
+  var currentItem = _react["default"].useMemo(function () {
+    return items.find(function (item) {
+      return item.id === value;
+    }) || {
+      id: '',
+      children: moreTitle
+    };
+  }, [items, value, moreTitle]);
+
+  var handleOutsideClick = _react["default"].useCallback(function (event) {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setIsDropdownOpen(false);
+    }
+  }, []);
+
+  var handleOpenItemList = function handleOpenItemList() {
+    setIsDropdownOpen(true);
+    document.addEventListener('mousedown', handleOutsideClick);
+  };
+
+  var handleItemClick = _react["default"].useCallback(function (item) {
+    return function (e) {
+      e.persist();
+      setIsDropdownOpen(false);
+      onClick(e, item.id);
+    };
+  }, [onClick]);
+
+  _react["default"].useEffect(function () {
+    if (!isDropdownOpen) {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    }
+  }, [handleOutsideClick, isDropdownOpen]);
+
+  _react["default"].useEffect(function () {
+    return function () {
+      return document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, [handleOutsideClick]);
+
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: cn(),
+    ref: dropdownRef
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/_react["default"].createElement(_Chip["default"], (0, _extends2["default"])({}, currentItem, {
+    className: cn('button'),
+    color: color,
+    checked: !!currentItem.id,
+    arrow: isDropdownOpen ? 'up' : 'down',
+    onClick: handleOpenItemList
+  })), isDropdownOpen && /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: cn('list'),
+    ref: listRef
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('list-inner')
+  }, items.map(function (item, key) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: key,
+      className: cn('list-item', {
+        'with-icon': !!item.icon
+      }),
+      onClick: handleItemClick(item),
+      onKeyDown: handleItemClick(item)
+    }, !!(item === null || item === void 0 ? void 0 : item.icon) && /*#__PURE__*/_react["default"].createElement("span", {
+      className: cn('icon')
+    }, item.icon), !!(item === null || item === void 0 ? void 0 : item.children) && item.children);
+  }))));
+};
+
+ChipsDropdown.propTypes = {
+  moreTitle: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  items: PropTypes.arrayOf(PropTypes.shape(_Chip.ChipPropType).isRequired).isRequired,
+  color: PropTypes.oneOf(Object.values(_Chip.ChipColors)).isRequired,
+  onClick: PropTypes.func.isRequired,
+  dataAttrs: PropTypes.objectOf(PropTypes.object)
+};
+var _default = ChipsDropdown;
+exports["default"] = _default;

package/dist/lib/components/ContentView/ContentView.css

@@ -0,0 +1,61 @@
+.mfui-content-view {
+  min-width: 240px;
+  padding: 0 16px;
+  color: var(--content);
+  text-align: center;
+}
+.mfui-content-view__image {
+  max-width: 144px;
+  margin-bottom: 24px;
+  vertical-align: top;
+}
+.mfui-content-view__title {
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 28px;
+  letter-spacing: 0.5px;
+}
+.mfui-content-view__text {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+  margin-top: 4px;
+}
+.mfui-content-view__buttons {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 12px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding-top: 32px;
+}
+.mfui-content-view_fullscreen {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  min-height: 100%;
+}
+.mfui-content-view_fullscreen .mfui-content-view__content {
+  margin-top: auto;
+}
+.mfui-content-view_fullscreen .mfui-content-view__buttons {
+  margin-top: auto;
+  padding-top: 24px;
+  padding-bottom: 24px;
+}

package/dist/lib/components/ContentView/ContentView.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import './ContentView.less';
+declare const imageMap: {
+    alarm: any;
+    empty: any;
+    error: any;
+    fail: any;
+    searchNoResult: any;
+    submit: any;
+    success: any;
+    update: any;
+    waiting: any;
+};
+declare type ElementType = {
+    /** Текст */
+    text?: string;
+    /** Атрибут href */
+    href?: string;
+    /** Атрибут target */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+export interface IContentViewProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Заголовок */
+    title: string;
+    /** Тип встроенного изображения */
+    type?: keyof typeof imageMap;
+    /** Значение тега alt для изображения */
+    alt?: string;
+    /** Ссылка на изображение */
+    src?: string;
+    /** Параметры кнопки */
+    buttonParams?: ElementType;
+    /** Параметры ссылки */
+    linkParams?: ElementType;
+    /** Полноэкранный режим */
+    isFullscreen?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        button?: Record<string, string>;
+        link?: Record<string, string>;
+    };
+}
+declare const ContentView: React.FC<IContentViewProps>;
+export default ContentView;

package/dist/lib/components/ContentView/ContentView.js

@@ -0,0 +1,133 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+require("core-js/modules/es.string.link.js");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _alarm = _interopRequireDefault(require("./i/alarm.png"));
+
+var _empty = _interopRequireDefault(require("./i/empty.png"));
+
+var _error = _interopRequireDefault(require("./i/error.png"));
+
+var _fail = _interopRequireDefault(require("./i/fail.png"));
+
+var _searchNoResult = _interopRequireDefault(require("./i/searchNoResult.png"));
+
+var _submit = _interopRequireDefault(require("./i/submit.png"));
+
+var _success = _interopRequireDefault(require("./i/success.png"));
+
+var _update = _interopRequireDefault(require("./i/update.png"));
+
+var _waiting = _interopRequireDefault(require("./i/waiting.png"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var imageMap = {
+  alarm: _alarm["default"],
+  empty: _empty["default"],
+  error: _error["default"],
+  fail: _fail["default"],
+  searchNoResult: _searchNoResult["default"],
+  submit: _submit["default"],
+  success: _success["default"],
+  update: _update["default"],
+  waiting: _waiting["default"]
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-content-view');
+
+var ContentView = function ContentView(_ref) {
+  var className = _ref.className,
+      title = _ref.title,
+      type = _ref.type,
+      _ref$alt = _ref.alt,
+      alt = _ref$alt === void 0 ? '' : _ref$alt,
+      src = _ref.src,
+      buttonParams = _ref.buttonParams,
+      linkParams = _ref.linkParams,
+      isFullscreen = _ref.isFullscreen,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children;
+  var imageSrc = type ? imageMap[type] : src;
+  var showButtons = !!(buttonParams === null || buttonParams === void 0 ? void 0 : buttonParams.text) || !!(linkParams === null || linkParams === void 0 ? void 0 : linkParams.text);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      fullscreen: isFullscreen
+    }, [className])
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/React.createElement("img", {
+    className: cn('image'),
+    src: imageSrc,
+    alt: alt
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('title')
+  }, title), !!children && /*#__PURE__*/React.createElement("div", {
+    className: cn('text')
+  }, children)), showButtons && /*#__PURE__*/React.createElement("div", {
+    className: cn('buttons')
+  }, !!(buttonParams === null || buttonParams === void 0 ? void 0 : buttonParams.text) && /*#__PURE__*/React.createElement(_Button["default"], {
+    href: buttonParams.href,
+    target: buttonParams.target,
+    onClick: buttonParams.onClick,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    }
+  }, buttonParams.text), !!(linkParams === null || linkParams === void 0 ? void 0 : linkParams.text) && /*#__PURE__*/React.createElement(_Button["default"], {
+    type: "text",
+    href: linkParams.href,
+    target: linkParams.target,
+    onClick: linkParams.onClick,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
+    }
+  }, linkParams.text)));
+};
+
+ContentView.propTypes = {
+  className: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['waiting', 'error', 'submit', 'success', 'fail', 'update', 'alarm', 'empty', 'searchNoResult']),
+  alt: PropTypes.string,
+  src: PropTypes.string,
+  buttonParams: PropTypes.shape({
+    text: PropTypes.string,
+    href: PropTypes.string,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    onClick: PropTypes.func
+  }),
+  linkParams: PropTypes.shape({
+    text: PropTypes.string,
+    href: PropTypes.string,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    onClick: PropTypes.func
+  }),
+  isFullscreen: PropTypes.bool,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired),
+    link: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
+var _default = ContentView;
+exports["default"] = _default;

package/dist/lib/components/Sliders/Slider/Slider.css

@@ -0,0 +1,127 @@
+.mfui-slider {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.mfui-slider__head {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  margin-bottom: 8px;
+}
+.mfui-slider__display-value {
+  margin-left: auto;
+}
+.mfui-slider__range-input {
+  height: 12px;
+  margin: 6px 0;
+  border-radius: 100px;
+  background: var(--spbSky0);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--brandGreen)), to(var(--brandGreen)));
+  background-image: linear-gradient(var(--brandGreen), var(--brandGreen));
+  background-repeat: no-repeat;
+  outline: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.mfui-slider__range-input:focus {
+  outline: none;
+}
+.mfui-slider__range-input::-webkit-slider-thumb {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+}
+.mfui-slider__range-input::-moz-range-thumb {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+}
+.mfui-slider__range-input::-ms-thumb {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+}
+.mfui-slider__range-input::-webkit-slider-runnable-track {
+  border: none;
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  -webkit-appearance: none;
+}
+.mfui-slider__range-input::-moz-range-track {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  -webkit-appearance: none;
+}
+.mfui-slider__range-input::-ms-track {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  -webkit-appearance: none;
+}
+.mfui-slider_disabled .mfui-slider__head {
+  color: var(--spbSky3);
+}
+.mfui-slider_disabled .mfui-slider__range-input {
+  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--spbSky1)), to(var(--spbSky1)));
+  background-image: linear-gradient(var(--spbSky1), var(--spbSky1));
+  cursor: default;
+}
+.mfui-slider_disabled .mfui-slider__range-input::-webkit-slider-thumb {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  background-color: var(--spbSky2);
+}
+.mfui-slider_disabled .mfui-slider__range-input::-moz-range-thumb {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  background-color: var(--spbSky2);
+}
+.mfui-slider_disabled .mfui-slider__range-input::-ms-thumb {
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  background-color: var(--spbSky2);
+}