@fluentui/react-northstar
Version:
A themable React component library.
88 lines (86 loc) • 2.98 kB
JavaScript
;
exports.__esModule = true;
exports.chatMessageStylesCompact = void 0;
var _ChatMessage = require("../../../../components/Chat/ChatMessage");
var _utils = require("../../../../utils");
var _accessibilityStyles = require("../../../../utils/accessibility/Styles/accessibilityStyles");
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
/** ChatMessage styles specific for the compact density. */
var chatMessageStylesCompact = {
root: function root(_ref) {
var _highlight, _ref2;
var siteVariables = _ref.theme.siteVariables,
v = _ref.variables;
var borderFocusStyles = (0, _getBorderFocusStyles.getBorderFocusStyles)({
borderRadius: 'inherit',
variables: siteVariables
});
var highlight = (_highlight = {
backgroundColor: v.compactHoverBackground,
border: v.compactHoverBorder
}, _highlight["& ." + _ChatMessage.chatMessageSlotClassNames.timestamp] = {
opacity: 1
}, _highlight);
return Object.assign({
border: v.compactBorder,
padding: v.paddingCompact,
width: '100%'
}, (v.hasMention || v.isImportant) && (_ref2 = {}, _ref2["& ." + _ChatMessage.chatMessageSlotClassNames.bar] = {
backgroundColor: v.hasMention ? v.hasMentionColor : v.isImportantColor,
position: 'absolute',
borderRadius: (0, _utils.pxToRem)(2),
height: (0, _utils.pxToRem)(20),
left: (0, _utils.pxToRem)(-56),
top: v.paddingCompact,
width: (0, _utils.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) && _accessibilityStyles.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: (0, _utils.pxToRem)(-2) + " " + (0, _utils.pxToRem)(-2) + " " + (0, _utils.pxToRem)(-2) + " " + v.compactSpacing
};
},
compactBody: function compactBody() {
return {
display: 'flex',
justifyContent: 'space-between',
'& > div': {
minWidth: 0
}
};
},
reactionGroup: function reactionGroup() {
return {
display: 'flex',
marginTop: (0, _utils.pxToRem)(4)
};
},
timestamp: function timestamp(_ref5) {
var v = _ref5.variables;
return {
alignSelf: 'flex-start',
flexShrink: 0,
marginLeft: v.compactSpacing,
marginTop: (0, _utils.pxToRem)(2),
opacity: 0
};
}
};
exports.chatMessageStylesCompact = chatMessageStylesCompact;
//# sourceMappingURL=chatMessageStylesCompact.js.map