@megafon/ui-core 6.0.0-beta.4 → 6.0.1

package/dist/es/components/Sliders/SliderRange/SliderRange.css

@@ -1 +1,169 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-slider-range{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-range__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-range__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-range__display-value_left{margin-right:auto}.mfui-slider-range__display-value_right{margin-left:auto}.mfui-slider-range__range-container{cursor:pointer;height:12px;margin:6px 0;position:relative}.mfui-slider-range__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;height:0;margin:0;outline:none;pointer-events:none;position:absolute;top:50%;width:100%}.mfui-slider-range__range-input_left{z-index:1}.mfui-slider-range__range-input_left.mfui-slider-range__range-input_over{z-index:3}.mfui-slider-range__range-input_right{z-index:2}.mfui-slider-range__range-input:focus{outline:none}.mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-track{background-color:var(--spbSky0);border-radius:100px;cursor:pointer;height:100%;left:0;padding:0 12px;position:absolute;right:0;z-index:0}.mfui-slider-range__range-track-inner{height:100%;position:relative;width:100%}.mfui-slider-range__range-track-segment{background-color:var(--brandGreen);border-radius:100px;height:100%;position:absolute}.mfui-slider-range_disabled .mfui-slider-range__head{color:var(--spbSky3)}.mfui-slider-range_disabled .mfui-slider-range__range-track{cursor:default}.mfui-slider-range_disabled .mfui-slider-range__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-range_disabled .mfui-slider-range__range-track-segment{background-color:var(--spbSky1)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}
+.mfui-slider-range {
+  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-range__head {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+.mfui-slider-range__display-values {
+  display: grid;
+  grid-template-columns: 45% 45%;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  width: 100%;
+  margin-top: 8px;
+}
+.mfui-slider-range__display-value_left {
+  margin-right: auto;
+}
+.mfui-slider-range__display-value_right {
+  margin-left: auto;
+}
+.mfui-slider-range__range-container {
+  position: relative;
+  height: 12px;
+  margin: 6px 0;
+  cursor: pointer;
+}
+.mfui-slider-range__range-input {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  height: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  outline: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  pointer-events: none;
+}
+.mfui-slider-range__range-input_left {
+  z-index: 1;
+}
+.mfui-slider-range__range-input_left.mfui-slider-range__range-input_over {
+  z-index: 3;
+}
+.mfui-slider-range__range-input_right {
+  z-index: 2;
+}
+.mfui-slider-range__range-input:focus {
+  outline: none;
+}
+.mfui-slider-range__range-input::-webkit-slider-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  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;
+  pointer-events: auto;
+}
+.mfui-slider-range__range-input::-moz-range-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+}
+.mfui-slider-range__range-input::-ms-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+}
+.mfui-slider-range__range-track {
+  position: absolute;
+  right: 0;
+  left: 0;
+  z-index: 0;
+  height: 100%;
+  padding: 0 12px;
+  border-radius: 100px;
+  background-color: var(--spbSky0);
+  cursor: pointer;
+}
+.mfui-slider-range__range-track-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.mfui-slider-range__range-track-segment {
+  position: absolute;
+  height: 100%;
+  border-radius: 100px;
+  background-color: var(--brandGreen);
+}
+.mfui-slider-range_disabled .mfui-slider-range__head {
+  color: var(--spbSky3);
+}
+.mfui-slider-range_disabled .mfui-slider-range__range-track {
+  cursor: default;
+}
+.mfui-slider-range_disabled .mfui-slider-range__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-range_disabled .mfui-slider-range__range-track-segment {
+  background-color: var(--spbSky1);
+}
+.mfui-slider-range_disabled .mfui-slider-range__range-input::-webkit-slider-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  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;
+  pointer-events: auto;
+  background-color: var(--spbSky2);
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.mfui-slider-range_disabled .mfui-slider-range__range-input::-moz-range-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+  background-color: var(--spbSky2);
+  box-shadow: none;
+}
+.mfui-slider-range_disabled .mfui-slider-range__range-input::-ms-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+  background-color: var(--spbSky2);
+  box-shadow: none;
+}

package/dist/es/components/Sliders/SliderRange/SliderRange.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
 import { ScaleType } from '../components/SliderScale/SliderScale';
