@fluentui/react-northstar
Version:
A themable React component library.
108 lines (106 loc) • 3.75 kB
JavaScript
;
exports.__esModule = true;
exports.dropdownItemStyles = void 0;
var _DropdownItem = require("../../../../components/Dropdown/DropdownItem");
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
var _utils = require("../../../../utils");
var _checkableIndicatorUrl = require("./checkableIndicatorUrl");
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: (0, _utils.pxToRem)(4) + " " + (0, _utils.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 && (0, _getBorderFocusStyles.getBorderFocusStyles)({
variables: siteVariables,
borderRadius: 0
})[':focus-visible'], !p.isFromKeyboard && Object.assign({
color: v.listItemColorHover,
backgroundColor: v.listItemBackgroundColorHover
}, p.hasHeader && (_ref2 = {}, _ref2["& ." + _DropdownItem.dropdownItemSlotClassNames.header] = {
color: v.listItemColorHover
}, _ref2), p.hasContent && (_ref3 = {}, _ref3["& ." + _DropdownItem.dropdownItemSlotClassNames.content] = {
color: v.listItemColorHover
}, _ref3))));
},
image: function image() {
return {
margin: (0, _utils.pxToRem)(3) + " " + (0, _utils.pxToRem)(12) + " " + (0, _utils.pxToRem)(3) + " " + (0, _utils.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: (0, _utils.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: (0, _checkableIndicatorUrl.checkableIndicatorUrl)(v.listItemSelectedColor)
}, p.active && !p.isFromKeyboard && {
backgroundImage: (0, _checkableIndicatorUrl.checkableIndicatorUrl)(v.listItemColorHover)
}, {
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
position: 'absolute',
width: (0, _utils.pxToRem)(24),
height: (0, _utils.pxToRem)(24),
right: (0, _utils.pxToRem)(7),
top: (0, _utils.pxToRem)(-3)
});
},
endMedia: function endMedia() {
return {
flexShrink: 0,
lineHeight: (0, _utils.pxToRem)(16)
};
},
main: function main() {
return {
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
minWidth: 0 // needed for the truncate styles to work
};
}
};
exports.dropdownItemStyles = dropdownItemStyles;
//# sourceMappingURL=dropdownItemStyles.js.map