@fluentui/react-northstar
Version:
A themable React component library.
83 lines (82 loc) • 2.69 kB
JavaScript
import { chatMessageSlotClassNames } from '../../../../components/Chat/ChatMessage';
import { pxToRem } from '../../../../utils';
import { screenReaderContainerStyles } from '../../../../utils/accessibility/Styles/accessibilityStyles';
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
/** ChatMessage styles specific for the compact density. */
export var chatMessageStylesCompact = {
root: function root(_ref) {
var _highlight, _ref2;
var siteVariables = _ref.theme.siteVariables,
v = _ref.variables;
var borderFocusStyles = getBorderFocusStyles({
borderRadius: 'inherit',
variables: siteVariables
});
var highlight = (_highlight = {
backgroundColor: v.compactHoverBackground,
border: v.compactHoverBorder
}, _highlight["& ." + chatMessageSlotClassNames.timestamp] = {
opacity: 1
}, _highlight);
return Object.assign({
border: v.compactBorder,
padding: v.paddingCompact,
width: '100%'
}, (v.hasMention || v.isImportant) && (_ref2 = {}, _ref2["& ." + chatMessageSlotClassNames.bar] = {
backgroundColor: v.hasMention ? v.hasMentionColor : v.isImportantColor,
position: 'absolute',
borderRadius: pxToRem(2),
height: pxToRem(20),
left: pxToRem(-56),
top: v.paddingCompact,
width: pxToRem(2)
}, _ref2), {
':focus-visible': Object.assign({}, borderFocusStyles[':focus-visible'], highlight),
'&:hover': highlight
});
},
author: function author(_ref3) {
var p = _ref3.props,
v = _ref3.variables;
return Object.assign({}, (p.attached === 'bottom' || p.attached === true) && screenReaderContainerStyles, {
color: p.mine ? v.authorColorMineCompact : v.contentColor,
float: 'left',
fontWeight: v.authorFontWeightCompact,
marginRight: v.authorMarginRightCompact
});
},
badge: function badge(_ref4) {
var v = _ref4.variables;
return {
alignSelf: 'flex-start',
flexShrink: 0,
margin: pxToRem(-2) + " " + pxToRem(-2) + " " + pxToRem(-2) + " " + v.compactSpacing
};
},
compactBody: function compactBody() {
return {
display: 'flex',
justifyContent: 'space-between',
'& > div': {
minWidth: 0
}
};
},
reactionGroup: function reactionGroup() {
return {
display: 'flex',
marginTop: pxToRem(4)
};
},
timestamp: function timestamp(_ref5) {
var v = _ref5.variables;
return {
alignSelf: 'flex-start',
flexShrink: 0,
marginLeft: v.compactSpacing,
marginTop: pxToRem(2),
opacity: 0
};
}
};
//# sourceMappingURL=chatMessageStylesCompact.js.map