@fluentui/react-northstar
Version:
A themable React component library.
103 lines (102 loc) • 3.39 kB
JavaScript
import { dropdownItemSlotClassNames } from '../../../../components/Dropdown/DropdownItem';
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
import { pxToRem } from '../../../../utils';
import { checkableIndicatorUrl } from './checkableIndicatorUrl';
export var dropdownItemStyles = {
root: function root(_ref) {
var _ref2, _ref3;
var p = _ref.props,
v = _ref.variables,
siteVariables = _ref.theme.siteVariables;
return Object.assign({
display: 'flex',
alignItems: 'center',
minHeight: 0,
padding: pxToRem(4) + " " + pxToRem(11),
whiteSpace: 'nowrap',
border: v.listItemFocusBorderWidth + " solid transparent",
backgroundColor: v.listItemBackgroundColor
}, p.selected && {
fontWeight: v.listItemSelectedFontWeight,
color: v.listItemSelectedColor
}, {
position: 'relative'
}, p.active && Object.assign({}, p.isFromKeyboard && getBorderFocusStyles({
variables: siteVariables,
borderRadius: 0
})[':focus-visible'], !p.isFromKeyboard && Object.assign({
color: v.listItemColorHover,
backgroundColor: v.listItemBackgroundColorHover
}, p.hasHeader && (_ref2 = {}, _ref2["& ." + dropdownItemSlotClassNames.header] = {
color: v.listItemColorHover
}, _ref2), p.hasContent && (_ref3 = {}, _ref3["& ." + dropdownItemSlotClassNames.content] = {
color: v.listItemColorHover
}, _ref3))));
},
image: function image() {
return {
margin: pxToRem(3) + " " + pxToRem(12) + " " + pxToRem(3) + " " + pxToRem(4)
};
},
header: function header(_ref4) {
var p = _ref4.props,
v = _ref4.variables;
return Object.assign({
flexGrow: 1,
lineHeight: v.listItemHeaderLineHeight,
fontSize: v.listItemHeaderFontSize,
// if the item doesn't have content - i.e. it is header only - then it should use the content color
color: v.listItemContentColor
}, p.hasContent && {
// if there is content it needs to be "tightened up" to the header
marginBottom: pxToRem(-1),
color: v.listItemHeaderColor
}, p.selected && {
fontWeight: v.listItemSelectedFontWeight,
color: v.listItemSelectedColor
}, {
whiteSpace: 'normal'
});
},
content: function content(_ref5) {
var v = _ref5.variables;
return {
flexGrow: 1,
lineHeight: v.listItemContentLineHeight,
fontSize: v.listItemContentFontSize,
color: v.listItemContentColor
};
},
checkableIndicator: function checkableIndicator(_ref6) {
var p = _ref6.props,
v = _ref6.variables;
return Object.assign({
backgroundImage: checkableIndicatorUrl(v.listItemSelectedColor)
}, p.active && !p.isFromKeyboard && {
backgroundImage: checkableIndicatorUrl(v.listItemColorHover)
}, {
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
position: 'absolute',
width: pxToRem(24),
height: pxToRem(24),
right: pxToRem(7),
top: pxToRem(-3)
});
},
endMedia: function endMedia() {
return {
flexShrink: 0,
lineHeight: pxToRem(16)
};
},
main: function main() {
return {
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
minWidth: 0 // needed for the truncate styles to work
};
}
};
//# sourceMappingURL=dropdownItemStyles.js.map