in packages/react-components/src/components/styles/ChatMessageComponent.styles.ts [53:148]
strokeWidth: _pxToRem(0.5)
}
}
});
/**
* @private
*/
export const chatMessageDateStyle = (theme: Theme): string =>
mergeStyles({
color: theme.palette.neutralSecondary,
fontWeight: FontWeights.regular,
fontSize: '0.75rem'
});
/**
* @private
*/
export const chatMessageAuthorStyle = mergeStyles({ fontWeight: FontWeights.semibold, fontSize: '0.75rem' });
/**
* @private
*/
export const chatMessageDateFailedStyle = (theme: Theme): string =>
mergeStyles({
color: theme.palette.neutralPrimaryAlt,
fontWeight: FontWeights.regular,
fontSize: '0.75rem'
});
/**
* @private
*/
export const chatMessageEditedTagStyle = (theme: Theme): string =>
mergeStyles({ fontWeight: FontWeights.semibold, color: theme.palette.neutralSecondary });
/**
* @private
*/
export const chatMessageFailedTagStyle = (theme: Theme): string =>
mergeStyles({
fontWeight: FontWeights.regular,
color: theme.semanticColors.errorText,
fontSize: theme.fonts.smallPlus.fontSize,
lineHeight: '1rem'
});
/**
* @private
*/
export const editChatMessageFailedTagStyle = mergeStyles({
marginBottom: '0.5rem'
});
/**
* @private
*/
export const chatMessageFailedTagStackItemStyle = mergeStyles({
alignSelf: 'end'
});
/**
* @private
*/
export const editChatMessageButtonsStackStyle = mergeStyles({
padding: '0 0.5rem',
marginTop: '-0.25rem'
});
/**
* @private
*/
export const chatMessageMenuStyle = mergeStyles({
minWidth: '8.5rem',
height: 'max-content',
cursor: 'pointer',
overflow: 'hidden',
'-webkit-tap-highlight-color': 'transparent' // Disable tap highlight on Android
});
/**
* @private
*/
export const useChatMessageEditContainerStyles = makeStyles({
body: {
...shorthands.padding(0),
backgroundColor: 'transparent',
boxSizing: 'border-box',
...shorthands.border(`${defaultSendBoxInactiveBorderThicknessREM}rem`, 'solid'),
...shorthands.borderRadius(tokens.borderRadiusMedium),
// The border thickness changes on hover, to prevent the border thickness change causing the
// input box to shift we apply a margin to compensate. This margin is then removed on hover when the border is thicker.
...shorthands.margin('21px', '1px', '1px', '1px'),
// Width should be updated on hover to include the border width change
width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`,
'&:hover, &:active, &:focus, &:focus-within': {