office-ui-fabric-react/lib/components/ColorPicker/ColorSlider/ColorSlider.styles.js

Reusable React components for building experiences for Office 365.

import { IsFocusVisibleClassName } from '../../../Utilities';
var hueStyle = {
    background: 
    // tslint:disable-next-line:max-line-length
    '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%)'
};
var alphaStyle = {
    backgroundImage: 
    // tslint:disable-next-line:max-line-length
    'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)'
};
export var getStyles = function (props) {
    var _a;
    var theme = props.theme, className = props.className, isAlpha = props.isAlpha;
    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["." + IsFocusVisibleClassName + " &:focus"] = {
                        outline: "1px solid " + palette.neutralSecondary
                    },
                    _a)
            },
            isAlpha ? 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