communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
176 lines • 3.76 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { mergeStyles } from '@fluentui/react';
import { CHAT_CONTAINER_ZINDEX } from '../../ChatComposite/styles/Chat.styles';
/**
* @private
*/
export const sidePaneContainerStyles = {
root: {
height: '100%',
padding: '0.5rem 0.25rem',
width: '21.5rem'
}
};
/**
* @private
*/
export const sidePaneContainerHiddenStyles = {
root: Object.assign(Object.assign({}, sidePaneContainerStyles), { display: 'none' })
};
/**
* @private
*/
export const sidePaneContainerTokens = {
childrenGap: '0.5rem'
};
/**
* @private
*/
export const sidePaneHeaderStyles = {
root: {
lineHeight: '1.5rem',
fontSize: '1.125rem',
padding: '0.75rem 0.75rem 0.75rem 0.25rem',
fontWeight: '600'
}
};
/**
* @private
*/
export const sidePaneHeaderContainerStyles = {
root: {
margin: '0 0.25rem'
}
};
/**
* @private
*/
export const paneBodyContainer = { root: { flexDirection: 'column', display: 'flex' } };
/**
* @private
*/
export const scrollableContainer = { root: { flexBasis: '0', flexGrow: '1', overflowY: 'auto' } };
/**
* @private
*/
export const scrollableContainerContents = {
root: {
flexGrow: '1',
flexBasis: '0',
maxWidth: '100%',
// Create a new stacking context so that `pipStyles` can set zIndex above the container.
position: 'relative'
}
};
/**
* @private
*/
export const containerContextStyles = { root: { position: 'absolute', height: '100%', width: '100%' } };
/**
* @private
*/
export const peopleSubheadingStyle = {
root: {
fontSize: '0.75rem'
}
};
/**
* @private
*/
export const peoplePaneContainerTokens = {
childrenGap: '0.5rem'
};
/**
* @private
*/
export const participantListWrapper = (theme) => mergeStyles({
width: '20rem',
maxWidth: '50%',
height: '100%',
position: 'absolute',
right: '0',
boxShadow: theme.effects.elevation16,
background: theme.semanticColors.bodyBackground,
// zIndex to set the participant pane above the chat container
zIndex: CHAT_CONTAINER_ZINDEX + 1
});
/**
* @private
*/
export const participantListContainerPadding = { childrenGap: '0.5rem' };
/**
* @private
*/
export const participantListStack = mergeStyles({
height: '100%'
});
/**
* @private
*/
export const participantListContainerStyle = mergeStyles({
height: '100%',
overflowY: 'auto',
overflowX: 'hidden'
});
/**
* @private
*/
export const participantListStyle = {
root: { padding: '0rem' },
participantItemStyles: {
root: {
padding: '0.5rem'
}
}
};
/**
* @private
*/
export const participantListMobileStyle = {
root: { padding: '0rem' },
participantItemStyles: {
root: {
padding: '0.5rem 1rem'
}
}
};
/**
* @private
*/
export const displayNameStyles = {
padding: '0.5rem',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap'
};
/**
* @private
*/
export const headingMoreButtonStyles = (theme) => {
return {
root: {
height: '100%',
minWidth: '1.5rem',
padding: '0.5rem 0.25rem',
marginRight: '0.25rem',
border: 'none',
background: 'none'
},
rootHovered: {
background: 'none'
},
rootPressed: {
background: 'none'
},
rootFocused: {
background: 'none'
},
icon: {
color: theme.palette.neutralSecondary,
display: 'flex',
alignItems: 'center'
}
};
};
//# sourceMappingURL=ParticipantContainer.styles.js.map