| 1 | {"version":3,"file":"BasePicker.styles.js","sourceRoot":"../src/","sources":["components/pickers/BasePicker.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n getGlobalClassNames,\n getInputFocusStyle,\n getPlaceholderStyles,\n hiddenContentStyle,\n HighContrastSelector,\n} from '../../Styling';\nimport type { IBasePickerStyleProps, IBasePickerStyles } from './BasePicker.types';\nimport type { IStyle } from '../../Styling';\n\nconst GlobalClassNames = {\n root: 'ms-BasePicker',\n text: 'ms-BasePicker-text',\n itemsWrapper: 'ms-BasePicker-itemsWrapper',\n input: 'ms-BasePicker-input',\n};\n\nexport function getStyles(props: IBasePickerStyleProps): IBasePickerStyles {\n const { className, theme, isFocused, inputClassName, disabled } = props;\n\n if (!theme) {\n throw new Error('theme is undefined or null in base BasePicker getStyles function.');\n }\n const { semanticColors, effects, fonts } = theme;\n const { inputBorder, inputBorderHovered, inputFocusBorderAlt } = semanticColors;\n\n const classNames = getGlobalClassNames(GlobalClassNames, theme);\n\n // placeholder style constants\n const placeholderStyles: IStyle = [\n fonts.medium,\n {\n color: semanticColors.inputPlaceholderText,\n opacity: 1,\n selectors: {\n [HighContrastSelector]: {\n color: 'GrayText',\n },\n },\n },\n ];\n\n const disabledPlaceholderStyles: IStyle = {\n color: semanticColors.disabledText,\n selectors: {\n [HighContrastSelector]: {\n color: 'GrayText',\n },\n },\n };\n\n // The following lines are to create a semi-transparent color overlay for the disabled state with designer's approval.\n // @todo: investigate the performance cost of the calculation below and apply if negligible.\n // Replacing with a static color for now.\n // const rgbColor: IRGB | undefined = cssColor(palette.neutralQuaternaryAlt);\n // const disabledOverlayColor = rgbColor ? `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, 0.29)` : 'transparent';\n const disabledOverlayColor = 'rgba(218, 218, 218, 0.29)';\n\n return {\n root: [classNames.root, className],\n text: [\n classNames.text,\n {\n display: 'flex',\n position: 'relative',\n flexWrap: 'wrap',\n alignItems: 'center',\n boxSizing: 'border-box',\n minWidth: 180,\n minHeight: 30,\n border: `1px solid ${inputBorder}`,\n borderRadius: effects.roundedCorner2,\n },\n !isFocused &&\n !disabled && {\n selectors: {\n ':hover': {\n borderColor: inputBorderHovered,\n },\n },\n },\n isFocused && !disabled && getInputFocusStyle(inputFocusBorderAlt, effects.roundedCorner2),\n disabled && {\n borderColor: disabledOverlayColor,\n selectors: {\n ':after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n background: disabledOverlayColor,\n },\n [HighContrastSelector]: {\n borderColor: 'GrayText',\n selectors: {\n ':after': {\n background: 'none',\n },\n },\n },\n },\n },\n ],\n itemsWrapper: [\n classNames.itemsWrapper,\n {\n display: 'flex',\n flexWrap: 'wrap',\n maxWidth: '100%',\n },\n ],\n input: [\n classNames.input,\n fonts.medium,\n {\n height: 30,\n border: 'none',\n flexGrow: 1,\n outline: 'none',\n padding: '0 6px 0',\n alignSelf: 'flex-end',\n borderRadius: effects.roundedCorner2,\n backgroundColor: 'transparent',\n color: semanticColors.inputText,\n selectors: {\n '::-ms-clear': {\n display: 'none',\n },\n },\n },\n getPlaceholderStyles(placeholderStyles),\n disabled && getPlaceholderStyles(disabledPlaceholderStyles),\n inputClassName,\n ],\n screenReaderText: hiddenContentStyle,\n };\n}\n"]} |