@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
104 lines • 2.56 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles } from '@fluentui/react';
import { _pxToRem } from "../../../../acs-ui-common/src";
/**
* @private
*/
export const iconClassName = mergeStyles({
marginRight: _pxToRem(8)
});
/**
* @private
*/
export const displayNameClassName = mergeStyles({
fontWeight: 400,
fontSize: _pxToRem(12),
lineHeight: _pxToRem(16)
});
/**
* @private
*/
export const captionClassName = mergeStyles({
fontWeight: 400,
fontSize: _pxToRem(16),
lineHeight: _pxToRem(22),
width: '100%'
});
/**
* @private
*/
export const captionsContainerClassName = mergeStyles({
height: '100%',
margin: 0,
overflow: 'auto',
padding: 0,
overflowX: 'hidden'
});
/**
* @private
*/
export const captionContainerClassName = mergeStyles({
marginTop: _pxToRem(6),
marginBottom: _pxToRem(6),
textAlign: 'unset',
// ensure RTL spoken language captions are appropriately aligned to the right
overflowAnchor: 'auto'
});
/** Reset styling set by the `ul` element */
const resetUlStyling = {
listStyleType: 'none',
padding: 0,
margin: 0
};
/**
* @private
*/
export const captionsBannerClassName = (formFactor, isExpanded) => {
return mergeStyles(Object.assign(Object.assign({}, resetUlStyling), { overflowX: 'hidden', height: formFactor === 'compact' ? isExpanded ? '40vh' : '4.5rem' : '8.75rem', overflowY: 'auto' }));
};
/**
* @private
*/
export const captionsBannerFullHeightClassName = (theme) => {
return mergeStyles(Object.assign(Object.assign({}, resetUlStyling), { overflowX: 'hidden', overflowY: 'auto', height: '100%', width: '100%', position: 'absolute', backgroundColor: theme.palette.white, left: 0 }));
};
/**
* @private
*/
export const loadingBannerStyles = (formFactor) => {
return {
root: {
height: formFactor === 'compact' ? '4.5rem' : '8.75rem'
}
};
};
/**
* @private
*/
export const loadingBannerFullHeightStyles = (theme) => {
return {
root: {
height: '100%',
width: '100%',
position: 'absolute',
left: 0,
backgroundColor: theme.palette.white
}
};
};
/**
* @private
*/
export const captionsContentContainerClassName = mergeStyles({
width: '100%',
paddingInlineEnd: _pxToRem(4)
});
/**
* @private
*/
export const displayNameContainerClassName = mergeStyles({
overflow: 'hidden',
textOverflow: 'ellipsis'
});
//# sourceMappingURL=Captions.style.js.map