Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | 91x |
import { badgeClasses } from '@mui/material/Badge';
// ----------------------------------------------------------------------
// NEW VARIANT
export function badge(theme) {
return {
MuiBadge: {
styleOverrides: {
dot: {
borderRadius: '50%',
},
root: ({ ownerState }) => {
const alway = ownerState.variant === 'alway';
const online = ownerState.variant === 'online';
const busy = ownerState.variant === 'busy';
const offline = ownerState.variant === 'offline';
const invisible = ownerState.variant === 'invisible';
const baseStyles = {
[`&.${badgeClasses.invisible}`]: {
transform: 'unset',
},
width: 10,
zIndex: 9,
padding: 0,
height: 10,
minWidth: 'auto',
'&:before, &:after': {
content: "''",
borderRadius: 1,
backgroundColor: theme.palette.common.white,
},
};
return {
...(online && {
[`& .${badgeClasses.badge}`]: {
...baseStyles,
backgroundColor: theme.palette.success.main,
},
}),
...(busy && {
[`& .${badgeClasses.badge}`]: {
...baseStyles,
backgroundColor: theme.palette.error.main,
'&:before': { width: 6, height: 2 },
},
}),
...(offline && {
[`& .${badgeClasses.badge}`]: {
...baseStyles,
backgroundColor: theme.palette.text.disabled,
'&:before': {
width: 6,
height: 6,
borderRadius: '50%',
},
},
}),
...(alway && {
[`& .${badgeClasses.badge}`]: {
...baseStyles,
backgroundColor: theme.palette.warning.main,
'&:before': {
width: 2,
height: 4,
transform: 'translateX(1px) translateY(-1px)',
},
'&:after': {
width: 2,
height: 4,
transform: 'translateY(1px) rotate(125deg)',
},
},
}),
...(invisible && {
[`& .${badgeClasses.badge}`]: {
display: 'none',
},
}),
};
},
},
},
};
}
|