office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
324 lines • 12.3 kB
JavaScript
import { FontSizes, FontWeights, concatStyleSets, getFocusStyle, HighContrastSelector } from '../../Styling';
import { memoizeFunction } from '../../Utilities';
var ComboBoxHeight = '32px';
var ComboBoxLineHeight = '30px';
var ComboxBoxCaretDownWidth = '32px';
var ComboBoxOptionHeight = '32px';
var getDisabledStyles = memoizeFunction(function (theme) {
var semanticColors = theme.semanticColors;
return {
backgroundColor: semanticColors.disabledBackground,
borderColor: semanticColors.disabledBackground,
color: semanticColors.disabledText,
cursor: 'default',
selectors: (_a = {},
_a[HighContrastSelector] = {
borderColor: 'GrayText',
color: 'GrayText'
},
_a)
};
var _a;
});
var getListOptionHighContrastStyles = memoizeFunction(function (theme) {
return {
selectors: (_a = {},
_a[HighContrastSelector] = {
backgroundColor: 'Highlight',
borderColor: 'Highlight',
color: 'HighlightText',
MsHighContrastAdjust: 'none'
},
_a)
};
var _a;
});
export var getOptionStyles = memoizeFunction(function (theme, customStylesForAllOptions, customOptionStylesForCurrentOption, isPending) {
var semanticColors = theme.semanticColors, palette = theme.palette;
var ComboBoxOptionBackgroundHovered = semanticColors.menuItemBackgroundHovered;
var ComboBoxOptionTextColorHovered = semanticColors.bodyText;
var ComboBoxOptionTextColorSelected = palette.black;
var ComboBoxOptionTextColorDisabled = semanticColors.disabledText;
var ComboBoxOptionBackgroundDisabled = semanticColors.bodyBackground;
var optionStyles = {
root: [
{
backgroundColor: isPending ? ComboBoxOptionBackgroundHovered : 'transparent',
boxSizing: 'border-box',
cursor: 'pointer',
display: 'block',
width: '100%',
height: 'auto',
minHeight: ComboBoxOptionHeight,
lineHeight: '20px',
padding: '5px 16px',
position: 'relative',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: 'transparent',
wordWrap: 'break-word',
overflowWrap: 'break-word',
textAlign: 'left',
selectors: (_a = {},
_a[HighContrastSelector] = {
borderColor: 'Background'
},
_a)
}
],
rootHovered: {
backgroundColor: ComboBoxOptionBackgroundHovered,
color: ComboBoxOptionTextColorHovered
},
rootFocused: {
backgroundColor: ComboBoxOptionBackgroundHovered
},
rootChecked: [
{
backgroundColor: ComboBoxOptionBackgroundHovered,
color: ComboBoxOptionTextColorSelected
},
getFocusStyle(theme, undefined, undefined, undefined, undefined, undefined, false),
getListOptionHighContrastStyles(theme)
],
rootDisabled: {
backgroundColor: ComboBoxOptionBackgroundDisabled,
color: ComboBoxOptionTextColorDisabled,
cursor: 'default',
selectors: {
'& .ms-Button-flexContainer': {
justifyContent: 'flex-start'
}
}
},
optionText: {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
minWidth: '0px',
maxWidth: '100%',
wordWrap: 'break-word',
overflowWrap: 'break-word',
margin: '1px',
display: 'inline-block'
},
optionTextWrapper: {
maxWidth: '100%'
}
};
return concatStyleSets(optionStyles, customStylesForAllOptions, customOptionStylesForCurrentOption);
var _a;
});
export var getCaretDownButtonStyles = memoizeFunction(function (theme, customStyles) {
var semanticColors = theme.semanticColors;
var caretButtonTextColor = semanticColors.bodySubtext;
var caretButtonTextColorHoveredChecked = semanticColors.buttonTextChecked;
var caretButtonBackgroundHovered = semanticColors.listItemBackgroundHovered;
var caretButtonBackgroundChecked = semanticColors.listItemBackgroundChecked;
var caretButtonBackgroundCheckedHovered = semanticColors.listItemBackgroundCheckedHovered;
var styles = {
root: {
color: caretButtonTextColor,
fontSize: FontSizes.small,
position: 'absolute',
// The negative positioning accounts for the 1px root border now that box-sizing is border-box
top: '-1px',
right: '-1px',
height: ComboBoxHeight,
lineHeight: ComboBoxLineHeight,
width: ComboxBoxCaretDownWidth,
textAlign: 'center',
cursor: 'default',
selectors: (_a = {},
_a[HighContrastSelector] = {
backgroundColor: 'ButtonFace',
borderColor: 'ButtonText',
color: 'ButtonText',
MsHighContrastAdjust: 'none'
},
_a)
},
icon: {
fontSize: FontSizes.small
},
rootHovered: {
backgroundColor: caretButtonBackgroundHovered,
color: caretButtonTextColorHoveredChecked,
cursor: 'pointer'
},
rootPressed: {
backgroundColor: caretButtonBackgroundChecked,
color: caretButtonTextColorHoveredChecked
},
rootChecked: {
backgroundColor: caretButtonBackgroundChecked,
color: caretButtonTextColorHoveredChecked
},
rootCheckedHovered: {
backgroundColor: caretButtonBackgroundCheckedHovered,
color: caretButtonTextColorHoveredChecked
},
rootDisabled: getDisabledStyles(theme)
};
return concatStyleSets(styles, customStyles);
var _a;
});
export var getStyles = memoizeFunction(function (theme, customStyles, comboBoxOptionWidth) {
var semanticColors = theme.semanticColors, fonts = theme.fonts, palette = theme.palette;
var ComboBoxRootBackground = semanticColors.bodyBackground;
var ComboBoxRootTextColor = semanticColors.bodyText;
var ComboBoxRootBorderColor = semanticColors.inputBorder;
var ComboBoxRootBorderColorHovered = semanticColors.inputBorderHovered;
var ComboBoxRootBorderColorFocused = semanticColors.inputFocusBorderAlt;
var ComboBoxRootColorErrored = semanticColors.errorText;
var ComboBoxCalloutBorderColor = palette.neutralLight;
var ComboBoxOptionHeaderTextColor = semanticColors.menuHeader;
var ComboBoxOptionDividerBorderColor = semanticColors.bodyDivider;
var ComboBoxRootHighContrastFocused = {
color: 'HighlightText',
borderColor: 'Highlight',
backgroundColor: 'Window',
borderWidth: '2px',
MsHighContrastAdjust: 'none',
paddingLeft: '11px',
paddingTop: '0',
paddingBottom: '0',
selectors: {
'.ms-ComboBox-CaretDown-button': {
// Negative positioning to account for the 2px border
right: '-2px',
top: '-2px'
}
}
};
var styles = {
container: {},
label: {},
labelDisabled: {},
root: [
fonts.medium,
{
boxShadow: 'none',
marginLeft: '0',
paddingTop: '1px',
paddingBottom: '1px',
paddingRight: ComboxBoxCaretDownWidth,
paddingLeft: '12px',
color: ComboBoxRootTextColor,
position: 'relative',
outline: '0',
userSelect: 'none',
backgroundColor: ComboBoxRootBackground,
borderWidth: '1px',
borderStyle: 'solid',
borderColor: ComboBoxRootBorderColor,
cursor: 'text',
display: 'block',
height: ComboBoxHeight,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
boxSizing: 'border-box',
selectors: {
'.ms-Label': {
display: 'inline-block',
marginBottom: '8px'
},
input: {
selectors: {
'::-ms-clear': {
display: 'none'
}
}
},
'&.is-open': {
borderColor: ComboBoxRootBorderColorFocused,
selectors: (_a = {},
_a[HighContrastSelector] = ComboBoxRootHighContrastFocused,
_a)
}
}
}
],
rootHovered: {
borderColor: ComboBoxRootBorderColorHovered,
selectors: (_b = {},
_b[HighContrastSelector] = {
color: 'HighlightText',
borderColor: 'Highlight',
backgroundColor: 'Window',
MsHighContrastAdjust: 'none'
},
_b)
},
rootPressed: {
borderColor: ComboBoxRootBorderColorFocused,
selectors: (_c = {},
_c[HighContrastSelector] = ComboBoxRootHighContrastFocused,
_c)
},
rootFocused: {
borderColor: ComboBoxRootBorderColorFocused,
selectors: (_d = {},
_d[HighContrastSelector] = ComboBoxRootHighContrastFocused,
_d)
},
rootDisabled: getDisabledStyles(theme),
rootError: {
borderColor: ComboBoxRootColorErrored,
marginBottom: '5px'
},
rootDisallowFreeForm: {},
input: {
backgroundColor: ComboBoxRootBackground,
color: ComboBoxRootTextColor,
boxSizing: 'border-box',
width: '100%',
height: '28px',
borderStyle: 'none',
outline: 'none',
font: 'inherit',
textOverflow: 'ellipsis',
padding: '0'
},
inputDisabled: getDisabledStyles(theme),
errorMessage: {
color: ComboBoxRootColorErrored
},
callout: {
boxShadow: '0 0px 5px 0px rgba(0, 0, 0, 0.4)',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: ComboBoxCalloutBorderColor
},
optionsContainerWrapper: {
width: comboBoxOptionWidth
},
optionsContainer: {
display: 'block'
},
header: [
fonts.medium,
{
fontWeight: FontWeights.semibold,
color: ComboBoxOptionHeaderTextColor,
backgroundColor: 'none',
borderStyle: 'none',
height: ComboBoxOptionHeight,
lineHeight: ComboBoxOptionHeight,
cursor: 'default',
padding: '0px 16px',
userSelect: 'none',
textAlign: 'left'
}
],
divider: {
borderWidth: '1px',
borderStyle: 'solid',
borderColor: ComboBoxOptionDividerBorderColor
}
};
return concatStyleSets(styles, customStyles);
var _a, _b, _c, _d;
});
//# sourceMappingURL=ComboBox.styles.js.map