communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
191 lines • 4.12 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
/**
* @private
*/
export const cancelIcon = { iconName: 'Cancel' };
/**
* @private
*/
export const downloadIcon = {
iconName: 'Download'
};
/**
* @private
*/
export const overlayStyles = (theme) => {
var _a;
return {
root: {
background: (_a = theme.semanticColors) === null || _a === void 0 ? void 0 : _a.bodyBackground
}
};
};
/**
* @private
*/
export const focusTrapZoneStyle = {
boxShadow: 'none',
background: 'transparent',
display: 'flex',
width: '100%',
height: '100%',
maxWidth: '100%',
maxHeight: '100%'
};
/**
* @private
*/
export const scrollableContentStyle = {
overflowY: 'hidden',
display: 'flex',
maxWidth: '100%',
maxHeight: '100%',
flexDirection: 'column',
flexWrap: 'nowrap'
};
/**
* @private
*/
export const themeProviderRootStyle = {
background: 'transparent',
display: 'flex',
flexDirection: 'column'
};
/**
* @private
*/
export const headerStyle = {
fontSize: 'inherit',
margin: '0',
width: '100%',
minHeight: '3.5rem',
flexDirection: 'row',
justifyContent: 'space-between',
padding: '0.25rem 0.75rem'
};
/**
* @private
*/
export const titleBarContainerStyle = {
flexDirection: 'row',
justifyContent: 'start',
alignContent: 'center',
alignItems: 'center'
};
/**
* @private
*/
export const titleStyle = (theme) => {
var _a;
return {
paddingLeft: '0.5rem',
color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
fontFamily: 'inherit',
fontSize: '0.875rem',
fontStyle: 'normal',
fontWeight: '600',
lineHeight: '1.25rem'
};
};
/**
* @private
*/
export const controlBarContainerStyle = {
flexDirection: 'row',
justifyContent: 'start',
flexWrap: 'wrap',
alignContent: 'center',
alignItems: 'center'
};
/**
* @private
*/
export const downloadIconStyle = {
marginRight: '0.5em',
fontSize: '0.875rem' // 14px
};
/**
* @private
*/
export const bodyContainer = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
overflow: 'hidden',
padding: '1rem 2rem 3rem 2rem',
'@media (max-width: 25rem) or (max-height: 25rem)': {
padding: '0rem 1rem 2rem 1rem'
}
};
/**
* @private
*/
export const normalImageStyle = {
objectFit: 'contain',
maxHeight: '100%',
maxWidth: '100%'
};
/**
* @private
*/
export const brokenImageStyle = (theme) => {
var _a;
return {
color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black
};
};
/**
* @private
*/
export const closeButtonStyles = (theme) => {
var _a, _b, _c;
return {
color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
':hover': {
color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black
},
':active': {
color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.black
}
};
};
/**
* @private
*/
export const downloadButtonStyle = {
margin: '0 0.5rem',
height: '32px',
borderWidth: '1px',
fontSize: '0.875rem', // 14px
fontWeight: 600,
padding: '0.38rem 0.75rem',
borderRadius: '4px',
whiteSpace: 'nowrap',
'@media (max-width: 25rem)': {
display: 'none'
}
};
/**
* @private
*/
export const smallDownloadButtonContainerStyle = (theme) => {
var _a, _b, _c;
return {
marginRight: '0.5rem',
whiteSpace: 'nowrap',
color: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.black,
':hover': {
color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black
},
':active': {
color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.black
},
'@media (min-width: 25rem)': {
display: 'none'
}
};
};
//# sourceMappingURL=ImageOverlay.style.js.map