-import './SliderRange.scss';
+import './SliderRange.less';
 export interface ISliderRange {
     /** Дополнительный класс корневого элемента */
     className?: string;

package/dist/es/components/Sliders/SliderRange/SliderRange.js

@@ -1,69 +1,80 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.object.values.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import SliderDisplayValue from "../components/SliderDisplayValue/SliderDisplayValue";
-import SliderScale from "../components/SliderScale/SliderScale";
+import * as PropTypes from 'prop-types';
+import SliderDisplayValue, { DisplayValue } from "../components/SliderDisplayValue/SliderDisplayValue";
+import SliderScale, { Scale } from "../components/SliderScale/SliderScale";
 import { getRangeValue, removeFirstZeros } from "../helpers";
 import { getTrackSize, getRangeValueByPageX, checkForThumbAtEndOfTrack } from "./helpers";
 import "./SliderRange.css";
 var THUMB_SIZE = 24;
 var cn = cnCreate('mfui-slider-range');
+
 var SliderRange = function SliderRange(_ref) {
   var className = _ref.className,
-    label = _ref.label,
-    displayValueType = _ref.displayValueType,
-    displayLeftValuePrefix = _ref.displayLeftValuePrefix,
-    displayRightValuePrefix = _ref.displayRightValuePrefix,
-    displayValueUnit = _ref.displayValueUnit,
-    outerLeftValue = _ref.leftValue,
-    outerRightValue = _ref.rightValue,
-    minValue = _ref.minValue,
-    maxValue = _ref.maxValue,
-    _ref$isControlled = _ref.isControlled,
-    isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
-    _ref$step = _ref.step,
-    step = _ref$step === void 0 ? 1 : _ref$step,
-    scale = _ref.scale,
-    customScale = _ref.customScale,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    dataAttrs = _ref.dataAttrs,
-    onChange = _ref.onChange;
+      label = _ref.label,
+      displayValueType = _ref.displayValueType,
+      displayLeftValuePrefix = _ref.displayLeftValuePrefix,
+      displayRightValuePrefix = _ref.displayRightValuePrefix,
+      displayValueUnit = _ref.displayValueUnit,
+      outerLeftValue = _ref.leftValue,
+      outerRightValue = _ref.rightValue,
+      minValue = _ref.minValue,
+      maxValue = _ref.maxValue,
+      _ref$isControlled = _ref.isControlled,
+      isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+      _ref$step = _ref.step,
+      step = _ref$step === void 0 ? 1 : _ref$step,
+      scale = _ref.scale,
+      customScale = _ref.customScale,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      dataAttrs = _ref.dataAttrs,
+      onChange = _ref.onChange;
   var outerLeftRangeValue = getRangeValue(outerLeftValue !== null && outerLeftValue !== void 0 ? outerLeftValue : minValue, minValue, maxValue, step);
   var outerRightRangeValue = getRangeValue(outerRightValue !== null && outerRightValue !== void 0 ? outerRightValue : maxValue, minValue, maxValue, step);
   var leftRangeInputRef = React.useRef(null);
   var rightRangeInputRef = React.useRef(null);
   var rangeTrackRef = React.useRef(null);
   var rangeTrackInnerRef = React.useRef(null);
+
   var _React$useState = React.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    rawLeftInputValue = _React$useState2[0],
-    setRawLeftInputValue = _React$useState2[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      rawLeftInputValue = _React$useState2[0],
+      setRawLeftInputValue = _React$useState2[1];
+
   var _React$useState3 = React.useState(null),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    rawRightInputValue = _React$useState4[0],
-    setRawRightInputValue = _React$useState4[1];
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      rawRightInputValue = _React$useState4[0],
+      setRawRightInputValue = _React$useState4[1];
+
   var _React$useState5 = React.useState(outerLeftRangeValue),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    innerLeftRangeValue = _React$useState6[0],
-    setInnerLeftRangeValue = _React$useState6[1];
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      innerLeftRangeValue = _React$useState6[0],
+      setInnerLeftRangeValue = _React$useState6[1];
+
   var _React$useState7 = React.useState(outerRightRangeValue),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    innerRightRangeValue = _React$useState8[0],
-    setInnerRightRangeValue = _React$useState8[1];
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      innerRightRangeValue = _React$useState8[0],
+      setInnerRightRangeValue = _React$useState8[1];
+
   var leftRangeValue = isControlled ? outerLeftRangeValue : innerLeftRangeValue;
   var rightRangeValue = isControlled ? outerRightRangeValue : innerRightRangeValue;
   var trackSize = getTrackSize(leftRangeValue, rightRangeValue, minValue, maxValue);
   var isThumbAtEndOfTrack = checkForThumbAtEndOfTrack(leftRangeValue, minValue, maxValue, THUMB_SIZE);
   var showHead = !!label || !!displayValueType;
+
   var handleRangeTrackPointerUp = function handleRangeTrackPointerUp(e) {
     if (!rangeTrackInnerRef.current || disabled) {
       return;
     }
+
     var clickValue = getRangeValueByPageX(e.pageX, minValue, maxValue, rangeTrackInnerRef.current);
     var newRangeValue = getRangeValue(clickValue, minValue, maxValue, step);
     var leftHalfTrack = leftRangeValue + (rightRangeValue - leftRangeValue) / 2;
+
     if (newRangeValue < leftHalfTrack) {
       !isControlled && setInnerLeftRangeValue(newRangeValue);
       onChange === null || onChange === void 0 ? void 0 : onChange(newRangeValue, rightRangeValue);
@@ -72,19 +83,25 @@ var SliderRange = function SliderRange(_ref) {
       onChange === null || onChange === void 0 ? void 0 : onChange(leftRangeValue, newRangeValue);
     }
   };
+
   var handleRangeTrackPointerLeave = React.useCallback(function () {
     var _a, _b, _c;
+
     (_a = leftRangeInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     (_b = rightRangeInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
     (_c = rangeTrackRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pointerleave', handleRangeTrackPointerLeave);
   }, []);
+
   var handleRangeTrackPointerDown = function handleRangeTrackPointerDown() {
     var _a;
+
     if (disabled) {
       return;
     }
+
     (_a = rangeTrackRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('pointerleave', handleRangeTrackPointerLeave);
   };
+
   var handleLeftInputChange = function handleLeftInputChange(isRange) {
     return function (e) {
       var targetValue = removeFirstZeros(e.target.value);
@@ -94,6 +111,7 @@ var SliderRange = function SliderRange(_ref) {
       onChange === null || onChange === void 0 ? void 0 : onChange(newRangeValue, rightRangeValue);
     };
   };
+
   var handleRightInputChange = function handleRightInputChange(isRange) {
     return function (e) {
       var targetValue = removeFirstZeros(e.target.value);
@@ -103,6 +121,7 @@ var SliderRange = function SliderRange(_ref) {
       onChange === null || onChange === void 0 ? void 0 : onChange(leftRangeValue, newRangeValue);
     };
   };
+
   var handleInputBlur = function handleInputBlur(isLeft) {
     return function () {
       if (isLeft) {
@@ -112,6 +131,7 @@ var SliderRange = function SliderRange(_ref) {
       }
     };
   };
+
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
       disabled: disabled
@@ -206,4 +226,31 @@ var SliderRange = function SliderRange(_ref) {
     }
   }));
 };
+
+SliderRange.propTypes = {
+  className: PropTypes.string,
+  leftValue: PropTypes.number,
+  rightValue: PropTypes.number,
+  minValue: PropTypes.number.isRequired,
+  maxValue: PropTypes.number.isRequired,
+  label: PropTypes.string,
+  displayValueType: PropTypes.oneOf(Object.values(DisplayValue)),
+  displayLeftValuePrefix: PropTypes.string,
+  displayRightValuePrefix: PropTypes.string,
+  displayValueUnit: PropTypes.string,
+  isControlled: PropTypes.bool,
+  step: PropTypes.number,
+  scale: PropTypes.oneOf(Object.values(Scale)),
+  customScale: PropTypes.arrayOf(PropTypes.string.isRequired),
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    leftInput: PropTypes.objectOf(PropTypes.string.isRequired),
+    rightInput: PropTypes.objectOf(PropTypes.string.isRequired),
+    leftRangeInput: PropTypes.objectOf(PropTypes.string.isRequired),
+    rightRangeInput: PropTypes.objectOf(PropTypes.string.isRequired),
+    scale: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
 export default SliderRange;

package/dist/es/components/Sliders/SliderRange/helpers.js

@@ -6,12 +6,14 @@ export var getTrackSize = function getTrackSize() {
   var minValue = arguments.length > 2 ? arguments[2] : undefined;
   var maxValue = arguments.length > 3 ? arguments[3] : undefined;
   var valueDifference = maxValue - minValue;
+
   if (valueDifference <= 0) {
     return {
       left: 0,
       right: 0
     };
   }
+
   var leftPercent = (vleftValue - minValue) * 100 / valueDifference;
   var rightPercent = (maxValue - rightValue) * 100 / valueDifference;
   return {

package/dist/es/components/Sliders/SliderRatio/SliderRatio.css

@@ -1 +1,219 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-slider-ratio{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-ratio__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-ratio__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-ratio__display-value_left{margin-right:auto}.mfui-slider-ratio__display-value_right{margin-left:auto}.mfui-slider-ratio__range-container{position:relative;width:100%}.mfui-slider-ratio__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--brandPurple);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;border-radius:100px;cursor:pointer;display:block;height:12px;margin:6px 0;outline:none;pointer-events:none;position:relative;width:100%;z-index:1}.mfui-slider-ratio__range-input:focus{outline:none}.mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider-ratio__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-track{cursor:pointer;height:100%;position:absolute;top:0;width:100%;z-index:0}.mfui-slider-ratio__scale{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;left:calc(var(--thumbSize)/2);position:absolute;right:calc(var(--thumbSize)/2);top:0;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;pointer-events:none}.mfui-slider-ratio__scale-item{background-color:var(--stcWhite);border-radius:50%;height:4px;width:4px}.mfui-slider-ratio__scale-item:first-child{margin-left:-2px}.mfui-slider-ratio__scale-item:last-child{margin-right:-2px}.mfui-slider-ratio_disabled .mfui-slider-ratio__head{color:var(--spbSky3)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input{background-color:var(--spbSky1);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky0)),to(var(--spbSky0)));background-image:linear-gradient(var(--spbSky0),var(--spbSky0));cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-track{cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__scale{display:none}
+.mfui-slider-ratio {
+  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-ratio__head {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+.mfui-slider-ratio__display-values {
+  display: grid;
+  grid-template-columns: 45% 45%;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  width: 100%;
+  margin-top: 8px;
+}
+.mfui-slider-ratio__display-value_left {
+  margin-right: auto;
+}
+.mfui-slider-ratio__display-value_right {
+  margin-left: auto;
+}
+.mfui-slider-ratio__range-container {
+  position: relative;
+  width: 100%;
+}
+.mfui-slider-ratio__range-input {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 12px;
+  margin: 6px 0;
+  border-radius: 100px;
+  background: var(--brandPurple);
+  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;
+  pointer-events: none;
+}
+.mfui-slider-ratio__range-input:focus {
+  outline: none;
+}
+.mfui-slider-ratio__range-input::-webkit-slider-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  background-image: url('./i/thumb.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  -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;
+  pointer-events: auto;
+}
+.mfui-slider-ratio__range-input::-moz-range-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  background-image: url('./i/thumb.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+}
+.mfui-slider-ratio__range-input::-ms-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  background-image: url('./i/thumb.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+}
+.mfui-slider-ratio__range-input::-webkit-slider-runnable-track {
+  border: none;
+  background: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  -webkit-appearance: none;
+}
+.mfui-slider-ratio__range-input::-moz-range-track {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  -webkit-appearance: none;
+}
+.mfui-slider-ratio__range-input::-ms-track {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  -webkit-appearance: none;
+}
+.mfui-slider-ratio__range-track {
+  position: absolute;
+  top: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+.mfui-slider-ratio__scale {
+  position: absolute;
+  top: 0;
+  right: calc(var(--thumbSize) / 2);
+  bottom: 0;
+  left: calc(var(--thumbSize) / 2);
+  z-index: 2;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  pointer-events: none;
+}
+.mfui-slider-ratio__scale-item {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+}
+.mfui-slider-ratio__scale-item:first-child {
+  margin-left: -2px;
+}
+.mfui-slider-ratio__scale-item:last-child {
+  margin-right: -2px;
+}
+.mfui-slider-ratio_disabled .mfui-slider-ratio__head {
+  color: var(--spbSky3);
+}
+.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input {
+  background-color: var(--spbSky1);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--spbSky0)), to(var(--spbSky0)));
+  background-image: linear-gradient(var(--spbSky0), var(--spbSky0));
+  cursor: default;
+}
+.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-webkit-slider-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  background-image: url('./i/thumb.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  -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;
+  pointer-events: auto;
+  background-color: var(--spbSky2);
+  background-image: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-moz-range-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  background-image: url('./i/thumb.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+  background-color: var(--spbSky2);
+  background-image: none;
+  box-shadow: none;
+}
+.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-ms-thumb {
+  width: var(--thumbSize);
+  height: var(--thumbSize);
+  border: none;
+  border-radius: 50%;
+  background-color: var(--stcWhite);
+  background-image: url('./i/thumb.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -webkit-appearance: none;
+  pointer-events: auto;
+  background-color: var(--spbSky2);
+  background-image: none;
+  box-shadow: none;
+}
+.mfui-slider-ratio_disabled .mfui-slider-ratio__range-track {
+  cursor: default;
+}
+.mfui-slider-ratio_disabled .mfui-slider-ratio__scale {
+  display: none;
+}

package/dist/es/components/Sliders/SliderRatio/SliderRatio.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
 import { ValueType } from './types';
-import './SliderRatio.scss';
+import './SliderRatio.less';
 export interface ISliderRatio {
     /** Дополнительный класс корневого элемента */
     className?: string;