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

Reusable React components for building experiences for Office 365.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = function (props) {
    var theme = props.theme, className = props.className;
    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'
            },
            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