communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
106 lines • 3.28 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles } from '@fluentui/react';
import { makeStyles } from '@fluentui/react-components';
/**
* @private
*/
export const suppressIconStyle = {
iconContainer: { minHeight: '0', minWidth: '0', height: '0', width: '0', margin: '0' },
icon: { display: 'none' }
};
/**
* @private
*/
export const sendBoxWrapperStyles = mergeStyles({
margin: '0.25rem',
overflow: 'hidden',
/**
* margin-top set for all the child components of sendbox except first
*/
':not(:first-child)': {
marginTop: '0.25rem'
}
});
/**
* @private
*/
export const sendButtonStyle = mergeStyles({
height: '2.25rem',
width: '2.25rem'
});
/**
* @private
*/
export const sendIconStyle = (props) => {
const { theme, isSendBoxButtonDisabled, customSendIconStyle, defaultTextColor = theme.palette.neutralTertiary } = props;
return mergeStyles(editorTextBoxButtonStyle, {
color: isSendBoxButtonDisabled ? defaultTextColor : theme.palette.themePrimary
}, customSendIconStyle);
};
/**
* @private
*/
export const editorTextBoxButtonStyle = {
width: '1.25rem',
height: '1.25rem',
margin: 'auto'
};
/**
* @private
*/
export const attachmentUploadCardsStyles = mergeStyles({
margin: '0 0.25rem 0.25rem 0.25rem',
overflow: 'auto'
});
/**
* @private
*/
export const useV9CustomStyles = makeStyles({
clearBackground: {
backgroundColor: 'transparent'
}
});
/**
* @private
*/
export const attachmentCardBoxStyle = mergeStyles({
width: '100%',
padding: '0.50rem'
});
/**
* @private
*/
export const defaultSendBoxInactiveBorderThicknessREM = 0.0625;
/**
* @private
*/
export const defaultSendBoxActiveBorderThicknessREM = 0.125;
/**
* @private
*/
export const borderAndBoxShadowStyle = (props) => {
return mergeStyles(borderEditBoxStyle(Object.assign(Object.assign({}, props), { defaultBorderColor: props.theme.palette.neutralSecondary })));
};
/**
* @private
*/
export const borderEditBoxStyle = (props) => {
const { theme, hasErrorMessage, disabled, defaultBorderColor } = props;
const borderColor = hasErrorMessage ? theme.semanticColors.errorText : defaultBorderColor;
const borderColorActive = hasErrorMessage ? theme.semanticColors.errorText : theme.palette.themePrimary;
const borderThickness = disabled ? 0 : defaultSendBoxInactiveBorderThicknessREM;
const borderActiveThickness = disabled ? 0 : defaultSendBoxActiveBorderThicknessREM;
return {
borderRadius: theme.effects.roundedCorner4,
border: `${borderThickness}rem solid ${borderColor}`,
// The border thickness of the sendbox wrapper 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.
margin: `${defaultSendBoxActiveBorderThicknessREM - borderThickness}rem`,
':hover, :active, :focus, :focus-within': {
border: `${borderActiveThickness}rem solid ${borderColorActive}`,
margin: `${defaultSendBoxActiveBorderThicknessREM - borderActiveThickness}rem`
}
};
};
//# sourceMappingURL=SendBox.styles.js.map