office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
100 lines • 3.83 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var GlobalClassNames = {
root: 'ms-BasePicker',
text: 'ms-BasePicker-text',
itemsWrapper: 'ms-BasePicker-itemsWrapper',
input: 'ms-BasePicker-input'
};
function getStyles(props) {
var _a;
var className = props.className, theme = props.theme, isFocused = props.isFocused, inputClassName = props.inputClassName, disabled = props.disabled;
if (!theme) {
throw new Error('theme is undefined or null in base BasePicker getStyles function.');
}
var semanticColors = theme.semanticColors, effects = theme.effects;
var inputBorder = semanticColors.inputBorder, inputBorderHovered = semanticColors.inputBorderHovered, inputFocusBorderAlt = semanticColors.inputFocusBorderAlt;
var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
// The following lines are to create a semi-transparent color overlay for the disabled state with designer's approval.
// @todo: investigate the performance cost of the calculation below and apply if negligible. Replacing with a static color for now.
// const rgbColor: IRGB | undefined = cssColor(palette.neutralQuaternaryAlt);
// const disabledOverlayColor = rgbColor ? `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, 0.29)` : 'transparent';
var disabledOverlayColor = 'rgba(218, 218, 218, 0.29)';
return {
root: [classNames.root, className],
text: [
classNames.text,
{
display: 'flex',
position: 'relative',
flexWrap: 'wrap',
alignItems: 'center',
boxSizing: 'border-box',
minWidth: 180,
minHeight: 30,
border: "1px solid " + inputBorder,
borderRadius: effects.roundedCorner2
},
!isFocused &&
!disabled && {
selectors: {
':hover': {
borderColor: inputBorderHovered
}
}
},
isFocused &&
!disabled && {
borderColor: inputFocusBorderAlt
},
disabled && {
borderColor: 'transparent',
selectors: (_a = {
':after': {
content: '""',
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
background: disabledOverlayColor
}
},
_a[Styling_1.HighContrastSelector] = {
borderColor: 'GrayText',
selectors: {
':after': {
background: 'none'
}
}
},
_a)
}
],
itemsWrapper: [
classNames.itemsWrapper,
{
display: 'flex',
flexWrap: 'wrap',
maxWidth: '100%'
}
],
input: [
classNames.input,
{
height: 30,
border: 'none',
flexGrow: 1,
outline: 'none',
padding: '0 6px 0',
alignSelf: 'flex-end',
borderRadius: effects.roundedCorner2
},
inputClassName
],
screenReaderText: Styling_1.hiddenContentStyle
};
}
exports.getStyles = getStyles;
//# sourceMappingURL=BasePicker.styles.js.map