@uifabric/experiments/lib/components/PersonaCoin/PersonaCoin.styles.js

Experimental React components for building experiences for Office 365.

import { initialsColorPropToColorCode } from 'office-ui-fabric-react/lib/components/Persona/PersonaInitialsColor';
export var DEFAULT_PERSONA_COIN_SIZE = 48;
export var PersonaCoinStyles = function (props, theme, tokens) {
    var personaProps = {
        text: props.text,
        initialsColor: props.initialsColor
    };
    var _a = props.size, size = _a === void 0 ? DEFAULT_PERSONA_COIN_SIZE : _a, _b = props.coinColor, coinColor = _b === void 0 ? initialsColorPropToColorCode(personaProps) : _b, _c = props.initialsColor, initialsColor = _c === void 0 ? 'white' : _c;
    return {
        root: {
            position: 'relative',
            backgroundColor: props.isPictureLoaded ? undefined : coinColor,
            color: initialsColor,
            width: size,
            height: size,
            borderRadius: '50%',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center'
        },
        initials: {
            fontSize: size / 2.5 + "px"
        },
        image: {
            position: 'absolute',
            top: 0,
            left: 0,
            width: size,
            height: size,
            borderRadius: '50%',
            overflow: 'hidden'
        },
        presence: {
            position: 'absolute',
            right: getPresenceOffsetForCoinSize(size) + "px",
            bottom: getPresenceOffsetForCoinSize(size) + "px"
        }
    };
};
function getPresenceOffsetForCoinSize(size) {
    // TODO: Tweak this as currently it's more of an approximation.
    return -(size / 15);
}
//# sourceMappingURL=PersonaCoin.styles.js.map