@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
78 lines • 2.57 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles } from '@fluentui/react';
import { CONFIGURATION_PAGE_SECTION_HEIGHT_REM, CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM, CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM } from './CallConfiguration.styles';
import { _pxToRem } from "../../../../../acs-ui-common/src";
const localPreviewContainerStyle = (theme) => ({
borderRadius: theme.effects.roundedCorner6,
overflow: 'hidden' // do not let child background overflow the curved corners
});
/**
* @private
*/
export const localPreviewContainerStyleDesktop = (theme) => mergeStyles(localPreviewContainerStyle(theme), {
width: '100%',
height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,
minWidth: `${CONFIGURATION_PAGE_SECTION_MIN_WIDTH_REM}rem`,
maxWidth: `${CONFIGURATION_PAGE_SECTION_MAX_WIDTH_REM}rem`,
border: `0.0625rem solid ${theme.palette.neutralLight}`,
borderRadius: theme.effects.roundedCorner6,
boxShadow: theme.effects.elevation4
});
/**
* @private
*/
export const localPreviewContainerStyleMobile = (theme) => mergeStyles(localPreviewContainerStyle(theme), {
width: '100%',
height: '100%',
minHeight: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`
});
/**
* @private
*/
export const cameraOffLabelStyle = mergeStyles({
fontSize: '0.75rem' // 12px
});
/**
* @private
*/
export const localPreviewTileStyle = {
root: {
'@media (forced-colors: active)': {
borderColor: '#FFFFFF',
border: '1px solid'
}
}
};
/**
* @private
*/
export const localPreviewButtonStyle = (isMobile) => {
return {
root: {
minWidth: !isMobile ? _pxToRem(75) : 'unset',
// we only want to enforce this for desktop views
'@media (forced-colors: active)': {
':focus': {
border: '1px solid !important' // we need bang important to override fluents colours
},
':focus::after': {
border: 'unset !important',
// we need bang important to override fluents colours
outline: 'unset !important'
}
}
},
rootFocused: !isMobile ? {
outline: '1px solid',
outlineOffset: '-2px'
} : {},
rootChecked: !isMobile ? {
':focus': {
outline: '1px solid',
outlineOffset: '-2px'
}
} : {}
};
};
//# sourceMappingURL=LocalPreview.styles.js.map