@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
135 lines • 2.86 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { concatStyleSets, mergeStyles } from '@fluentui/react';
import { CHAT_CONTAINER_MIN_WIDTH_REM } from '../constants';
const SIDE_PANE_PADDING_LR_REM = 0.25;
/**
* @private
*/
export const mobilePaneStyle = {
root: {
width: '100%',
height: '100%'
}
};
/**
* @private
*/
export const hiddenMobilePaneStyle = concatStyleSets(mobilePaneStyle, {
root: {
display: 'none'
}
});
/**
* @private
*/
export const mobilePaneControlBarStyle = {
root: {
height: '3rem'
}
};
/**
* @private
*/
export const mobilePaneBackButtonStyles = {
root: {
border: 'none',
minWidth: '2.5rem',
maxWidth: '2.875rem',
height: '100%',
background: 'none',
padding: '0 1rem'
},
rootChecked: {
background: 'none'
},
rootCheckedHovered: {
background: 'none'
}
};
/**
* @private
*/
export const mobilePaneHiddenIconStyles = concatStyleSets(mobilePaneBackButtonStyles, {
root: {
visibility: 'hidden'
}
});
/**
* @private
*/
export const mobilePaneButtonStyles = {
root: {
border: 'none',
borderBottom: '0.125rem solid transparent',
width: '8rem',
height: '100%',
background: 'none',
padding: '0'
},
rootChecked: {
background: 'none'
},
rootCheckedHovered: {
background: 'none'
},
flexContainer: {
flexFlow: 'column',
display: 'contents'
},
label: {
fontSize: '1rem',
fontWeight: 100,
lineHeight: '2rem',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
},
labelChecked: {
fontWeight: 600
}
};
/**
* @private
*/
export const hiddenStyles = {
root: {
display: 'none'
}
};
/**
* @private
*/
export const sidePaneStyles = (maxWidth, minWidth) => ({
root: {
height: 'auto',
width: '100%',
padding: `0.5rem ${SIDE_PANE_PADDING_LR_REM}rem`,
maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : '21.5rem',
minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : `${CHAT_CONTAINER_MIN_WIDTH_REM + SIDE_PANE_PADDING_LR_REM * 2}rem`
}
});
/**
* @private
*/
export const availableSpaceStyles = {
root: {
width: '100%',
height: '100%'
}
};
/**
* @private
*/
export const sidePaneTokens = {
childrenGap: '0.5rem'
};
/** @private */
export const paneHighContrastStyles = (theme) => mergeStyles({
'@media (forced-colors: active)': {
border: `0.125rem solid ${theme.palette.black}`,
borderRadius: theme.effects.roundedCorner4,
margin: '0.5rem 0.25rem 0.5rem 0rem'
}
});
//# sourceMappingURL=Pane.styles.js.map