mirror of
https://gh.wpcy.net/https://github.com/elementor/one-click-accessibility.git
synced 2026-04-25 18:48:00 +08:00
c067ae8b4b
* fix: layout on the small and medium devices * update: change components to styled components * refactor: position settings wrapper into a separate component
49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
import Box from '@elementor/ui/Box';
|
|
import Grid from '@elementor/ui/Grid';
|
|
import Typography from '@elementor/ui/Typography';
|
|
import { styled } from '@elementor/ui/styles';
|
|
import { ColorPicker, IconSelect, IconSize } from '@ea11y/components';
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
const StyledGrid = styled(Grid)`
|
|
display: grid;
|
|
gap: ${({ theme }) => theme.spacing(5)};
|
|
padding: ${({ theme }) => theme.spacing(2)};
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
${({ theme }) => theme.breakpoints.down('lg')} {
|
|
grid-template-columns: repeat(1, 1fr);
|
|
}
|
|
`;
|
|
|
|
const IconDesignSettings = (props) => {
|
|
return (
|
|
<Grid padding={2} border={1} borderColor="divider" {...props}>
|
|
<Box marginBottom={2}>
|
|
<Typography variant="subtitle1">
|
|
{__('Design', 'pojo-accessibility')}
|
|
</Typography>
|
|
|
|
<Typography variant="body2">
|
|
{__(
|
|
"Customize your accessibility button's color, icon, and size to match your brand.",
|
|
'pojo-accessibility',
|
|
)}
|
|
</Typography>
|
|
</Box>
|
|
|
|
<StyledGrid>
|
|
<Box display="flex" flexDirection="column" gap={5}>
|
|
<IconSelect />
|
|
<IconSize />
|
|
</Box>
|
|
|
|
<Box>
|
|
<ColorPicker />
|
|
</Box>
|
|
</StyledGrid>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
export default IconDesignSettings;
|
