@fluentui/react-northstar
Version:
A themable React component library.
84 lines (82 loc) • 3.08 kB
JavaScript
;
exports.__esModule = true;
exports.listItemStyles = void 0;
var _accessibilityStyles = require("../../../../utils/accessibility/Styles/accessibilityStyles");
var _ListItemContent = require("../../../../components/List/ListItemContent");
var _ListItemContentMedia = require("../../../../components/List/ListItemContentMedia");
var _ListItemEndMedia = require("../../../../components/List/ListItemEndMedia");
var _ListItemHeader = require("../../../../components/List/ListItemHeader");
var _ListItemHeaderMedia = require("../../../../components/List/ListItemHeaderMedia");
var _getBorderFocusStyles = require("../../getBorderFocusStyles");
var selectableHoverStyle = function selectableHoverStyle(p, v) {
var _ref;
return _ref = {
background: v.selectableFocusHoverBackgroundColor,
color: v.selectableFocusHoverColor,
cursor: 'pointer'
}, _ref["& ." + _ListItemHeader.listItemHeaderClassName] = {
color: 'inherit'
}, _ref["& ." + _ListItemContent.listItemContentClassName] = {
color: 'inherit'
}, _ref["& ." + _ListItemHeaderMedia.listItemHeaderMediaClassName] = Object.assign({}, _accessibilityStyles.screenReaderContainerStyles, {
color: 'inherit'
}), _ref["& ." + _ListItemContentMedia.listItemContentMediaClassName] = {
display: 'none',
color: 'inherit'
}, _ref["& ." + _ListItemEndMedia.listItemEndMediaClassName] = {
display: 'block',
color: 'inherit'
}, _ref;
};
var selectedStyle = function selectedStyle(variables) {
return {
background: variables.selectedBackgroundColor,
color: variables.selectedColor
};
};
var listItemStyles = {
root: function root(_ref2) {
var _Object$assign;
var p = _ref2.props,
v = _ref2.variables,
siteVariables = _ref2.theme.siteVariables;
var borderFocusStyles = (0, _getBorderFocusStyles.getBorderFocusStyles)({
variables: siteVariables
});
return Object.assign({
display: 'flex',
alignItems: 'center',
minHeight: v.minHeight,
padding: v.rootPadding
}, (p.selectable || p.navigable) && Object.assign((_Object$assign = {
position: 'relative',
userSelect: 'none'
}, _Object$assign["& ." + _ListItemEndMedia.listItemEndMediaClassName] = {
display: 'none'
}, _Object$assign['&:hover'] = selectableHoverStyle(p, v), _Object$assign[':focus'] = borderFocusStyles[':focus'], _Object$assign[':focus-visible'] = Object.assign({}, borderFocusStyles[':focus-visible'], {
zIndex: v.zIndex
}), _Object$assign), p.selected && selectedStyle(v)), p.important && {
fontWeight: v.importantFontWeight
});
},
headerWrapper: function headerWrapper() {
return {
display: 'flex'
};
},
contentWrapper: function contentWrapper() {
return {
display: 'flex'
};
},
main: function main() {
return {
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
minWidth: 0 // needed for the truncate styles to work
};
}
};
exports.listItemStyles = listItemStyles;
//# sourceMappingURL=listItemStyles.js.map