@fluentui/react-northstar
Version:
A themable React component library.
67 lines (66 loc) • 3.12 kB
JavaScript
import { chatMessageSlotClassNames } from '../../../../components/Chat/ChatMessage';
import { pxToRem } from '../../../../utils';
import { screenReaderContainerStyles } from '../../../../utils/accessibility/Styles/accessibilityStyles';
/** ChatMessage styles specific for the default/comfy density. */
export var chatMessageStylesComfy = {
root: function root(_ref) {
var _ref2, _ref3, _ref4, _ref5;
var p = _ref.props,
v = _ref.variables;
return Object.assign({
marginLeft: p.mine ? v.offset : 0,
marginRight: !p.mine ? v.offset : 0,
maxWidth: "calc(100% - " + v.offset + ")",
minWidth: v.offset,
paddingLeft: v.padding,
paddingRight: v.padding,
paddingTop: pxToRem(8),
paddingBottom: pxToRem(10),
backgroundColor: p.mine ? v.backgroundColorMine : v.backgroundColor,
border: v.border
}, (v.hasMention || v.isImportant) && (_ref2 = {}, _ref2["& ." + chatMessageSlotClassNames.bar] = {
backgroundColor: v.hasMention ? v.hasMentionColor : v.isImportantColor,
position: 'absolute',
borderBottomLeftRadius: 'inherit',
borderTopLeftRadius: 'inherit',
height: '100%',
left: '0',
top: '0',
width: pxToRem(3)
}, _ref2), p.attached === true && (_ref3 = {}, _ref3[p.mine ? 'borderTopRightRadius' : 'borderTopLeftRadius'] = 0, _ref3[p.mine ? 'borderBottomRightRadius' : 'borderBottomLeftRadius'] = 0, _ref3.paddingTop = pxToRem(5), _ref3.paddingBottom = pxToRem(7), _ref3), p.attached === 'top' && (_ref4 = {}, _ref4[p.mine ? 'borderBottomRightRadius' : 'borderBottomLeftRadius'] = 0, _ref4), p.attached === 'bottom' && (_ref5 = {}, _ref5[p.mine ? 'borderTopRightRadius' : 'borderTopLeftRadius'] = 0, _ref5.paddingTop = pxToRem(5), _ref5.paddingBottom = pxToRem(7), _ref5));
},
author: function author(_ref6) {
var p = _ref6.props,
v = _ref6.variables;
return Object.assign({}, (p.mine || p.attached === 'bottom' || p.attached === true) && screenReaderContainerStyles, {
color: v.authorColor,
fontWeight: v.authorFontWeight,
marginRight: v.authorMarginRight,
marginBottom: v.headerMarginBottom
});
},
badge: function badge(_ref7) {
var _ref8;
var p = _ref7.props;
return _ref8 = {}, _ref8[p.badgePosition === 'start' ? 'left' : 'right'] = 0, _ref8.transform = p.badgePosition === 'start' ? 'translateX(-50%)' : 'translateX(50%)', _ref8.top = pxToRem(4), _ref8.position = 'absolute', _ref8;
},
reactionGroup: function reactionGroup(_ref9) {
var p = _ref9.props,
v = _ref9.variables;
return Object.assign({
marginLeft: v.reactionGroupMarginLeft
}, p.hasBadge && p.badgePosition === 'end' && {
marginRight: pxToRem(2)
}, {
float: 'right'
});
},
timestamp: function timestamp(_ref10) {
var p = _ref10.props,
v = _ref10.variables;
return Object.assign({
marginBottom: v.headerMarginBottom
}, (p.attached === 'bottom' || p.attached === true) && !p.hasHeaderReactionGroup && screenReaderContainerStyles);
}
};
//# sourceMappingURL=chatMessageStylesComfy.js.map