@mui/codemod
Version:
Codemod scripts for Material UI.
56 lines (55 loc) • 2.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TreeItemContent = void 0;
const TreeItemContent = exports.TreeItemContent = styled('div', {
name: 'MuiTreeItem',
slot: 'Content',
overridesResolver: (props, styles) => styles.content,
shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'status'
}) < {
status: UseTreeItemStatus
} > (({
theme
}) => ({
padding: theme.spacing(0.5, 1),
paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
borderRadius: theme.shape.borderRadius,
width: '100%',
boxSizing: 'border-box',
// prevent width + padding to overflow
position: 'relative',
display: 'flex',
alignItems: 'center',
gap: theme.spacing(1),
cursor: 'pointer',
WebkitTapHighlightColor: 'transparent',
'&:hover': {
backgroundColor: (theme.vars || theme).palette.action.hover,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent'
}
},
'&[data-disabled]': {
opacity: (theme.vars || theme).palette.action.disabledOpacity,
backgroundColor: 'transparent'
},
'&[data-focused]': {
backgroundColor: (theme.vars || theme).palette.action.focus
},
'&[data-selected]': {
backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity),
'&:hover': {
backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity)
}
}
},
'&[data-selected][data-focused]': {
backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
}
}));