005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
89 lines
2.5 KiB
TypeScript
89 lines
2.5 KiB
TypeScript
import { styled } from '@mui/material/styles';
|
|
import Radio, { RadioProps } from '@mui/material/Radio';
|
|
import RadioGroup from '@mui/material/RadioGroup';
|
|
import FormControlLabel from '@mui/material/FormControlLabel';
|
|
import FormControl from '@mui/material/FormControl';
|
|
import FormLabel from '@mui/material/FormLabel';
|
|
|
|
const BpIcon = styled('span')(({ theme }) => ({
|
|
borderRadius: '50%',
|
|
width: 16,
|
|
height: 16,
|
|
boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
|
|
backgroundColor: '#f5f8fa',
|
|
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
|
|
'.Mui-focusVisible &': {
|
|
outline: '2px auto rgba(19,124,189,.6)',
|
|
outlineOffset: 2,
|
|
},
|
|
'input:hover ~ &': {
|
|
backgroundColor: '#ebf1f5',
|
|
...theme.applyStyles('dark', {
|
|
backgroundColor: '#30404d',
|
|
}),
|
|
},
|
|
'input:disabled ~ &': {
|
|
boxShadow: 'none',
|
|
background: 'rgba(206,217,224,.5)',
|
|
...theme.applyStyles('dark', {
|
|
background: 'rgba(57,75,89,.5)',
|
|
}),
|
|
},
|
|
...theme.applyStyles('dark', {
|
|
boxShadow: '0 0 0 1px rgb(16 22 26 / 40%)',
|
|
backgroundColor: '#394b59',
|
|
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))',
|
|
}),
|
|
}));
|
|
|
|
const BpCheckedIcon = styled(BpIcon)({
|
|
backgroundColor: '#137cbd',
|
|
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
|
|
'&::before': {
|
|
display: 'block',
|
|
width: 16,
|
|
height: 16,
|
|
backgroundImage: 'radial-gradient(#fff,#fff 28%,transparent 32%)',
|
|
content: '""',
|
|
},
|
|
'input:hover ~ &': {
|
|
backgroundColor: '#106ba3',
|
|
},
|
|
});
|
|
|
|
// Inspired by blueprintjs
|
|
function BpRadio(props: RadioProps) {
|
|
return (
|
|
<Radio
|
|
disableRipple
|
|
color="default"
|
|
checkedIcon={<BpCheckedIcon />}
|
|
icon={<BpIcon />}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default function CustomizedRadios() {
|
|
return (
|
|
<FormControl>
|
|
<FormLabel id="demo-customized-radios">Gender</FormLabel>
|
|
<RadioGroup
|
|
defaultValue="female"
|
|
aria-labelledby="demo-customized-radios"
|
|
name="customized-radios"
|
|
>
|
|
<FormControlLabel value="female" control={<BpRadio />} label="Female" />
|
|
<FormControlLabel value="male" control={<BpRadio />} label="Male" />
|
|
<FormControlLabel value="other" control={<BpRadio />} label="Other" />
|
|
<FormControlLabel
|
|
value="disabled"
|
|
disabled
|
|
control={<BpRadio />}
|
|
label="(Disabled option)"
|
|
/>
|
|
</RadioGroup>
|
|
</FormControl>
|
|
);
|
|
}
|