46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { Box, BoxProps, styled } from '@mui/material'
|
|
|
|
export const StyledInputContainer = styled((props: BoxProps) => <Box {...props} />)(({ theme }) => {
|
|
const isDark = theme.palette.mode === 'dark'
|
|
return {
|
|
width: '100%',
|
|
'& > .input_root': {
|
|
background: isDark ? '#000000A8' : '#000',
|
|
color: theme.palette.common.white,
|
|
padding: '0.75rem 1rem',
|
|
borderRadius: '1rem',
|
|
border: '0.3px solid #FFFFFF54',
|
|
fontSize: '0.875rem',
|
|
'&.error': {
|
|
border: '0.3px solid ' + theme.palette.error.main,
|
|
},
|
|
},
|
|
'& .input:is(.disabled, &)': {
|
|
WebkitTextFillColor: '#ffffff80',
|
|
},
|
|
'& > .helper_text': {
|
|
margin: '0.5rem 0.5rem 0',
|
|
color: theme.palette.text.primary,
|
|
},
|
|
'& > .label': {
|
|
margin: '0 1rem 0.5rem',
|
|
display: 'block',
|
|
color: theme.palette.primary.main,
|
|
fontSize: '0.875rem',
|
|
},
|
|
'@media screen and (max-width: 320px)': {
|
|
'& > .input_root': {
|
|
padding: '0.5rem 0.75rem',
|
|
borderRadius: '0.75rem',
|
|
},
|
|
'& > .label': {
|
|
margin: '0 0.25rem 0.25rem',
|
|
fontSize: '0.75rem',
|
|
},
|
|
'& > .helper_text': {
|
|
fontSize: '0.75rem',
|
|
},
|
|
},
|
|
}
|
|
})
|