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

Web: Files: fixed StyledCircle

Browse Source
This commit is contained in:
Nikita Gopienko 2024-07-22 15:12:06 +03:00
parent 6d161b4a31
commit 04d3f01612
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;
inConversion?: boolean;
}>`
.circle__mask,
.circle__fill {
width: 16px;
height: 16px;
position: absolute;
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__mask,
.circle__fill {
width: 16px;
height: 16px;
position: absolute;
border-radius: 50%;
}
.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};
${(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 {
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);
}
.circle__mask.circle__full {
animation: fill-rotate ease-in-out none;
= transform: rotate(${(props) => props.percent * 1.8}deg);
100% {
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 };