Stefan Hacker
108 lines
4.3 KiB
JavaScript
108 lines
4.3 KiB
JavaScript
define(["require", "exports", "../../Styling"], function (require, exports, Styling_1) {
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.getStyles = exports.DocumentCardActivityGlobalClassNames = void 0;
|
|
var VERTICAL_PADDING = 8;
|
|
var HORIZONTAL_PADDING = 16;
|
|
var IMAGE_SIZE = 32;
|
|
var PERSONA_TEXT_GUTTER = 8;
|
|
exports.DocumentCardActivityGlobalClassNames = {
|
|
root: 'ms-DocumentCardActivity',
|
|
multiplePeople: 'ms-DocumentCardActivity--multiplePeople',
|
|
details: 'ms-DocumentCardActivity-details',
|
|
name: 'ms-DocumentCardActivity-name',
|
|
activity: 'ms-DocumentCardActivity-activity',
|
|
avatars: 'ms-DocumentCardActivity-avatars',
|
|
avatar: 'ms-DocumentCardActivity-avatar',
|
|
};
|
|
var getStyles = function (props) {
|
|
var theme = props.theme, className = props.className, multiplePeople = props.multiplePeople;
|
|
var palette = theme.palette, fonts = theme.fonts;
|
|
var classNames = (0, Styling_1.getGlobalClassNames)(exports.DocumentCardActivityGlobalClassNames, theme);
|
|
return {
|
|
root: [
|
|
classNames.root,
|
|
multiplePeople && classNames.multiplePeople,
|
|
{
|
|
padding: "".concat(VERTICAL_PADDING, "px ").concat(HORIZONTAL_PADDING, "px"),
|
|
position: 'relative',
|
|
},
|
|
className,
|
|
],
|
|
avatars: [
|
|
classNames.avatars,
|
|
{
|
|
marginLeft: '-2px', // Avatars sit outside of the usual padding for visual balance
|
|
height: '32px',
|
|
},
|
|
],
|
|
avatar: [
|
|
classNames.avatar,
|
|
{
|
|
display: 'inline-block',
|
|
verticalAlign: 'top',
|
|
position: 'relative',
|
|
textAlign: 'center',
|
|
width: IMAGE_SIZE,
|
|
height: IMAGE_SIZE,
|
|
selectors: {
|
|
'&:after': {
|
|
content: '" "',
|
|
position: 'absolute',
|
|
left: '-1px',
|
|
top: '-1px',
|
|
right: '-1px',
|
|
bottom: '-1px',
|
|
border: "2px solid ".concat(palette.white), // Match the background of the card
|
|
borderRadius: '50%',
|
|
},
|
|
':nth-of-type(2)': multiplePeople && {
|
|
marginLeft: '-16px',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
details: [
|
|
classNames.details,
|
|
{
|
|
left: multiplePeople
|
|
? "".concat(HORIZONTAL_PADDING + IMAGE_SIZE * 1.5 + PERSONA_TEXT_GUTTER, "px")
|
|
: "".concat(HORIZONTAL_PADDING + IMAGE_SIZE + PERSONA_TEXT_GUTTER, "px"),
|
|
height: IMAGE_SIZE,
|
|
position: 'absolute',
|
|
top: VERTICAL_PADDING,
|
|
width: "calc(100% - ".concat(HORIZONTAL_PADDING + IMAGE_SIZE + PERSONA_TEXT_GUTTER + HORIZONTAL_PADDING, "px)"),
|
|
},
|
|
],
|
|
name: [
|
|
classNames.name,
|
|
{
|
|
display: 'block',
|
|
fontSize: fonts.small.fontSize,
|
|
lineHeight: '15px',
|
|
height: '15px',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
color: palette.neutralPrimary,
|
|
fontWeight: Styling_1.FontWeights.semibold,
|
|
},
|
|
],
|
|
activity: [
|
|
classNames.activity,
|
|
{
|
|
display: 'block',
|
|
fontSize: fonts.small.fontSize,
|
|
lineHeight: '15px',
|
|
height: '15px',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
color: palette.neutralSecondary,
|
|
},
|
|
],
|
|
};
|
|
};
|
|
exports.getStyles = getStyles;
|
|
});
|
|
//# sourceMappingURL=DocumentCardActivity.styles.js.map
|