@fluentui/react-northstar
Version:
A themable React component library.
79 lines (78 loc) • 2.86 kB
JavaScript
import { screenReaderContainerStyles } from '../../../../utils/accessibility/Styles/accessibilityStyles';
import { listItemContentClassName } from '../../../../components/List/ListItemContent';
import { listItemContentMediaClassName } from '../../../../components/List/ListItemContentMedia';
import { listItemEndMediaClassName } from '../../../../components/List/ListItemEndMedia';
import { listItemHeaderClassName } from '../../../../components/List/ListItemHeader';
import { listItemHeaderMediaClassName } from '../../../../components/List/ListItemHeaderMedia';
import { getBorderFocusStyles } from '../../getBorderFocusStyles';
var selectableHoverStyle = function selectableHoverStyle(p, v) {
var _ref;
return _ref = {
background: v.selectableFocusHoverBackgroundColor,
color: v.selectableFocusHoverColor,
cursor: 'pointer'
}, _ref["& ." + listItemHeaderClassName] = {
color: 'inherit'
}, _ref["& ." + listItemContentClassName] = {
color: 'inherit'
}, _ref["& ." + listItemHeaderMediaClassName] = Object.assign({}, screenReaderContainerStyles, {
color: 'inherit'
}), _ref["& ." + listItemContentMediaClassName] = {
display: 'none',
color: 'inherit'
}, _ref["& ." + listItemEndMediaClassName] = {
display: 'block',
color: 'inherit'
}, _ref;
};
var selectedStyle = function selectedStyle(variables) {
return {
background: variables.selectedBackgroundColor,
color: variables.selectedColor
};
};
export var listItemStyles = {
root: function root(_ref2) {
var _Object$assign;
var p = _ref2.props,
v = _ref2.variables,
siteVariables = _ref2.theme.siteVariables;
var borderFocusStyles = 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["& ." + 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
};
}
};
//# sourceMappingURL=listItemStyles.js.map