@fluentui/react-northstar
Version:
A themable React component library.
245 lines (244 loc) • 7.38 kB
JavaScript
import { dropdownSlotClassNames } from '../../../../components/Dropdown/Dropdown';
import { pxToRem } from '../../../../utils';
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
var transparentColorStyle = {
backgroundColor: 'transparent',
borderColor: 'transparent',
borderBottomColor: 'transparent'
};
var createTransparentColorStyleObj = function createTransparentColorStyleObj() {
return Object.assign({}, transparentColorStyle, {
':hover': Object.assign({}, transparentColorStyle),
':active': Object.assign({}, transparentColorStyle),
':focus': Object.assign({}, transparentColorStyle, {
':active': Object.assign({}, transparentColorStyle)
})
});
};
var getWidth = function getWidth(p, v) {
if (p.fluid) {
return '100%';
}
if (p.inline) {
return 'initial';
}
return v.width;
};
export var dropdownStyles = {
root: function root(_ref) {
var p = _ref.props;
return Object.assign({}, p.inline && {
display: 'inline-flex'
});
},
clearIndicator: function clearIndicator(_ref2) {
var v = _ref2.variables,
siteVariables = _ref2.theme.siteVariables;
return Object.assign({
alignItems: 'center',
alignSelf: 'center',
display: 'flex',
justifyContent: 'center',
cursor: 'pointer',
userSelect: 'none',
margin: 0,
position: 'absolute',
right: pxToRem(6),
padding: pxToRem(2),
color: v.color
}, getBorderFocusStyles({
variables: siteVariables
}));
},
container: function container(_ref3) {
var _Object$assign;
var p = _ref3.props,
v = _ref3.variables,
siteVariables = _ref3.theme.siteVariables;
return Object.assign({
display: 'flex',
flexWrap: 'wrap',
position: 'relative',
borderStyle: 'solid',
borderColor: v.borderColor,
outline: 0,
width: getWidth(p, v),
borderWidth: p.search ? "0 0 " + v.searchBorderBottomWidth + " 0" : v.borderWidth,
color: v.color,
backgroundColor: v.backgroundColor,
borderRadius: v.containerBorderRadius
}, p.open && p.position === 'above' && {
borderRadius: v.openAboveContainerBorderRadius
}, p.open && p.position === 'below' && {
borderRadius: v.openBelowContainerBorderRadius
}, {
':hover': Object.assign({
backgroundColor: v.backgroundColorHover,
borderColor: v.borderColorHover
}, p.open && {
borderColor: v.openBorderColorHover
})
}, p.error && {
border: pxToRem(1) + " solid " + v.borderError,
':hover': {
border: pxToRem(1) + " solid " + v.borderError
}
}, {
':active': {
backgroundColor: v.backgroundColor
},
':focus-within': {
// when dropdown's selected items are focused
// keep the focus border style
borderBottomColor: v.borderColorFocus
}
}, p.focused && Object.assign({
backgroundColor: v.backgroundColor
}, p.search && {
borderBottomColor: v.borderColorFocus
}, !p.search && !p.open && p.isFromKeyboard && getBorderFocusStyles({
variables: siteVariables
})[':focus-visible']), p.inline && Object.assign({}, createTransparentColorStyleObj(), {
alignItems: 'center'
}), p.inverted && {
backgroundColor: v.invertedBackgroundColor,
':hover': {
backgroundColor: v.invertedBackgroundColorHover
},
':active': {
backgroundColor: v.invertedBackgroundColorHover
},
':focus': {
backgroundColor: v.invertedBackgroundColorHover
}
}, p.disabled && {
backgroundColor: siteVariables.colorScheme.default.backgroundDisabled,
borderColor: siteVariables.colorScheme.default.borderDisabled,
userSelect: 'none',
':hover': {
backgroundColor: siteVariables.colorScheme.default.backgroundDisabled
},
':active': {
backgroundColor: siteVariables.colorScheme.default.backgroundDisabled
}
}, (_Object$assign = {}, _Object$assign["& ." + dropdownSlotClassNames.triggerButton] = Object.assign({}, p.disabled && {
color: siteVariables.colorScheme.default.foregroundDisabled
}), _Object$assign));
},
selectedItems: function selectedItems(_ref4) {
var p = _ref4.props,
v = _ref4.variables;
return Object.assign({
display: 'flex',
flexWrap: 'wrap',
overflowY: 'auto',
overflowX: 'hidden',
maxHeight: v.selectedItemsMaxHeight,
width: '100%'
}, p.hasToggleIndicator && {
paddingRight: v.toggleIndicatorSize
}, p.multiple && p.hasItemsSelected && {
paddingTop: pxToRem(1),
paddingBottom: pxToRem(4)
});
},
triggerButton: function triggerButton(_ref5) {
var p = _ref5.props,
v = _ref5.variables;
return Object.assign({
overflow: 'hidden',
boxShadow: 'none',
minHeight: pxToRem(32)
}, createTransparentColorStyleObj(), {
margin: '0',
justifyContent: 'left',
padding: v.comboboxPaddingButton
}, p.multiple && Object.assign({
minWidth: 0,
flex: 1
}, p.hasItemsSelected && {
position: 'absolute',
top: 0,
right: 0,
left: 0,
bottom: 0,
height: '100%'
}), createTransparentColorStyleObj(), {
':focus': Object.assign({
color: v.color
}, createTransparentColorStyleObj()),
':focus-visible': Object.assign({
color: v.color
}, transparentColorStyle, {
':after': {
borderColor: 'transparent',
borderRightWidth: 0
},
':before': {
borderColor: 'transparent',
borderRightWidth: 0
}
}),
':active': Object.assign({
color: v.color
}, transparentColorStyle, {
animationName: 'unset',
animationDuration: 'unset'
}),
':hover': Object.assign({}, transparentColorStyle, {
color: v.color // required for HC theme
})
}, p.inline && {
paddingLeft: 0,
paddingRight: 0,
width: 'initial'
});
},
list: function list(_ref6) {
var p = _ref6.props,
v = _ref6.variables;
return Object.assign({
outline: 0,
borderStyle: 'solid',
borderWidth: p.open ? v.listBorderWidth : '0px',
borderColor: v.listBorderColor,
zIndex: v.overlayZIndex,
maxHeight: v.listMaxHeight,
overflowY: 'auto',
width: getWidth(p, v),
background: v.listBackgroundColor
}, p.position === 'above' && {
borderRadius: v.aboveListBorderRadius
}, p.position === 'below' && {
borderRadius: v.belowListBorderRadius
}, p.open && {
boxShadow: v.listBoxShadow,
padding: v.listPadding
});
},
toggleIndicator: function toggleIndicator(_ref7) {
var p = _ref7.props,
v = _ref7.variables;
return Object.assign({
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
alignSelf: 'center',
cursor: 'pointer'
}, p.disabled && {
cursor: 'default'
}, {
userSelect: 'none',
margin: 0,
position: 'absolute',
right: pxToRem(8)
}, p.multiple && p.hasItemsSelected && {
top: pxToRem(8)
}, {
color: v.color
}, p.disabled && {
color: v.disabledColor
});
}
};
//# sourceMappingURL=dropdownStyles.js.map