IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Components: Loaders: SectionHeader: fix style

Browse Source
This commit is contained in:
Viktor Fomin 2022-11-07 17:42:13 +05:00
parent a70e2339d9
commit adf7362477
2 changed files with 29 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/common/components/Loaders/SectionHeaderLoader/SectionHeaderLoader.js
View File

@ -25,20 +25,8 @@ const SectionHeaderLoader = ({ id, className, style, ...rest }) => {
<StyledBox1>
<RectangleLoader
title={title}
width="17"
height="17"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="67"
height="17"
width="100%"
height="100%"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
@ -62,18 +50,6 @@ const SectionHeaderLoader = ({ id, className, style, ...rest }) => {
speed={speed}
animate={animate}
/>
<RectangleLoader
title={title}
width="17"
height="17"
borderRadius={borderRadius}
backgroundColor={backgroundColor}
foregroundColor={foregroundColor}
backgroundOpacity={backgroundOpacity}
foregroundOpacity={foregroundOpacity}
speed={speed}
animate={animate}
/>
</StyledBox2>
</StyledContainer>
);

40
packages/common/components/Loaders/SectionHeaderLoader/StyledSectionHeaderLoader.js
View File

@ -5,31 +5,45 @@ import { tablet, mobile } from "@docspace/components/utils/device";
const StyledContainer = styled.div`
width: 100%;
display: grid;
grid-template-columns: 100px 0fr 42px;
grid-template-columns: 140px 0fr 17px;
grid-template-rows: 1fr;
grid-column-gap: 16px;
margin-top: 20px;
margin-bottom: 18px;
grid-column-gap: 8px;
margin-top: 22px;
margin-bottom: 23px;
align-items: center;
@media ${mobile}, ${tablet} {
margin-top: 23px;
grid-template-columns: 100px 1fr 42px;
@media ${tablet} {
margin-top: 16px;
margin-bottom: 25px;
grid-template-columns: 163px 1fr 17px;
}
@media ${mobile} {
margin-top: 14px;
margin-bottom: 23px;
grid-template-columns: 140px 1fr 17px;
}
`;
const StyledBox1 = styled.div`
width: 100%;
display: grid;
grid-template-columns: 17px 67px;
grid-template-rows: 1fr;
grid-column-gap: 16px;
width: 140px;
height: 24px;
@media ${tablet} {
width: 163px;
height: 28px;
}
@media ${mobile} {
width: 140px;
height: 24px;
}
`;
const StyledBox2 = styled.div`
display: grid;
grid-template-columns: 17px 17px;
grid-template-rows: 1fr;
grid-column-gap: 8px;
`;
const StyledSpacer = styled.div``;