communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
154 lines • 3.5 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
/**
* @private
*/
export const controlBarStyles = {
horizontal: {
flexFlow: 'row nowrap'
},
vertical: {
flexFlow: 'column nowrap',
width: 'fit-content',
maxWidth: '8rem'
},
dockedTop: {
flexFlow: 'row nowrap',
justifyContent: 'center',
overflow: 'hidden',
position: 'absolute',
top: 0,
left: 0,
width: '100%',
minWidth: 'fit-content'
},
dockedBottom: {
flexFlow: 'row nowrap',
justifyContent: 'center',
overflow: 'hidden',
position: 'absolute',
bottom: 0,
left: 0,
width: '100%',
minWidth: 'fit-content'
},
dockedLeft: {
justifyContent: 'center',
overflow: 'hidden',
position: 'absolute',
top: 0,
left: 0,
height: '100%'
},
dockedRight: {
justifyContent: 'center',
overflow: 'hidden',
position: 'absolute',
top: 0,
right: 0,
height: '100%'
},
floatingTop: {
flexFlow: 'row nowrap',
justifyContent: 'center',
overflow: 'hidden',
position: 'absolute',
top: '1rem',
left: '50%',
transform: 'translateX(-50%)',
minWidth: 'fit-content',
zIndex: 10
},
floatingBottom: {
flexFlow: 'row nowrap',
justifyContent: 'center',
overflow: 'hidden',
position: 'absolute',
bottom: '1rem',
left: '50%',
transform: 'translateX(-50%)',
minWidth: 'fit-content',
zIndex: 10
},
floatingLeft: {
flexFlow: 'column nowrap',
justifyContent: 'center',
overflow: 'hidden',
position: 'absolute',
top: '50%',
left: '1rem',
transform: 'translateY(-50%)',
zIndex: 10
},
floatingRight: {
flexFlow: 'column nowrap',
justifyContent: 'center',
overflow: 'hidden',
position: 'absolute',
top: '50%',
right: '1rem',
transform: 'translateY(-50%)',
zIndex: 10
}
};
/**
* @private
*/
export const controlButtonStyles = {
root: {
background: 'none',
border: 'none',
borderRadius: 0,
minHeight: '3.5rem',
minWidth: '3.5rem',
width: '100%',
maxWidth: '8rem',
svg: {
verticalAlign: 'text-top'
}
},
splitButtonMenuButton: {
border: 'none'
},
flexContainer: {
display: 'unset'
},
label: {
fontSize: '0.625rem',
fontWeight: '400',
lineHeight: '1rem',
cursor: 'pointer',
display: 'block',
margin: '0rem 0.25rem',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}
};
/**
* making it Partial as IContextualMenuStyles has all its props non-optional and we only need title to be defined here.
*
* @private
*/
export const participantsButtonMenuPropsStyle = {
title: {
background: 'initial',
paddingLeft: '.5rem',
fontWeight: 600,
fontSize: '.75rem'
}
};
/**
* Default styles for button flyout items
*
* @private
*/
export const buttonFlyoutItemStyles = {
icon: {
lineHeight: 0
},
checkmarkIcon: {
lineHeight: 0
}
};
//# sourceMappingURL=ControlBar.styles.js.map