Initial commit
This commit is contained in:
191
src/theme/componentsOverride.js
Normal file
191
src/theme/componentsOverride.js
Normal file
@@ -0,0 +1,191 @@
|
||||
import customShadows from './shadows';
|
||||
|
||||
// ==============================|| DOORMILE THEME - COMPONENT OVERRIDES ||============================== //
|
||||
// Clean, corporate Material Design tuning for the whole console.
|
||||
|
||||
export default function componentsOverride(theme) {
|
||||
const { palette } = theme;
|
||||
|
||||
return {
|
||||
MuiCssBaseline: {
|
||||
styleOverrides: {
|
||||
html: { WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', textRendering: 'optimizeLegibility' },
|
||||
body: { backgroundColor: palette.background.default },
|
||||
'*::-webkit-scrollbar': { width: 8, height: 8 },
|
||||
'*::-webkit-scrollbar-thumb': { background: palette.grey[300], borderRadius: 8 },
|
||||
'*::-webkit-scrollbar-thumb:hover': { background: palette.grey[400] }
|
||||
}
|
||||
},
|
||||
MuiButton: {
|
||||
defaultProps: { disableElevation: true, disableRipple: false },
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: 8,
|
||||
fontWeight: 600,
|
||||
padding: '8px 18px',
|
||||
transition: 'background-color .2s ease, box-shadow .2s ease, transform .12s ease, border-color .2s ease',
|
||||
'&:active': { transform: 'translateY(0.5px)' },
|
||||
'&.Mui-focusVisible': { boxShadow: `0 0 0 3px ${palette.primary.lighter}` }
|
||||
},
|
||||
containedPrimary: {
|
||||
boxShadow: customShadows.primaryGlow,
|
||||
'&:hover': { boxShadow: customShadows.primaryGlowHover, backgroundColor: palette.primary.dark }
|
||||
},
|
||||
outlined: {
|
||||
borderColor: palette.grey[300],
|
||||
'&:hover': { borderColor: palette.grey[400], backgroundColor: palette.grey[50] }
|
||||
},
|
||||
text: { '&:hover': { backgroundColor: palette.grey[100] } },
|
||||
sizeLarge: { padding: '11px 24px', fontSize: '0.9375rem' },
|
||||
sizeSmall: { padding: '5px 14px' },
|
||||
// Give every button clear breathing room between its icon and label
|
||||
startIcon: { marginRight: 10 },
|
||||
endIcon: { marginLeft: 10 }
|
||||
}
|
||||
},
|
||||
MuiIconButton: {
|
||||
styleOverrides: { root: { borderRadius: 8 } }
|
||||
},
|
||||
MuiCard: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: 14,
|
||||
border: `1px solid ${palette.grey[200]}`,
|
||||
boxShadow: customShadows.card,
|
||||
backgroundImage: 'none',
|
||||
transition: 'box-shadow .22s ease, border-color .22s ease, transform .22s ease'
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiCardHeader: {
|
||||
defaultProps: { titleTypographyProps: { variant: 'h5' }, subheaderTypographyProps: { variant: 'caption' } },
|
||||
styleOverrides: { root: { padding: 20 } }
|
||||
},
|
||||
MuiCardContent: {
|
||||
styleOverrides: { root: { padding: 20, '&:last-child': { paddingBottom: 20 } } }
|
||||
},
|
||||
MuiPaper: {
|
||||
defaultProps: { elevation: 0 },
|
||||
styleOverrides: { rounded: { borderRadius: 14 } }
|
||||
},
|
||||
MuiToggleButtonGroup: {
|
||||
styleOverrides: {
|
||||
root: { backgroundColor: palette.grey[100], borderRadius: 10, padding: 4, gap: 4 },
|
||||
grouped: {
|
||||
border: 0,
|
||||
borderRadius: '8px !important',
|
||||
margin: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiToggleButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
border: 0,
|
||||
borderRadius: 8,
|
||||
padding: '6px 12px',
|
||||
color: palette.grey[600],
|
||||
transition: 'all .18s ease',
|
||||
'&:hover': { backgroundColor: palette.grey[200] },
|
||||
'&.Mui-selected': {
|
||||
backgroundColor: palette.background.paper,
|
||||
color: palette.primary.main,
|
||||
boxShadow: customShadows.card,
|
||||
'&:hover': { backgroundColor: palette.background.paper }
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiChip: {
|
||||
styleOverrides: {
|
||||
root: { borderRadius: 6, fontWeight: 600, fontSize: '0.75rem' },
|
||||
sizeSmall: { height: 22 },
|
||||
label: { paddingLeft: 8, paddingRight: 8 }
|
||||
}
|
||||
},
|
||||
MuiTableCell: {
|
||||
styleOverrides: {
|
||||
root: { borderColor: palette.grey[200], padding: '12px 16px', fontSize: '0.8125rem' },
|
||||
head: {
|
||||
fontWeight: 600,
|
||||
color: palette.grey[600],
|
||||
backgroundColor: palette.grey[50],
|
||||
textTransform: 'none',
|
||||
whiteSpace: 'nowrap'
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiTableRow: {
|
||||
styleOverrides: {
|
||||
root: { transition: 'background-color .15s ease', '&:hover': { backgroundColor: palette.grey[50] } }
|
||||
}
|
||||
},
|
||||
MuiOutlinedInput: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: 8,
|
||||
backgroundColor: palette.background.paper,
|
||||
transition: 'box-shadow .2s ease, border-color .2s ease',
|
||||
'& .MuiOutlinedInput-notchedOutline': { borderColor: palette.grey[300], transition: 'border-color .2s ease' },
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': { borderColor: palette.grey[400] },
|
||||
'&.Mui-focused': { boxShadow: `0 0 0 3px ${palette.primary.lighter}` },
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': { borderColor: palette.primary.main, borderWidth: 1 }
|
||||
},
|
||||
input: { padding: '11px 14px' }
|
||||
}
|
||||
},
|
||||
MuiSelect: {
|
||||
styleOverrides: {
|
||||
select: {
|
||||
paddingTop: '11px',
|
||||
paddingBottom: '11px',
|
||||
paddingLeft: '14px',
|
||||
display: 'flex',
|
||||
alignItems: 'center'
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiInputLabel: {
|
||||
styleOverrides: { root: { color: palette.grey[600], fontSize: '0.875rem' } }
|
||||
},
|
||||
MuiTab: {
|
||||
styleOverrides: {
|
||||
root: { textTransform: 'none', fontWeight: 600, minHeight: 46, fontSize: '0.875rem' }
|
||||
}
|
||||
},
|
||||
MuiTabs: {
|
||||
styleOverrides: { indicator: { height: 3, borderRadius: 3 } }
|
||||
},
|
||||
MuiTooltip: {
|
||||
styleOverrides: {
|
||||
tooltip: { backgroundColor: palette.grey[800], borderRadius: 6, fontSize: '0.75rem', padding: '6px 10px' }
|
||||
}
|
||||
},
|
||||
MuiDialog: {
|
||||
styleOverrides: { paper: { borderRadius: 16 } }
|
||||
},
|
||||
MuiAvatar: {
|
||||
styleOverrides: { root: { fontWeight: 600, fontSize: '0.875rem' } }
|
||||
},
|
||||
MuiListItemButton: {
|
||||
styleOverrides: { root: { borderRadius: 8 } }
|
||||
},
|
||||
MuiLinearProgress: {
|
||||
styleOverrides: { root: { borderRadius: 8, height: 6, backgroundColor: palette.grey[200] } }
|
||||
},
|
||||
MuiMenu: {
|
||||
styleOverrides: { paper: { borderRadius: 12, boxShadow: customShadows.dropdown, marginTop: 6, border: `1px solid ${palette.grey[200]}` } }
|
||||
},
|
||||
MuiMenuItem: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: 8,
|
||||
margin: '2px 6px',
|
||||
padding: '8px 10px',
|
||||
fontSize: '0.875rem',
|
||||
'&:hover': { backgroundColor: palette.grey[100] }
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user