mirror of
https://ghproxy.net/https://github.com/elementor/one-click-accessibility.git
synced 2026-07-23 12:37:39 +08:00
74fc4809d8* Fix console errors in Analytics page * Fix console errors in Design page * Fix console errors in Accessibility statement page * Fix console errors in Accessibility scans page * Forward custom props to React to prevent invalid DOM attributes warning
89 lines
1.7 KiB
JavaScript
89 lines
1.7 KiB
JavaScript
import Box from '@elementor/ui/Box';
|
|
import Typography from '@elementor/ui/Typography';
|
|
import { styled } from '@elementor/ui/styles';
|
|
|
|
export const StyledStatsItem = styled(Box)`
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
padding: ${({ theme }) => theme.spacing(2, 2.5)};
|
|
|
|
border: 1px solid ${({ theme }) => theme.palette.divider};
|
|
border-radius: ${({ theme }) => theme.shape.borderRadius}px;
|
|
background: ${({ theme }) => theme.palette.background.default};
|
|
|
|
:nth-of-type(1) {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
}
|
|
|
|
:nth-of-type(2) {
|
|
grid-area: 1 / 2 / 2 / 3;
|
|
}
|
|
|
|
:nth-of-type(3) {
|
|
grid-area: 2 / 1 / 3 / 3;
|
|
}
|
|
|
|
:nth-of-type(4) {
|
|
grid-area: 1 / 3 / 3 / 4;
|
|
}
|
|
|
|
@media screen and (max-width: 960px) {
|
|
:nth-of-type(1) {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
}
|
|
|
|
:nth-of-type(2) {
|
|
grid-area: 2 / 1 / 3 / 2;
|
|
}
|
|
|
|
:nth-of-type(3) {
|
|
grid-area: 3 / 1 / 4 / 2;
|
|
}
|
|
|
|
:nth-of-type(4) {
|
|
grid-area: 4 / 1 / 5 / 2;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const StyledStatsItemContent = styled(Box)`
|
|
min-width: 150px;
|
|
min-height: 50px;
|
|
align-self: start;
|
|
`;
|
|
|
|
export const StyledStatsItemChart = styled(Box)`
|
|
margin-inline-start: ${({ theme }) => theme.spacing(2)};
|
|
|
|
@media screen and (max-width: 1200px) {
|
|
& {
|
|
display: none;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const StyledStatsItemTitle = styled(Typography, {
|
|
shouldForwardProp: (prop) => prop !== 'spacing',
|
|
})`
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
margin: 0;
|
|
margin-bottom: ${({ spacing, theme }) => theme.spacing(spacing || 2)};
|
|
|
|
color: ${({ theme }) => theme.palette.text.primary};
|
|
font-feature-settings:
|
|
'liga' off,
|
|
'clig' off;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 130%;
|
|
letter-spacing: 0.15px;
|
|
|
|
& svg {
|
|
margin-inline-start: ${({ theme }) => theme.spacing(1)};
|
|
}
|
|
`;
|
