@vlinderclimate/net-zero-ui
Version:
<div align="center"> <img src="https://storage.yandexcloud.net/static.vlinderstorage.com/Telegram_VlinderTech.png" width=200 /> </div> <h1 align="center">Net Zero UI kit</h1>
199 lines (192 loc) • 7.86 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('../tslib.es6-9240d9d1.js');
var jsxRuntime = require('react/jsx-runtime');
var styles = require('@mui/material/styles');
var Slider = require('@mui/material/Slider');
var theme_typography = require('../theme/typography.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var Slider__default = /*#__PURE__*/_interopDefaultLegacy(Slider);
var railSize = {
desktop: {
small: 3,
medium: 32
},
mobile: {
small: 3,
medium: 24
}
};
var StyledSlider = styles.styled(Slider__default["default"])(function (_a) {
var _b;
var theme = _a.theme, color = _a.color;
return (_b = {
height: railSize.desktop.small,
marginBottom: 0,
"*:after": {
display: "none !important"
},
"&.MuiSlider-colorSecondary": {
color: theme.palette.primary.main,
"& $thumb": {
backgroundColor: theme.palette.gray.white
}
},
"&.MuiSlider-colorPrimary": {
color: theme.palette.gray.white,
"& .MuiSlider-rail": {
backgroundColor: theme.palette.gray[400]
},
"& .MuiSlider-track": {
backgroundColor: theme.palette.primary.main
}
},
"&.Mui-disabled": {
color: theme.palette.gray[500],
"& $thumb": {
backgroundColor: theme.palette.gray[500]
}
},
"&.MuiSlider-root .MuiSlider-markLabel": tslib_es6.__assign(tslib_es6.__assign({}, theme_typography["default"].supporting.main), { color: theme.palette.alpha[700], transform: "translate(-50%, -50%)", "&[style='left: 0%;']": {
transform: "translate(-2px, -50%)"
}, "&[style='left: 100%;']": {
transform: "translate(-100%, -50%)",
marginLeft: 1
} }),
"& .MuiSlider-thumb": {
height: 16,
width: 16,
border: "3px solid " + theme.palette.primary.main,
boxShadow: "0 0 0 2px " + theme.palette.gray.white,
"&:before": {
display: "none"
},
"&.Mui-disabled": {
height: 20,
width: 20,
marginLeft: 0
},
"&.Mui-focusVisible, &:hover": {
boxShadow: "0 0 0 2px " + theme.palette.gray.white
},
"& .icon": {
color: color === "primary" ? theme.palette.primary.main : theme.palette.text.primary
}
},
"& .MuiSlider-track": {
height: railSize.desktop.small,
borderRadius: 0,
opacity: 1,
border: 0
},
"& .MuiSlider-rail": {
height: railSize.desktop.small,
borderRadius: 2,
opacity: 1,
".MuiFormHelperText-root &": {
backgroundColor: "transparent !important"
}
},
".MuiSlider-valueLabel": tslib_es6.__assign(tslib_es6.__assign({ backgroundColor: theme.palette.gray.white, color: theme.palette.text.primary }, theme_typography["default"].caption.main), { padding: "0 2px", top: -5, "&:before": {
display: "none"
} }),
"&.MuiSlider-sizeMedium": {
height: railSize.desktop.medium,
padding: 0,
marginTop: theme.spacing(5),
"&:after": {
content: "''",
position: "absolute",
backgroundColor: "#000",
borderRadius: 0,
height: "100%",
width: 1,
top: "0",
left: "50%",
zIndex: 1,
transform: "translate(-1px, 0)",
mixBlendMode: "overlay"
},
".MuiSlider-rail, .MuiSlider-track": {
height: railSize.desktop.medium,
borderRadius: 0
},
".MuiSlider-rail": {
backgroundColor: theme.palette.gray[400]
},
".MuiSlider-mark": {
borderRadius: 0,
height: 16,
width: 1,
backgroundColor: theme.palette.alpha[500],
top: "-50%",
marginTop: 2
},
"& .MuiSlider-thumb": {
height: 16,
width: 16,
border: "3px solid " + theme.palette.primary.main,
boxShadow: "none !important",
top: "0",
marginTop: -12,
zIndex: 10,
"&:after": {
content: "''",
width: 3,
height: railSize.desktop.medium + 7,
backgroundColor: theme.palette.primary.main,
position: "absolute",
top: "100%",
left: "50%",
display: "block!important",
borderRadius: 0,
transform: "translate(-50%,0)"
},
"&.Mui-disabled": {
height: 16,
width: 16
},
"&.Mui-focusVisible, &:hover": {
boxShadow: "none !important"
}
},
".MuiSlider-markLabel": tslib_es6.__assign({ top: "-100%", marginTop: -2, color: theme.palette.gray[600] }, theme_typography["default"].caption.main)
}
},
_b[theme.breakpoints.down("sm")] = {
"&.MuiSlider-root .MuiSlider-markLabel, .MuiSlider-valueLabel": {
fontSize: "12px",
lineHeight: "14px"
},
".MuiSlider-valueLabel": {
display: "none"
},
".MuiSlider-rail, .MuiSlider-track": {
height: railSize.mobile.small
},
"&.MuiSlider-sizeMedium": {
"&, .MuiSlider-rail, .MuiSlider-track": {
height: railSize.mobile.medium
},
"& .MuiSlider-thumb": {
"&:after": {
height: railSize.mobile.medium + 7
}
},
".MuiSlider-mark": {
height: 12
}
}
},
_b["@media (pointer: coarse)"] = {
"&.MuiSlider-root": {
padding: "13px 0"
}
},
_b);
});
var RangeSlider = function (_a) {
var disabled = _a.disabled, _b = _a.color, color = _b === void 0 ? "primary" : _b, size = _a.size, defaultValue = _a.defaultValue, props = tslib_es6.__rest(_a, ["disabled", "color", "size", "defaultValue"]);
return jsxRuntime.jsx(StyledSlider, tslib_es6.__assign({ size: size, color: color, defaultValue: defaultValue, disabled: disabled }, props), void 0);
};
exports["default"] = RangeSlider;