Stefan Hacker
130 lines
4.3 KiB
JavaScript
130 lines
4.3 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.styles = void 0;
|
|
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',
|
|
};
|
|
var styles = function (props) {
|
|
var _a;
|
|
var className = props.className, theme = props.theme, _b = props.spacingAroundItemButton, spacingAroundItemButton = _b === void 0 ? 2 : _b;
|
|
var palette = theme.palette, fonts = theme.fonts;
|
|
var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
|
|
var ItemButtonStyles = {
|
|
textAlign: 'center',
|
|
padding: 0,
|
|
borderRadius: '50%',
|
|
verticalAlign: 'top',
|
|
display: 'inline',
|
|
backgroundColor: 'transparent',
|
|
border: 'none',
|
|
selectors: {
|
|
'&::-moz-focus-inner': {
|
|
padding: 0,
|
|
border: 0,
|
|
},
|
|
},
|
|
};
|
|
return {
|
|
root: [
|
|
classNames.root,
|
|
theme.fonts.medium,
|
|
{
|
|
width: 'auto',
|
|
},
|
|
className,
|
|
],
|
|
addButton: [
|
|
classNames.addButton,
|
|
(0, Styling_1.getFocusStyle)(theme, { inset: -1 }),
|
|
ItemButtonStyles,
|
|
{
|
|
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,
|
|
(0, Styling_1.getFocusStyle)(theme, { inset: -1 }),
|
|
ItemButtonStyles,
|
|
{
|
|
fontSize: fonts.small.fontSize,
|
|
color: palette.neutralSecondary,
|
|
backgroundColor: palette.neutralLighter,
|
|
marginLeft: "".concat(spacingAroundItemButton * 2, "px"),
|
|
},
|
|
],
|
|
itemButton: [classNames.itemButton, ItemButtonStyles],
|
|
itemContainer: [
|
|
classNames.itemContainer,
|
|
{
|
|
display: 'flex',
|
|
},
|
|
],
|
|
members: [
|
|
classNames.members,
|
|
{
|
|
display: 'flex',
|
|
overflow: 'hidden',
|
|
listStyleType: 'none',
|
|
padding: 0,
|
|
margin: "-".concat(spacingAroundItemButton, "px"),
|
|
},
|
|
],
|
|
member: [
|
|
classNames.member,
|
|
{
|
|
display: 'inline-flex',
|
|
flex: '0 0 auto',
|
|
margin: "".concat(spacingAroundItemButton, "px"),
|
|
},
|
|
],
|
|
overflowButton: [
|
|
classNames.overflowButton,
|
|
(0, Styling_1.getFocusStyle)(theme, { inset: -1 }),
|
|
ItemButtonStyles,
|
|
{
|
|
fontSize: fonts.medium.fontSize,
|
|
color: palette.neutralSecondary,
|
|
backgroundColor: palette.neutralLighter,
|
|
marginLeft: "".concat(spacingAroundItemButton * 2, "px"),
|
|
},
|
|
],
|
|
overflowInitialsIcon: [
|
|
{
|
|
color: palette.neutralPrimary,
|
|
selectors: (_a = {},
|
|
_a[Styling_1.HighContrastSelector] = {
|
|
color: 'WindowText',
|
|
},
|
|
_a),
|
|
},
|
|
],
|
|
screenReaderOnly: Styling_1.hiddenContentStyle,
|
|
};
|
|
};
|
|
exports.styles = styles;
|
|
//# sourceMappingURL=Facepile.styles.js.map
|