office-ui-fabric-react/lib/components/pickers/TagPicker/TagItem.styles.js

Reusable React components for building experiences for Office 365.

import { getGlobalClassNames, getFocusStyle, HighContrastSelector } from '../../../Styling';
import { ButtonGlobalClassNames } from '../../Button/BaseButton.classNames';
var GlobalClassNames = {
    root: 'ms-TagItem',
    text: 'ms-TagItem-text',
    close: 'ms-TagItem-close',
    isSelected: 'is-selected'
};
var TAG_HEIGHT = 26;
export function getStyles(props) {
    var _a, _b, _c, _d, _e;
    var className = props.className, theme = props.theme, selected = props.selected, disabled = props.disabled;
    var palette = theme.palette, effects = theme.effects;
    var classNames = getGlobalClassNames(GlobalClassNames, theme);
    return {
        root: [
            classNames.root,
            getFocusStyle(theme),
            {
                boxSizing: 'content-box',
                flexShrink: '1',
                margin: 2,
                height: TAG_HEIGHT,
                lineHeight: TAG_HEIGHT,
                cursor: 'default',
                userSelect: 'none',
                display: 'flex',
                flexWrap: 'nowrap',
                maxWidth: 300,
                borderRadius: effects.roundedCorner2,
                background: !selected || disabled ? palette.neutralLighter : palette.themePrimary,
                selectors: (_a = {
                        ':hover': [
                            !disabled &&
                                !selected && {
                                background: palette.neutralLight,
                                selectors: {
                                    '.ms-TagItem-close': {
                                        color: palette.neutralPrimary
                                    }
                                }
                            },
                            disabled && { background: palette.neutralLighter },
                            selected && !disabled && { background: palette.themePrimary }
                        ]
                    },
                    _a[HighContrastSelector] = {
                        border: "1px solid " + (!selected ? 'WindowText' : 'WindowFrame')
                    },
                    _a)
            },
            disabled && {
                selectors: (_b = {},
                    _b[HighContrastSelector] = {
                        borderColor: 'GrayText'
                    },
                    _b)
            },
            selected &&
                !disabled && [
                classNames.isSelected,
                {
                    color: palette.white
                }
            ],
            className
        ],
        text: [
            classNames.text,
            {
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                minWidth: 30,
                margin: '0 8px'
            },
            disabled && {
                selectors: (_c = {},
                    _c[HighContrastSelector] = {
                        color: 'GrayText'
                    },
                    _c)
            }
        ],
        close: [
            classNames.close,
            {
                color: palette.neutralSecondary,
                width: 30,
                height: '100%',
                flex: '0 0 auto',
                borderRadius: "0 " + effects.roundedCorner2 + " " + effects.roundedCorner2 + " 0",
                selectors: {
                    ':hover': {
                        background: palette.neutralQuaternaryAlt,
                        color: palette.neutralPrimary
                    },
                    ':active': {
                        color: palette.white
                    }
                }
            },
            selected && {
                color: palette.white,
                selectors: (_d = {
                        ':hover': {
                            color: palette.white,
                            background: palette.themeDark
                        }
                    },
                    _d[HighContrastSelector] = {
                        color: 'HighlightText'
                    },
                    _d)
            },
            disabled && {
                selectors: (_e = {},
                    _e["." + ButtonGlobalClassNames.msButtonIcon] = {
                        color: palette.neutralSecondary
                    },
                    _e)
            }
        ]
    };
}
//# sourceMappingURL=TagItem.styles.js.map