office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
170 lines • 7.21 kB
JavaScript
import { FontSizes, HighContrastSelector, getGlobalClassNames } from '../../../Styling';
import { personaPresenceSize, presenceBoolean, sizeBoolean } from '../PersonaConsts';
var GlobalClassNames = {
presence: 'ms-Persona-presence',
presenceIcon: 'ms-Persona-presenceIcon'
};
export var getStyles = function (props) {
var theme = props.theme;
var semanticColors = theme.semanticColors;
var classNames = getGlobalClassNames(GlobalClassNames, theme);
var size = sizeBoolean(props.size);
var presence = presenceBoolean(props.presence);
// Presence colors
var presenceColorAvailable = '#7FBA00';
var presenceColorAway = '#FCD116';
var presenceColorBusy = '#D93B3B';
var presenceColorDnd = '#E81123';
var presenceColorOffline = '#93ABBD';
return {
presence: [
classNames.presence,
{
position: 'absolute',
height: personaPresenceSize.size12,
width: personaPresenceSize.size12,
borderRadius: '50%',
top: 'auto',
right: "-" + personaPresenceSize.border,
bottom: "-" + personaPresenceSize.border,
border: personaPresenceSize.border + " solid " + semanticColors.bodyBackground,
textAlign: 'center',
boxSizing: 'content-box',
backgroundClip: 'content-box',
MsHighContrastAdjust: 'none',
selectors: (_a = {},
_a[HighContrastSelector] = {
borderColor: 'Window',
backgroundColor: 'WindowText'
},
_a)
},
size.isSize10 && {
right: 'auto',
top: '7px',
left: 0,
border: 0,
selectors: (_b = {},
_b[HighContrastSelector] = {
top: '9px',
border: '1px solid WindowText'
},
_b)
},
(size.isSize10 || size.isSize24 || size.isSize28 || size.isSize32) && {
height: personaPresenceSize.size8,
width: personaPresenceSize.size8
},
size.isSize16 && {
height: personaPresenceSize.size6,
width: personaPresenceSize.size6,
borderWidth: '1.5px'
},
size.isSize72 && {
height: personaPresenceSize.size20,
width: personaPresenceSize.size20
},
size.isSize100 && {
height: personaPresenceSize.size28,
width: personaPresenceSize.size28
},
presence.isAvailable && {
backgroundColor: presenceColorAvailable,
selectors: (_c = {},
_c[HighContrastSelector] = {
backgroundColor: 'Highlight'
},
_c)
},
presence.isAway && {
backgroundColor: presenceColorAway
},
presence.isBlocked && [
{
backgroundColor: semanticColors.bodyBackground,
selectors: (_d = {
':before': {
content: '""',
width: '100%',
height: '100%',
position: 'absolute',
top: 0,
left: 0,
border: personaPresenceSize.border + " solid " + presenceColorBusy,
borderRadius: '50%',
boxSizing: 'border-box'
},
// Only show :after at larger sizes
':after': size.isSize40 || size.isSize48 || size.isSize72 || size.isSize100
? {
content: '""',
width: '100%',
height: personaPresenceSize.border,
backgroundColor: presenceColorBusy,
transform: 'translateY(-50%) rotate(-45deg)',
position: 'absolute',
top: '50%',
left: 0
}
: undefined
},
_d[HighContrastSelector] = {
backgroundColor: 'WindowText',
selectors: {
':before': {
width: "calc(100% - " + personaPresenceSize.border + ")",
height: "calc(100% - " + personaPresenceSize.border + ")",
top: parseFloat(personaPresenceSize.border) / 2 + 'px',
left: parseFloat(personaPresenceSize.border) / 2 + 'px',
borderColor: 'Window'
},
':after': {
width: "calc(100% - " + parseFloat(personaPresenceSize.border) * 2 + "px)",
left: personaPresenceSize.border,
backgroundColor: 'Window'
}
}
},
_d)
}
],
presence.isBusy && {
backgroundColor: presenceColorBusy
},
presence.isDoNotDisturb && {
backgroundColor: presenceColorDnd
},
presence.isOffline && {
backgroundColor: presenceColorOffline
}
],
presenceIcon: [
classNames.presenceIcon,
{
color: semanticColors.bodyBackground,
fontSize: '6px',
lineHeight: personaPresenceSize.size12,
verticalAlign: 'top',
selectors: (_e = {},
_e[HighContrastSelector] = {
color: 'Window'
},
_e)
},
size.isSize72 && {
fontSize: FontSizes.small,
lineHeight: personaPresenceSize.size20
},
size.isSize100 && {
fontSize: FontSizes.medium,
lineHeight: personaPresenceSize.size28
},
presence.isAway && {
position: 'relative',
left: '1px'
}
]
};
var _a, _b, _c, _d, _e;
};
//# sourceMappingURL=PersonaPresence.styles.js.map