Notes

import { Theme } from '@material-ui/core/styles';
import { pxToRem } from './themeUtils';

const MuiOverrides = (theme: Theme) => ({
MuiToggleButton: {
root: {
'&$selected': {
backgroundColor: theme.palette.primary.light,
'&:hover': {
backgroundColor: theme.palette.primary.light,
},
},
'&:hover': {
backgroundColor: theme.palette.primary.light,
},
},
},
MuiAvatar: {
root: {
lineHeight: 'unset',
height: pxToRem(36),
width: pxToRem(36),
},
colorDefault: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.black,
fontSize: theme.typography.body1.fontSize,
},
},
MuiPaper: {
rounded: {
borderRadius: pxToRem(6),
},
outlined: {
border: `${pxToRem(2)} solid ${theme.palette.secondary.dark}`,
},
elevation1: {
boxShadow: 'none',
},
},
MuiPopover: {
paper: {
'&::-webkit-scrollbar': {
width: theme.typography.pxToRem(10),
height: theme.typography.pxToRem(10),
},
},
},
MuiIconButton: {
root: {
padding: pxToRem(12),
},
edgeEnd: {
marginRight: pxToRem(0),
},
},
MuiListItemIcon: {
root: {
marginRight: pxToRem(16),
minWidth: 0,
},
},
MuiListItemSecondaryAction: {
root: {
right: pxToRem(4),
},
},
MuiListItemAvatar: {
root: {
minWidth: pxToRem(48),
},
},
// USED
MuiOutlinedInput: {
inputAdornedStart: {
paddingLeft: pxToRem(10),
paddingRight: pxToRem(10),
},
adornedStart: {
paddingLeft: pxToRem(10),
paddingRight: pxToRem(10),
},
input: {
padding: theme.spacing(12, 0, 13, 20),
},
multiline: {
padding: theme.spacing(12, 0, 13, 20),
},
root: {
borderRadius: pxToRem(6),
'&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
borderColor: theme.palette.divider,
},
'&$focused $notchedOutline': {
borderColor: theme.palette.divider,
borderWidth: pxToRem(1),
},
},
notchedOutline: {
border: `${pxToRem(2)} solid ${theme.palette.divider}`,
borderColor: 'none',
paddingLeft: `${pxToRem(8)} !important`,
},
adornedEnd: {
paddingRight: theme.spacing(14),
},
},
PrivateNotchedOutline: {
root: {
padding: theme.spacing(0, 8),
},
},
MuiExpansionPanel: {
rounded: {
borderRadius: pxToRem(10),
'&:last-child': {
borderBottomLeftRadius: pxToRem(10),
borderBottomRightRadius: pxToRem(10),
borderTopLeftRadius: pxToRem(10),
borderTopRightRadius: pxToRem(10),
},
'&:first-child': {
borderBottomLeftRadius: pxToRem(10),
borderBottomRightRadius: pxToRem(10),
borderTopLeftRadius: pxToRem(10),
borderTopRightRadius: pxToRem(10),
},
},
root: {
'&$expanded': {
margin: pxToRem(0),
},
},
},
MuiExpansionPanelSummary: {
root: {
minHeight: pxToRem(48),
'&$expanded': {
minHeight: pxToRem(64),
},
'&$focused': {
backgroundColor: 'inherit',
},
},
content: {
margin: 0,
'& > :last-child': {
paddingRight: 0,
},
'&$expanded': {
margin: '0px',
},
},
expandIcon: {
right: pxToRem(8),
position: 'absolute',
},
},
MuiExpansionPanelDetails: {
root: {
padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`,
},
},
MuiButtonGroup: {
root: {
border: `${pxToRem(1)} solid ${theme.palette.secondary.dark}`,
// fontSize: theme.typography.fontSize,
// fontWeight: theme.typography.fontWeightRegular,
textTransform: 'none',
},
grouped: {
minWidth: 'unset',
},
},
MuiButton: {
root: {
height: pxToRem(39),
padding: theme.spacing(9),
textTransform: 'none',
minWidth: 'unset',
...theme.typography.button,
borderRadius: pxToRem(8),
'&$selected': {
backgroundColor: theme.palette.primary.main,
},
'&:hover': {
backgroundColor: 'transparent',
opacity: 0.9,
},
'&$disabled': {
color: theme.palette.text.disabled,
},
},
text: {
padding: theme.spacing(9),
color: theme.palette.text.primary,
'&:hover': {
opacity: 0.9,
},
},
outlined: {
padding: theme.spacing(9),
border: `${pxToRem(1)} solid ${theme.palette.grey[200]}`,
'&$disabled': {
border: `${pxToRem(1)} solid ${theme.palette.text.disabled}`,
},
},
contained: {
minWidth: pxToRem(87),
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white,
boxShadow: 'none',
'&:hover': {
opacity: 0.9,
backgroundColor: theme.palette.primary[200],
},
'&$disabled': {
color: theme.palette.common.white,
backgroundColor: theme.palette.text.disabled,
},
},
textPrimary: {
// backgroundColor: theme.palette.background.,
color: theme.palette.primary.main,
height: 'unset',
padding: 0,
// border: `${pxToRem(1)} solid ${theme.palette.primary.main}`,
'&:hover': {
opacity: 1,
backgroundColor: 'transparent',
},
'&$disabled': {
color: theme.palette.text.disabled,
backgroundColor: 'transparent',
},
},
outlinedPrimary: {
borderWidth: pxToRem(1),
'&:hover': {
borderWidth: pxToRem(1),
},
'&$disabled': {
borderWidth: pxToRem(1),
},
},
containedPrimary: {
borderWidth: pxToRem(1),
'&:hover': {
borderWidth: pxToRem(1),
backgroundColor: theme.palette.primary.dark,
},
'&$disabled': {
borderWidth: pxToRem(1),
},
},
outlinedSecondary: {
borderWidth: pxToRem(1),
'&:hover': {
borderWidth: pxToRem(1),
},
'&$disabled': {
borderWidth: pxToRem(1),
},
},
startIcon: {
marginRight: pxToRem(5),
marginLeft: pxToRem(-5),
'&$iconSizeSmall': {
marginLeft: pxToRem(-2),
},
},
endIcon: {
marginLeft: pxToRem(5),
marginRight: pxToRem(-5),
'&$iconSizeSmall': {
marginRight: pxToRem(-2),
},
},
sizeSmall: {
padding: theme.spacing(10),

fontSize: theme.typography.button.fontSize,
height: pxToRem(38),
minWidth: pxToRem(38),
},
sizeLarge: {
padding: theme.spacing(10),

fontSize: theme.typography.button.fontSize,
height: pxToRem(60),
minWidth: pxToRem(60),
},
textSizeSmall: {
padding: theme.spacing(10),
},
iconSizeSmall: {
'& > *:first-child': {
fontSize: theme.typography.button.fontSize,
},
},
iconSizeMedium: {
'& > *:first-child': {
fontSize: theme.typography.button.fontSize,
},
},
iconSizeLarge: {
'& > *:first-child': {
fontSize: theme.typography.button.fontSize,
},
},
},
MuiFab: {
root: {
minHeight: pxToRem(39),
minWidth: pxToRem(39),
fontSize: theme.typography.button.fontSize,
textTransform: 'none',
width: pxToRem(66),
height: pxToRem(66),
lineHeight: pxToRem(24),
// DEFAULT
backgroundColor: 'transparent',
color: theme.palette.text.primary,
'&:hover': {
backgroundColor: 'transparent',
opacity: 0.9,
'@media (hover: none)': {
backgroundColor: 'transparent',
opacity: 0.9,
},
},
'&$disabled': {
backgroundColor: 'transparent',
color: theme.palette.text.disabled,
},
},

// OUTLINED
secondary: {
color: theme.palette.common.white,
border: `${pxToRem(1)} solid ${theme.palette.primary.dark}`,
backgroundColor: 'transparent',
'&:hover': {
backgroundColor: 'transparent',
opacity: 0.9,
'@media (hover: none)': {
backgroundColor: 'transparent',
opacity: 0.9,
},
},
'&$disabled': {
backgroundColor: 'transparent',
border: `${pxToRem(1)} solid ${theme.palette.text.disabled}`,
color: theme.palette.text.disabled,
},
},
// CONTAINED
primary: {
color: theme.palette.common.white,
backgroundColor: theme.palette.primary.dark,

'&:hover': {
backgroundColor: theme.palette.primary.dark,
opacity: 0.9,
'@media (hover: none)': {
backgroundColor: theme.palette.primary.dark,
opacity: 0.9,
},
},
'&$disabled': {
color: theme.palette.common.white,
backgroundColor: theme.palette.text.disabled,
},
},
sizeSmall: {
width: pxToRem(39),
height: pxToRem(36),
},
sizeMedium: {
width: pxToRem(45),
height: pxToRem(45),
},
extended: {
height: pxToRem(66),
minWidth: pxToRem(66),
borderRadius: pxToRem(33),
padding: `0 ${pxToRem(16)}`,
'&$sizeSmall': {
padding: theme.spacing(0, 8),
borderRadius: pxToRem(22.5),
height: pxToRem(45),
minWidth: pxToRem(45),
},
'&$sizeMedium': {
padding: theme.spacing(0, 16),
borderRadius: pxToRem(24),
height: pxToRem(48),
minWidth: pxToRem(48),
},
},
},
MuiDialog: {
root: {
fontFamily: theme.typography.fontFamily,
},
paper: {
backgroundColor: theme.palette.background.default,
borderRadius: pxToRem(10),
margin: 0,
position: 'absolute',
},
paperScrollPaper: {
maxHeight: `calc(100% - ${pxToRem(64)})`,
},
paperWidthXs: {
maxWidth: 'unset',
},
paperWidthSm: {
maxWidth: 'unset',
},
paperWidthMd: {
maxWidth: 'unset',
},
paperWidthLg: {
maxWidth: 'unset',
},
paperWidthXl: {
maxWidth: 'unset',
},
paperFullWidth: {
maxWidth: 'unset',
},
},
MuiDialogTitle: {
root: {
margin: 0,
padding: theme.spacing(18, 20),
...theme.typography.h3,
},
},
MuiDialogContent: {
root: {
margin: theme.spacing(0, 20),
padding: theme.spacing(18, 0),
'&:first-child': {
paddingTop: pxToRem(18),
},
},
dividers: {
margin: theme.spacing(0, 20),
padding: theme.spacing(18, 0),
borderTop: `${theme.typography.pxToRem(1)} solid ${
theme.palette.info.main
}`,
borderBottom: 'none',
'&:first-child': {
borderTop: 'none',
},
},
},
MuiDialogContentText: {
root: {
marginBottom: pxToRem(5),
},
},
MuiDialogActions: {
root: {
padding: theme.spacing(18, 20),
},
spacing: {
'& > :last-child': {
marginLeft: pxToRem(10),
},
},
},
MuiSvgIcon: {
root: {
// USED
// fill: theme.palette.common.white,
fontSize: pxToRem(24),
},
fontSizeLarge: {
fontSize: pxToRem(35),
},
fontSizeSmall: {
fontSize: pxToRem(20),
},
},

MuiSelect: {
icon: {
top: `calc(50% - ${pxToRem(10)})`,
color: theme.palette.text.secondary,
'&$disabled': {
color: theme.palette.text.secondary,
},
},
select: {
paddingRight: `${pxToRem(32)} !important`,
minWidth: pxToRem(16),
'&:focus': {
backgroundColor: 'none',
},
},
selectMenu: {
textAlign: 'left',
height: pxToRem(20),
color: theme.palette.text.primary,
opacity: 1,
backgroundColor: `${theme.palette.common.white} !important`,
},
iconFilled: {
right: pxToRem(15),
},
iconOutlined: {
right: pxToRem(15),
},
},
MuiMenu: {
paper: {
overflowY: 'auto',
maxWidth: `calc(100% - ${pxToRem(32)})`,
minHeight: pxToRem(16),
maxHeight: pxToRem(300),
background: theme.palette.common.white,
border: `${pxToRem(1)} solid ${theme.palette.grey[200]}`,
borderRadius: `${pxToRem(10)}`,
marginTop: theme.spacing(5),
},
},
MuiMenuItem: {
root: {
minHeight: pxToRem(48),
paddingTop: pxToRem(6),
paddingBottom: pxToRem(6),
lineHeight: 1,
'@media (min-width: 600px)': {
minHeight: pxToRem(48),
},
},
},
MuiList: {
root: {
paddingTop: pxToRem(8),
paddingBottom: pxToRem(8),
},
padding: {
paddingTop: pxToRem(8),
paddingBottom: pxToRem(8),
},
},
MuiListItemText: {
root: {
marginTop: 0,
marginBottom: 0,
},
multiline: {
marginTop: 0,
marginBottom: 0,
},
},
MuiListItem: {
secondaryAction: {
paddingRight: pxToRem(48),
},
button: {
'&:hover': {
backgroundColor: theme.palette.primary.light,
color: theme.palette.text.primary,
},
'&$selected': {
backgroundColor: 'transparent',
},
'&$selected:hover': {
backgroundColor: theme.palette.primary.light,
},
},
root: {
paddingTop: pxToRem(8),
paddingBottom: pxToRem(8),
'&:hover': {
backgroundColor: theme.palette.primary.light,
color: theme.palette.text.primary,
},
'&$selected': {
backgroundColor: 'transparent',
},
'&$selected:hover': {
backgroundColor: theme.palette.primary.light,
},
},
gutters: {
paddingLeft: pxToRem(16),
paddingRight: pxToRem(16),
},
dense: {
paddingTop: theme.spacing(5),
paddingBottom: theme.spacing(5),
},
},
MuiInputBase: {
root: {
// backgroundColor: theme.palette.secondary.light,
},
input: {
padding: theme.spacing(6, 0, 7),
color: theme.palette.text.primary,
fontFamily: theme.typography.fontFamily,
'&::placeholder': {
color: theme.palette.text.secondary,
},
},
},
MuiInput: {
formControl: {
'label + &': {
marginTop: pxToRem(50),
},
},
underline: {
'&&&&:hover:before': {
borderBottom: `${pxToRem(2)} solid ${theme.palette.primary.dark}`,
},
'&:before': {
borderBottom: `${pxToRem(2)} solid ${theme.palette.primary.dark}`,
},
'&:after': {
borderBottom: `${pxToRem(2)} solid ${theme.palette.primary.dark}`,
},
'&$focused:after': {
borderBottom: `${pxToRem(2)} solid ${theme.palette.primary.dark}`,
},
},
multiline: {
padding: theme.spacing(6, 7),
},
},
MuiTableRow: {
head: {
height: pxToRem(44),
backgroundColor: theme.palette.background.main,
},
root: {
height: pxToRem(61),
'&$hover:hover': {
backgroundColor: theme.palette.primary.light,
},
},
},
MuiTableCell: {
root: {
padding: theme.spacing(10, 20),
borderBottom: `${pxToRem(1)} solid ${theme.palette.divider}`,
fontSize: theme.typography.body1.fontSize,
fontWeight: theme.typography.body1.fontWeight,
whiteSpace: 'nowrap',
},
paddingCheckbox: {
padding: 0,
width: pxToRem(48),
},
body: {
borderBottom: `${pxToRem(1)} solid ${theme.palette.divider}`,
},
head: {
borderBottom: `${pxToRem(1)} solid ${theme.palette.divider}`,
color: theme.palette.text.secondary,
fontWeight: theme.typography.fontWeightMedium,
fontSize: theme.typography.body2.fontSize,
'&:not(:last-child)': {
borderRight: `${pxToRem(2)} solid ${theme.palette.divider}`,
},
},
stickyHeader: {
backgroundColor: 'inherit',
},
},
MuiSwitch: {
root: {
width: pxToRem(62),
height: pxToRem(47),
padding: pxToRem(12),
},
thumb: {
width: pxToRem(20),
height: pxToRem(20),
boxShadow: 'none',
},
switchBase: {
width: pxToRem(48),
height: pxToRem(48),
},
colorPrimary: {
color: theme.palette.primary.main,
'&$checked': {
color: theme.palette.common.white,
},
'&$disabled': {
color: theme.palette.grey[400],
},
'&$checked + $track': {
backgroundColor: theme.palette.primary.main,
},
'&$disabled + $track': {
backgroundColor: theme.palette.common.white,
},
},
track: {
width: pxToRem(48),
height: pxToRem(24),
borderRadius: pxToRem(20),
border: `${theme.palette.grey[400]} solid 1px`,
backgroundColor: theme.palette.common.white,
position: 'absolute',
},
},
PrivateSwitchBase: {
root: {
padding: theme.spacing(0, 12, 0, 0),
},
},
PrivateRadioButtonIcon: {
root: {
color: theme.palette.secondary.main,
},
},
MuiFormControlLabel: {
labelPlacementStart: {
marginLeft: pxToRem(0),
marginRight: pxToRem(0),
},
root: {
marginLeft: pxToRem(0),
'&:not(:last-child)': {
marginRight: pxToRem(10),
},
marginRight: pxToRem(0),
height: pxToRem(24),
},
},
MuiFormLabel: {
root: {
...theme.typography.body2,
'& .Mui-focused': {
backgroundColor: 'none !important',
},
},
asterisk: {
color: theme.palette.error.main,
},
},
CustomSelect: {
selectInputContainer: {
margin: `${pxToRem(0)} ${pxToRem(0)} ${pxToRem(10)} ${pxToRem(0)}`,
},
},
// USED
MuiInputAdornment: {
positionStart: {
marginRight: theme.spacing(8),
},
},
MuiInputLabel: {
root: {
...theme.typography.subtitle1,
color: theme.palette.text.primary,
},
asterisk: {
color: theme.palette.error.main,
},
formControl: {
transform: `translate(0, ${pxToRem(24)}) scale(1)`,
},
},
MuiTypography: {
root: {
display: 'block',
},
},
MuiTooltip: {
popper: {
zIndex: '999999999',
},
popperArrow: {
'&[x-placement*="bottom"] $arrow': {
marginLeft: pxToRem(4),
marginRight: pxToRem(4),
},
'&[x-placement*="top"] $arrow': {
marginLeft: pxToRem(4),
marginRight: pxToRem(4),
},
'&[x-placement*="right"] $arrow': {
marginTop: pxToRem(4),
marginBottom: pxToRem(4),
},
'&[x-placement*="left"] $arrow': {
marginTop: pxToRem(4),
marginBottom: pxToRem(4),
},
},
tooltip: {
padding: theme.spacing(9, 12),
maxWidth: 'unset',
backgroundColor: theme.palette.grey[500],
border: `${pxToRem(1)} solid ${theme.palette.common.white}`,
borderRadius: pxToRem(4),
textAlign: 'left',
textTransform: 'initial',
...theme.typography.body1,
},
arrow: {
color: theme.palette.primary.main,
},
touch: {
padding: theme.spacing(9, 12),
},
tooltipPlacementBottom: {
margin: theme.spacing(4, 0),
[theme.breakpoints.up('sm')]: {
margin: theme.spacing(4, 0),
},
},
tooltipPlacementTop: {
margin: theme.spacing(4, 0),
[theme.breakpoints.up('sm')]: {
margin: theme.spacing(4, 0),
},
},
tooltipPlacementRight: {
margin: theme.spacing(0, 4),
[theme.breakpoints.up('sm')]: {
margin: theme.spacing(0, 4),
},
},
tooltipPlacementLeft: {
margin: theme.spacing(0, 4),
[theme.breakpoints.up('sm')]: {
margin: theme.spacing(0, 4),
},
},
},
MuiTab: {
root: {
minWidth: 'unset',
padding: 0,
margin: theme.spacing(5, 20),
maxWidth: 'unset',
minHeight: pxToRem(0),
[theme.breakpoints.up('sm')]: {
padding: 0,
margin: theme.spacing(5, 20),
minWidth: 'unset',
},
textTransform: 'none',
...theme.typography.body2,
},
textColorPrimary: {
color: theme.palette.text.disabled,
'&$selected': {
opacity: 1,
color: theme.palette.common.white,
},
'&$disabled': {
opacity: 1,
color: theme.palette.text.disabled,
},
},
labelIcon: {
minHeight: 'unset',
paddingTop: pxToRem(10),
'& $wrapper > *:first-child': {
marginBottom: pxToRem(7.45),
},
},
},
PrivateTabIndicator: {
colorSecondary: {
backgroundColor: theme.palette.primary.main,
},
root: {
height: pxToRem(4),
},
},
MuiTabs: {
root: {
minHeight: pxToRem(45),
},
fixed: {
borderBottom: `${pxToRem(1)} solid ${theme.palette.divider}`,
},
},
MuiTabScrollButton: {
root: {
width: pxToRem(40),
},
},
MuiGrid: {
'spacing-xs-2': {
'& > $item': {
padding: theme.spacing(1),
},
width: `calc(100% + ${pxToRem(2)})`,
margin: `-${pxToRem(1)}`,
},
'spacing-xs-8': {
'& > $item': {
padding: theme.spacing(4),
},
width: `calc(100% + ${pxToRem(8)})`,
margin: `-${pxToRem(4)}`,
},
'spacing-xs-10': {
'& > $item': {
padding: theme.spacing(10),
},
width: `calc(100% + ${pxToRem(20)})`,
margin: `-${pxToRem(10)}`,
},
},
// USED in Trifecta
MuiSnackbar: {
anchorOriginBottomLeft: {
'@media (min-width: 600px)': {
left: pxToRem(24),
bottom: pxToRem(24),
},
left: pxToRem(24),
bottom: pxToRem(24),
right: 'auto',
},
root: {
boxSizing: 'border-box',
},
},
MuiSnackbarContent: {
root: {
'@media (min-width: 600px)': {
boxSizing: 'border-box',
minWidth: pxToRem(450),
maxWidth: pxToRem(568),
borderRadius: pxToRem(6),
flexWrap: 'nowrap',
wordBreak: 'break-word',
},
backgroundColor: theme.palette.background.default,
minWidth: pxToRem(450),
maxWidth: pxToRem(568),
minHeight: pxToRem(70),
padding: theme.spacing(10, 10, 10, 24),
borderRadius: pxToRem(6),
opacity: 1,
flexWrap: 'nowrap',
wordBreak: 'break-word',
marginLeft: pxToRem(278),
marginBottom: pxToRem(2),
boxSizing: 'border-box',
},
action: {
paddingLeft: pxToRem(0),
marginRight: `-${pxToRem(0)}`,
color: 'inherit',
},
message: {
color: theme.palette.text.primary,
padding: theme.spacing(10, 0),
display: 'flex',
alignItems: 'center',
},
},
MuiChip: {
root: {
height: pxToRem(24),
borderRadius: pxToRem(12),
padding: theme.spacing(4, 6),
...theme.typography.button,
},
sizeSmall: {
height: pxToRem(20),
},
label: {
paddingLeft: theme.spacing(6),
paddingRight: theme.spacing(6),
},
labelSmall: {
paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(3),
},
outlined: {
'& $icon': {
marginLeft: pxToRem(4),
},
},
},
MuiStepper: {
root: {
padding: `${pxToRem(0)} ${pxToRem(46)} ${pxToRem(0)} ${pxToRem(27)}`,
},
},
MuiStepConnector: {
lineVertical: {
minHeight: 0,
border: 'none',
},
vertical: {
padding: 0,
},
},
MuiStepContent: {
root: {
marginLeft: pxToRem(12),
paddingBottom: pxToRem(38),
paddingLeft: pxToRem(37.5),
paddingRight: pxToRem(38),
borderLeft: `dotted ${pxToRem(2)} ${theme.palette.text.disabled}`,
},
},
MuiAccordion: {
root: {
background: theme.palette.grey[400],
'&$expanded': {
marginBottom: theme.spacing(10),
margin: theme.spacing(0),
},
},
},
MuiAccordionSummary: {
root: {
minHeight: pxToRem(64),
padding: theme.spacing(0, 20),
'&$expanded': {
minHeight: pxToRem(64),
},
},
expandIcon: {
color: theme.palette.text.disabled,
padding: theme.spacing(10),
},
content: {
margin: theme.spacing(12, 0),
'&$expanded': {
margin: theme.spacing(12, 0),
},
},
},
MuiAccordionDetails: {
root: {
padding: theme.spacing(8, 20, 20),
},
},
MuiCheckbox: {
colorSecondary: {
'&$checked': {
color: theme.palette.secondary.main,
'&:hover': {
backgroundColor: theme.palette.secondary.light,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent',
},
},
},
'&$disabled': {
color: theme.palette.action.disabled,
},
},
},
MuiFormGroup: {
root: {
flexDirection: 'row',
},
},
MuiDivider: {
root: {
height: theme.typography.pxToRem(1),
},
vertical: {
width: theme.typography.pxToRem(1),
},
},
MuiLinearProgress: { root: { height: pxToRem(8) } },
MuiAvatarGroup: {
avatar: {
color: theme.palette.common.black,
fontSize: theme.typography.body1.fontSize,
border: `${pxToRem(2)} solid ${theme.palette.common.white}`,
marginLeft: pxToRem(-8),
},
},
MuiToolbar: {
regular: {
'@media (min-width: 600px)': {
minHeight: theme.typography.pxToRem(48),
},
'@media (min-width: 0px) and (orientation: landscape)': {
minHeight: theme.typography.pxToRem(48),
},
},
},
MuiFormControl: {
root: {
backgroundColor: `${theme.palette.common.white} !important`,
borderRadius: `${theme.typography.pxToRem(10)} !important`,
},
},
MuiAutocomplete: {
tag: {
margin: pxToRem(3),
maxWidth: `calc(100% - ${pxToRem(6)})`,
},
tagSizeSmall: {
margin: pxToRem(2),
maxWidth: `calc(100% - ${pxToRem(4)})`,
},
inputRoot: {
flexWrap: 'wrap',
'$hasPopupIcon &, $hasClearIcon &': {
paddingRight: pxToRem(30),
},
'$hasPopupIcon$hasClearIcon &': {
paddingRight: pxToRem(56),
},
'& $input': {
width: 0,
minWidth: pxToRem(30),
},
'&[class*="MuiInput-root"]': {
paddingBottom: pxToRem(1),
'& $input': {
padding: pxToRem(4),
},
'& $input:first-child': {
padding: theme.spacing(6, 0),
},
},
'&[class*="MuiInput-root"][class*="MuiInput-marginDense"]': {
'& $input': {
padding: theme.spacing(4, 4, 5),
},
'& $input:first-child': {
padding: theme.spacing(3, 0, 6),
},
},
'&[class*="MuiOutlinedInput-root"]': {
padding: pxToRem(9),
'$hasPopupIcon &, $hasClearIcon &': {
paddingRight: pxToRem(39),
},
'$hasPopupIcon$hasClearIcon &': {
paddingRight: pxToRem(65),
},
'& $input': {
padding: theme.spacing(9.5, 4),
},
'& $input:first-child': {
paddingLeft: theme.spacing(6),
},
'& $endAdornment': {
right: pxToRem(9),
},
},
'&[class*="MuiOutlinedInput-root"][class*="MuiOutlinedInput-marginDense"]':
{
padding: pxToRem(6),
'& $input': {
padding: theme.spacing(4.5, 4),
},
},
'&[class*="MuiFilledInput-root"]': {
paddingTop: pxToRem(9),
paddingLeft: pxToRem(8),
'$hasPopupIcon &, $hasClearIcon &': {
paddingRight: pxToRem(39),
},
'$hasPopupIcon$hasClearIcon &': {
paddingRight: pxToRem(65),
},
'& $input': {
padding: theme.spacing(9, 4),
},
'& $endAdornment': {
right: pxToRem(9),
},
},
'&[class*="MuiFilledInput-root"][class*="MuiFilledInput-marginDense"]': {
paddingBottom: pxToRem(1),
'& $input': {
padding: theme.spacing(4.5, 4),
},
},
},
endAdornment: {
top: `calc(50% - ${pxToRem(14)})`, // Center vertically
},
clearIndicator: {
marginRight: pxToRem(-2),
padding: pxToRem(4),
},
popupIndicator: {
padding: pxToRem(2),
marginRight: pxToRem(-2),
},
paper: {
margin: theme.spacing(4, 0),
},
listbox: {
padding: theme.spacing(20, 0),
maxHeight: pxToRem(300),
},
loading: {
padding: theme.spacing(14, 16),
},
noOptions: {
padding: theme.spacing(14, 16),
},
option: {
minHeight: pxToRem(48),
paddingBottom: pxToRem(6),
paddingLeft: pxToRem(16),
paddingRight: pxToRem(16),
[theme.breakpoints.up('sm')]: {
minHeight: pxToRem(48),
},
'&[aria-selected="true"]': {
backgroundColor: theme.palette.primary.light,
},
'&[data-focus="true"]': {
backgroundColor: theme.palette.primary.light,
},
'&:active': {
backgroundColor: theme.palette.primary.light,
},
'&[aria-disabled="true"]': {
opacity: theme.palette.action.disabledOpacity,
pointerEvents: 'none',
},
},
groupLabel: {
top: pxToRem(-8),
},
groupUl: {
padding: 0,
'& $option': {
paddingLeft: pxToRem(24),
},
},
},
MuiTreeItem: {
root: {
'&$selected > $content $label': {
backgroundColor: theme.palette.common.white,
borderRadius: pxToRem(10),
},
},
iconContainer: {
width: 'unset',
marginRight: 0,
'& svg': {
fontSize: theme.typography.body1.fontSize,
},
},
group: {
marginLeft: pxToRem(18),
paddingLeft: pxToRem(10),
},
label: {
paddingLeft: 0,
},
},
MuiDrawer: {
paperAnchorDockedLeft: {
borderRight: 'none',
},
},
MuiFormHelperText: {
contained: {
marginLeft: 0,
marginRight: 0,
},
root: {
marginTop: pxToRem(3),
...theme.typography.caption,
},
},
MuiStep: {
horizontal: {
paddingRight: pxToRem(8),
paddingLeft: pxToRem(8),
},
},
MuiPickersBasePicker: {
container: {
'& .MuiPickersToolbar-toolbar': {
height: theme.typography.pxToRem(60),
padding: `${theme.typography.pxToRem(7)} ${theme.typography.pxToRem(
0,
)} ${theme.typography.pxToRem(5)} ${theme.typography.pxToRem(5)}`,
},
'& .MuiPickersToolbarButton-toolbarBtn': {
minWidth: theme.typography.pxToRem(16),
},
'& .MuiPickersToolbarText-toolbarBtnSelected': {
fontSize: theme.typography.pxToRem(20),
},
'& .MuiPickersBasePicker-pickerView': {
minWidth: theme.typography.pxToRem(300),
minHeight: theme.typography.pxToRem(315),
maxWidth: theme.typography.pxToRem(400),
maxHeight: theme.typography.pxToRem(450),
paddingTop: theme.typography.pxToRem(10),
'& .MuiPickersCalendarHeader-transitionContainer': {
height: theme.typography.pxToRem(23),
},
'& .MuiPickersCalendarHeader-daysHeader': {
minWidth: theme.typography.pxToRem(16),
'& .MuiPickersCalendarHeader-dayLabel': {
color: theme.palette.common.black,
width: theme.typography.pxToRem(48),
margin: `0 ${theme.typography.pxToRem(2)}`,
},
},
'& .MuiPickersCalendar-transitionContainer': {
minHeight: theme.typography.pxToRem(216),
},
},
'& .MuiPickersDay-day': {
height: theme.typography.pxToRem(45),
width: theme.typography.pxToRem(45),
margin: `0 ${theme.typography.pxToRem(2)}`,
},
},
},
});

export default MuiOverrides;