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

Shared: ProgressBar: Fix rtl in progress-bar

Browse Source
This commit is contained in:
Aleksandr Lushkin 2024-07-16 13:31:12 +02:00
parent c0a5306a19
commit 4d3e001477
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/shared/components/progress-bar/ProgressBar.styled.ts
View File

@ -46,15 +46,21 @@ const StyledProgressBarContainer = styled.div`
StyledProgressBarContainer.defaultProps = { theme: Base };
const loadingAnimation = keyframes`
const getLoadingAnimation = (dir: "ltr" | "rtl") => {
const isRtl = dir === "rtl";
const startValue = isRtl ? "50%" : "-50%";
const endValue = isRtl ? "-400%" : "400%";
return keyframes`
0% {
transform: translateX(-50%);
transform: translateX(${startValue});
}
100% {
transform: translateX(400%);
transform: translateX(${endValue});
}
`;
};
const StyledProgressBar = styled.div<{ percent: number }>`
width: 100%;
@ -65,7 +71,7 @@ const StyledProgressBar = styled.div<{ percent: number }>`
background-color: ${(props) => props.theme.progressBar.backgroundColor};
.progress-bar_percent {
float: left;
float: inline-start;
overflow: hidden;
max-height: 4px;
min-height: 4px;
@ -80,7 +86,8 @@ const StyledProgressBar = styled.div<{ percent: number }>`
width: 25%;
border-radius: 3px;
background: ${(props) => props.theme.progressBar.percent.background};
animation: ${loadingAnimation} 2s linear infinite;
animation: ${({ theme }) => getLoadingAnimation(theme.interfaceDirection)}
2s linear infinite;
}
`;