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

Reusable React components for building experiences for Office 365.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var GlobalClassNames = {
    root: 'ms-Facepile',
    addButton: 'ms-Facepile-addButton ms-Facepile-itemButton',
    descriptiveOverflowButton: 'ms-Facepile-descriptiveOverflowButton ms-Facepile-itemButton',
    itemButton: 'ms-Facepile-itemButton ms-Facepile-person',
    itemContainer: 'ms-Facepile-itemContainer',
    members: 'ms-Facepile-members',
    member: 'ms-Facepile-member',
    overflowButton: 'ms-Facepile-overflowButton ms-Facepile-itemButton'
};
exports.styles = function (props) {
    var className = props.className, theme = props.theme, _a = props.spacingAroundItemButton, spacingAroundItemButton = _a === void 0 ? 2 : _a;
    var palette = theme.palette, fonts = theme.fonts;
    var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
    var ItemButtonStyles = {
        textAlign: 'center',
        padding: 0,
        borderRadius: '50%',
        verticalAlign: 'top',
        selectors: {
            'button&': {
                display: 'inline',
                background: 'none',
                backgroundColor: 'transparent',
                padding: 0,
                cursor: 'pointer',
                border: 'none',
                selectors: {
                    '&::-moz-focus-inner': {
                        padding: 0,
                        border: 0
                    }
                }
            }
        }
    };
    return {
        root: [
            classNames.root,
            {
                width: 'auto'
            },
            className
        ],
        addButton: [
            classNames.addButton,
            Styling_1.getFocusStyle(theme, -1),
            ItemButtonStyles,
            {
                selectors: {
                    'button&': {
                        fontSize: fonts.medium.fontSize,
                        color: palette.white,
                        backgroundColor: palette.themePrimary,
                        marginRight: spacingAroundItemButton * 2 + 'px',
                        selectors: {
                            '&:hover': {
                                backgroundColor: palette.themeDark
                            },
                            '&:focus': {
                                backgroundColor: palette.themeDark
                            },
                            '&:active': {
                                backgroundColor: palette.themeDarker
                            },
                            '&:disabled': {
                                backgroundColor: palette.neutralTertiaryAlt
                            }
                        }
                    }
                }
            }
        ],
        descriptiveOverflowButton: [
            classNames.descriptiveOverflowButton,
            Styling_1.getFocusStyle(theme, -1),
            ItemButtonStyles,
            {
                selectors: {
                    'button&': {
                        fontSize: fonts.small.fontSize,
                        color: palette.neutralSecondary,
                        backgroundColor: palette.neutralLight,
                        marginLeft: spacingAroundItemButton * 2 + "px"
                    }
                }
            }
        ],
        itemButton: [classNames.itemButton, ItemButtonStyles],
        itemContainer: [
            classNames.itemContainer,
            {
                display: 'flex'
            }
        ],
        members: [
            classNames.members,
            {
                display: 'flex',
                overflow: 'hidden',
                listStyleType: 'none',
                padding: 0,
                margin: "-" + spacingAroundItemButton + "px"
            }
        ],
        member: [
            classNames.member,
            {
                display: 'inline-flex',
                flex: '0 0 auto',
                margin: spacingAroundItemButton + "px"
            }
        ],
        overflowButton: [
            classNames.overflowButton,
            Styling_1.getFocusStyle(theme, -1),
            ItemButtonStyles,
            {
                selectors: {
                    'button&': {
                        fontSize: fonts.medium.fontSize,
                        color: palette.neutralSecondary,
                        backgroundColor: palette.neutralLight,
                        marginLeft: spacingAroundItemButton * 2 + "px"
                    }
                }
            }
        ],
        overflowInitialsIcon: [
            {
                color: palette.neutralPrimary
            }
        ],
        screenReaderOnly: Styling_1.hiddenContentStyle
    };
};
//# sourceMappingURL=Facepile.styles.js.map