office-ui-fabric-react
Version:
Reusable React components for building experiences for Microsoft 365.
76 lines • 2.55 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var Utilities_1 = require("../../../Utilities");
var hueStyle = {
background: "linear-gradient(" + [
'to left',
'red 0',
'#f09 10%',
'#cd00ff 20%',
'#3200ff 30%',
'#06f 40%',
'#00fffd 50%',
'#0f6 60%',
'#35ff00 70%',
'#cdff00 80%',
'#f90 90%',
'red 100%',
].join(',') + ")",
};
var alphaStyle = {
backgroundImage: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)',
};
exports.getStyles = function (props) {
var _a;
// eslint-disable-next-line deprecation/deprecation
var theme = props.theme, className = props.className, _b = props.type, type = _b === void 0 ? 'hue' : _b, _c = props.isAlpha, useAlphaBackground = _c === void 0 ? type !== 'hue' : _c;
var palette = theme.palette, effects = theme.effects;
return {
root: [
'ms-ColorPicker-slider',
{
position: 'relative',
height: 20,
marginBottom: 8,
border: "1px solid " + palette.neutralLight,
borderRadius: effects.roundedCorner2,
boxSizing: 'border-box',
outline: 'none',
selectors: (_a = {},
_a["." + Utilities_1.IsFocusVisibleClassName + " &:focus"] = {
outline: "1px solid " + palette.neutralSecondary,
},
_a),
},
useAlphaBackground ? alphaStyle : hueStyle,
className,
],
sliderOverlay: [
'ms-ColorPicker-sliderOverlay',
{
content: '',
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
],
sliderThumb: [
'ms-ColorPicker-thumb',
'is-slider',
{
position: 'absolute',
width: 20,
height: 20,
background: 'white',
border: "1px solid " + palette.neutralSecondaryAlt,
borderRadius: '50%',
boxShadow: effects.elevation8,
transform: 'translate(-50%, -50%)',
top: '50%',
},
],
};
};
//# sourceMappingURL=ColorSlider.styles.js.map