office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
138 lines • 4.87 kB
JavaScript
import { hiddenContentStyle, getFocusStyle, getGlobalClassNames } from '../../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'
};
export var 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 = 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,
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,
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,
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: hiddenContentStyle
};
};
//# sourceMappingURL=Facepile.styles.js.map