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

Merge branch 'release/v2.6.0' into bugfix/Bug69117

Browse Source
This commit is contained in:
Viktor Fomin 2024-07-22 15:20:52 +03:00
commit 44a08b5287
1 changed files with 44 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
packages/shared/components/color-theme/sub-components/StyledCircle.ts
View File

@ -41,53 +41,53 @@ const StyledCircle = styled.div<{
isAnimation?: boolean; isAnimation?: boolean;
inConversion?: boolean; inConversion?: boolean;
}>` }>`
.circle__mask, .circle__mask,
.circle__fill { .circle__fill {
width: 16px; width: 16px;
height: 16px; height: 16px;
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
} }
${(props) =>
props.percent === 0 || (props.isAnimation && props.inConversion)
? css`
.circle__fill {
animation: ${rotate360} 2s linear infinite;
transform: translate(0);
}
`
: css`
.circle__mask {
clip: rect(0px, 16px, 16px, 8px);
}
.circle__fill { ${(props) =>
animation: fill-rotate ease-in-out none; props.percent === 0 || (props.isAnimation && props.inConversion)
transform: rotate(${props.percent * 1.8}deg); ? css`
} .circle__fill {
`} animation: ${rotate360} 2s linear infinite;
transform: translate(0);
.circle__mask .circle__fill { }
clip: rect(0px, 8px, 16px, 0px); `
background-color: ${(props) => : css`
props.theme.filesPanels.upload.loadingButton.color}; .circle__mask {
clip: rect(0px, 16px, 16px, 8px);
}
.circle__fill {
animation: fill-rotate ease-in-out none;
transform: rotate(${props.percent * 1.8}deg);
}
`}
.circle__mask .circle__fill {
clip: rect(0px, 8px, 16px, 0px);
background-color: ${(props) =>
props.theme.filesPanels.upload.loadingButton.color};
}
.circle__mask.circle__full {
animation: fill-rotate ease-in-out none;
transform: rotate(${(props) => props.percent * 1.8}deg);
}
@keyframes fill-rotate {
0% {
transform: rotate(0deg);
} }
100% {
.circle__mask.circle__full { transform: rotate(${(props) => props.percent * 1.8}deg);
animation: fill-rotate ease-in-out none;
= transform: rotate(${(props) => props.percent * 1.8}deg);
} }
}
@keyframes fill-rotate { `;
0% {
transform: rotate(0deg);
}
100% {
= transform: rotate(${(props) => props.percent * 1.8}deg);
}
}
`;
StyledCircle.defaultProps = { theme: Base }; StyledCircle.defaultProps = { theme: Base };