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
60 lines
1.4 KiB
JavaScript
60 lines
1.4 KiB
JavaScript
import { styled } from '@mui/material/styles';
|
|
import Button from '@mui/material/Button';
|
|
import Stack from '@mui/material/Stack';
|
|
import { purple } from '@mui/material/colors';
|
|
|
|
const BootstrapButton = styled(Button)({
|
|
boxShadow: 'none',
|
|
textTransform: 'none',
|
|
fontSize: 16,
|
|
padding: '6px 12px',
|
|
border: '1px solid',
|
|
lineHeight: 1.5,
|
|
backgroundColor: '#0063cc',
|
|
borderColor: '#0063cc',
|
|
fontFamily: [
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'Roboto',
|
|
'"Helvetica Neue"',
|
|
'Arial',
|
|
'sans-serif',
|
|
'"Apple Color Emoji"',
|
|
'"Segoe UI Emoji"',
|
|
'"Segoe UI Symbol"',
|
|
].join(','),
|
|
'&:hover': {
|
|
backgroundColor: '#0069d9',
|
|
borderColor: '#0062cc',
|
|
boxShadow: 'none',
|
|
},
|
|
'&:active': {
|
|
boxShadow: 'none',
|
|
backgroundColor: '#0062cc',
|
|
borderColor: '#005cbf',
|
|
},
|
|
'&:focus': {
|
|
boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)',
|
|
},
|
|
});
|
|
|
|
const ColorButton = styled(Button)(({ theme }) => ({
|
|
color: theme.palette.getContrastText(purple[500]),
|
|
backgroundColor: purple[500],
|
|
'&:hover': {
|
|
backgroundColor: purple[700],
|
|
},
|
|
}));
|
|
|
|
export default function CustomizedButtons() {
|
|
return (
|
|
<Stack spacing={2} direction="row">
|
|
<ColorButton variant="contained">Custom CSS</ColorButton>
|
|
<BootstrapButton variant="contained" disableRipple>
|
|
Bootstrap
|
|
</BootstrapButton>
|
|
</Stack>
|
|
);
|
|
}
|