| 1 | {"version":3,"file":"MessageBar.styles.js","sourceRoot":"../src/","sources":["components/MessageBar/MessageBar.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n HighContrastSelector,\n ScreenWidthMaxSmall,\n getScreenSelector,\n getGlobalClassNames,\n getFocusStyle,\n IconFontSizes,\n getHighContrastNoAdjustStyle,\n} from '../../Styling';\nimport { MessageBarType } from './MessageBar.types';\nimport type { IStyle, ISemanticColors } from '../../Styling';\nimport type { IMessageBarStyleProps, IMessageBarStyles } from './MessageBar.types';\n\nconst GlobalClassNames = {\n root: 'ms-MessageBar',\n error: 'ms-MessageBar--error',\n blocked: 'ms-MessageBar--blocked',\n severeWarning: 'ms-MessageBar--severeWarning',\n success: 'ms-MessageBar--success',\n warning: 'ms-MessageBar--warning',\n multiline: 'ms-MessageBar-multiline',\n singleline: 'ms-MessageBar-singleline',\n dismissalSingleLine: 'ms-MessageBar-dismissalSingleLine',\n expandingSingleLine: 'ms-MessageBar-expandingSingleLine',\n content: 'ms-MessageBar-content',\n iconContainer: 'ms-MessageBar-icon',\n text: 'ms-MessageBar-text',\n innerText: 'ms-MessageBar-innerText',\n dismissSingleLine: 'ms-MessageBar-dismissSingleLine',\n expandSingleLine: 'ms-MessageBar-expandSingleLine',\n dismissal: 'ms-MessageBar-dismissal',\n expand: 'ms-MessageBar-expand',\n actions: 'ms-MessageBar-actions',\n actionsSingleline: 'ms-MessageBar-actionsSingleLine',\n};\n\nconst backgroundColor: { [key: string]: keyof ISemanticColors } = {\n [MessageBarType.error]: 'errorBackground',\n [MessageBarType.blocked]: 'errorBackground',\n [MessageBarType.success]: 'successBackground',\n [MessageBarType.warning]: 'warningBackground',\n [MessageBarType.severeWarning]: 'severeWarningBackground',\n [MessageBarType.info]: 'infoBackground',\n};\n\nconst highContrastBackgroundColor: { [key: string]: string } = {\n [MessageBarType.error]: 'rgba(255, 0, 0, 0.3)',\n [MessageBarType.blocked]: 'rgba(255, 0, 0, 0.3)',\n [MessageBarType.success]: 'rgba(48, 241, 73, 0.3)',\n [MessageBarType.warning]: 'rgba(255, 254, 57, 0.3)',\n [MessageBarType.severeWarning]: 'rgba(255, 0, 0, 0.3)',\n [MessageBarType.info]: 'Window',\n};\n\nconst iconColor: { [key: string]: keyof ISemanticColors } = {\n [MessageBarType.error]: 'errorIcon',\n [MessageBarType.blocked]: 'errorIcon',\n [MessageBarType.success]: 'successIcon',\n [MessageBarType.warning]: 'warningIcon',\n [MessageBarType.severeWarning]: 'severeWarningIcon',\n [MessageBarType.info]: 'infoIcon',\n};\n\nexport const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => {\n const {\n theme,\n className,\n onDismiss,\n truncated,\n isMultiline,\n expandSingleLine,\n messageBarType = MessageBarType.info,\n } = props;\n const { semanticColors, fonts } = theme;\n\n const SmallScreenSelector = getScreenSelector(0, ScreenWidthMaxSmall);\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n const dismissalAndExpandIconStyle: IStyle = {\n fontSize: IconFontSizes.xSmall,\n height: 10,\n lineHeight: '10px',\n color: semanticColors.messageText,\n selectors: {\n [HighContrastSelector]: {\n ...getHighContrastNoAdjustStyle(),\n color: 'WindowText',\n },\n },\n };\n\n const dismissalAndExpandStyle: IStyle = [\n getFocusStyle(theme, {\n inset: 1,\n highContrastStyle: {\n outlineOffset: '-6px',\n outline: '1px solid Highlight',\n },\n borderColor: 'transparent',\n }),\n {\n flexShrink: 0,\n width: 32,\n height: 32,\n padding: '8px 12px',\n selectors: {\n '& .ms-Button-icon': dismissalAndExpandIconStyle,\n ':hover': {\n backgroundColor: 'transparent',\n },\n ':active': {\n backgroundColor: 'transparent',\n },\n },\n },\n ];\n\n return {\n root: [\n classNames.root,\n fonts.medium,\n messageBarType === MessageBarType.error && classNames.error,\n messageBarType === MessageBarType.blocked && classNames.blocked,\n messageBarType === MessageBarType.severeWarning && classNames.severeWarning,\n messageBarType === MessageBarType.success && classNames.success,\n messageBarType === MessageBarType.warning && classNames.warning,\n isMultiline ? classNames.multiline : classNames.singleline,\n !isMultiline && onDismiss && classNames.dismissalSingleLine,\n !isMultiline && truncated && classNames.expandingSingleLine,\n {\n background: semanticColors[backgroundColor[messageBarType]],\n color: semanticColors.messageText,\n minHeight: 32,\n width: '100%',\n display: 'flex',\n wordBreak: 'break-word',\n selectors: {\n '.ms-Link': {\n color: semanticColors.messageLink,\n selectors: {\n ':hover': {\n color: semanticColors.messageLinkHovered,\n },\n },\n },\n [HighContrastSelector]: {\n ...getHighContrastNoAdjustStyle(),\n background: highContrastBackgroundColor[messageBarType],\n border: '1px solid WindowText',\n color: 'WindowText',\n },\n },\n },\n isMultiline && {\n flexDirection: 'column',\n },\n className,\n ],\n content: [\n classNames.content,\n {\n display: 'flex',\n width: '100%',\n lineHeight: 'normal',\n },\n ],\n iconContainer: [\n classNames.iconContainer,\n {\n fontSize: IconFontSizes.medium,\n minWidth: 16,\n minHeight: 16,\n display: 'flex',\n flexShrink: 0,\n margin: '8px 0 8px 12px',\n },\n ],\n icon: {\n color: semanticColors[iconColor[messageBarType]],\n selectors: {\n [HighContrastSelector]: {\n ...getHighContrastNoAdjustStyle(),\n color: 'WindowText',\n },\n },\n },\n text: [\n classNames.text,\n {\n minWidth: 0,\n display: 'flex',\n flexGrow: 1,\n margin: 8,\n ...fonts.small,\n selectors: {\n [HighContrastSelector]: {\n ...getHighContrastNoAdjustStyle(),\n },\n },\n },\n !onDismiss && {\n marginRight: 12,\n },\n ],\n innerText: [\n classNames.innerText,\n {\n lineHeight: 16,\n selectors: {\n '& span a:last-child': {\n paddingLeft: 4,\n },\n },\n },\n truncated && {\n overflow: 'visible',\n whiteSpace: 'pre-wrap',\n },\n !isMultiline && {\n // In high contrast this causes the top and bottom of links' focus outline to be clipped\n // (not sure of a good way around that while still maintaining text clipping)\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n !isMultiline &&\n !truncated && {\n selectors: {\n [SmallScreenSelector]: {\n overflow: 'visible',\n whiteSpace: 'pre-wrap',\n },\n },\n },\n expandSingleLine && {\n overflow: 'visible',\n whiteSpace: 'pre-wrap',\n },\n ],\n dismissSingleLine: classNames.dismissSingleLine,\n expandSingleLine: classNames.expandSingleLine,\n dismissal: [classNames.dismissal, dismissalAndExpandStyle],\n expand: [classNames.expand, dismissalAndExpandStyle],\n actions: [\n isMultiline ? classNames.actions : classNames.actionsSingleline,\n {\n display: 'flex',\n flexGrow: 0,\n flexShrink: 0,\n flexBasis: 'auto',\n flexDirection: 'row-reverse',\n alignItems: 'center',\n margin: '0 12px 0 8px',\n selectors: {\n '& button:nth-child(n+2)': {\n marginLeft: 8,\n },\n },\n },\n isMultiline && {\n marginBottom: 8,\n },\n onDismiss &&\n !isMultiline && {\n marginRight: 0,\n },\n ],\n };\n};\n"]} |