office-ui-fabric-react/lib/components/SwatchColorPicker/ColorPickerGridCell.styles.js

Reusable React components for building experiences for Office 365.

import { HighContrastSelector } from '../../Styling';
import { IsFocusVisibleClassName } from '../../Utilities';
var ACTIVE_BORDER_COLOR = '#969696';
function getSvgSelectorStyles(borderColor, isHover) {
    return {
        width: 12,
        height: 12,
        border: '4px solid',
        borderColor: borderColor,
        boxShadow: isHover ? 'none' : '0 0 0 1px #969696',
        padding: 4,
        margin: 0
    };
}
export var getStyles = function (props) {
    var theme = props.theme, disabled = props.disabled, selected = props.selected, circle = props.circle, isWhite = props.isWhite;
    var semanticColors = theme.semanticColors;
    return {
        colorCell: [
            {
                backgroundColor: 'transparent',
                padding: 0,
                overflow: 'visible',
                position: 'relative',
                boxSizing: 'border-box',
                display: 'inline-block',
                border: '1px solid transparent',
                background: 'transparent',
                cursor: 'pointer',
                textAlign: 'center',
                verticalAlign: 'top',
                userSelect: 'none',
                height: 40,
                selectors: (_a = {},
                    _a[HighContrastSelector] = { border: 'none' },
                    _a["." + IsFocusVisibleClassName + " &:focus, ." + IsFocusVisibleClassName + " &:focus::after"] = { borderColor: 'transparent' },
                    _a["." + IsFocusVisibleClassName + " &:focus $svg"] = getSvgSelectorStyles(theme.palette.neutralQuaternaryAlt, false),
                    _a[':hover $svg'] = getSvgSelectorStyles(theme.palette.neutralQuaternaryAlt, true),
                    _a[':focus $svg'] = getSvgSelectorStyles(theme.palette.neutralQuaternaryAlt, false),
                    _a[':active $svg'] = getSvgSelectorStyles(ACTIVE_BORDER_COLOR, false),
                    _a)
            },
            isWhite && {
                selectors: {
                    $svg: {
                        width: 12,
                        height: 12,
                        border: '4px solid',
                        boxShadow: "inset 0 0 0 1px " + theme.palette.neutralTertiary,
                        borderColor: 'transparent'
                    }
                }
            },
            circle &&
                'is-circle' && {
                selectors: {
                    $svg: { borderRadius: '100%' }
                }
            },
            selected &&
                'isSelected' && {
                selectors: {
                    $svg: {
                        boxShadow: '0 0 0 1px #969696',
                        border: '4px solid',
                        borderColor: theme.palette.neutralTertiaryAlt,
                        width: 12,
                        height: 12
                    },
                    ':hover $svg': { boxShadow: '0 0 0 1px #969696' },
                    ':focus $svg': {
                        boxShadow: '0 0 0 1px #969696'
                    },
                    ':active $svg': {
                        boxShadow: '0 0 0 1px #969696',
                        borderColor: ACTIVE_BORDER_COLOR
                    }
                }
            },
            selected &&
                isWhite && {
                selectors: {
                    $svg: {
                        padding: 4,
                        margin: 0
                    }
                }
            },
            disabled &&
                'is-disabled' && {
                color: semanticColors.disabledBodyText,
                cursor: 'default',
                pointerEvents: 'none',
                opacity: 0.3
            }
        ],
        svg: [
            {
                width: 20,
                height: 20,
                padding: 4,
                boxSizing: 'content-box'
            }
        ]
    };
    var _a;
};
//# sourceMappingURL=ColorPickerGridCell.styles.js.map