@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
46 lines • 1.76 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var PersonaInitialsColor_1 = require("office-ui-fabric-react/lib/components/Persona/PersonaInitialsColor");
exports.DEFAULT_PERSONA_COIN_SIZE = 48;
exports.PersonaCoinStyles = function (props, theme, tokens) {
var personaProps = {
text: props.text,
initialsColor: props.initialsColor
};
var _a = props.size, size = _a === void 0 ? exports.DEFAULT_PERSONA_COIN_SIZE : _a, _b = props.coinColor, coinColor = _b === void 0 ? PersonaInitialsColor_1.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