ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2024-12-23 13:39:54 +05:30
Code Issues Packages Projects Releases Wiki Activity

Fix scroll direction for the SlideMotion component

Browse Source
This commit is contained in:
ErickSkrauch 2021-03-26 21:09:03 +01:00
parent 068115d7c2
commit bda3994138
No known key found for this signature in database
GPG Key ID: 669339FCBB30EE0E
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/app/components/ui/motion/SlideMotion.tsx
View File

@ -77,9 +77,8 @@ class SlideMotion extends React.PureComponent<Props, State> {
<div <div
className={styles.container} className={styles.container}
style={{ style={{
// TODO: inverse for RTL language // @ts-ignore see https://stackoverflow.com/a/52013197/5184751
WebkitTransform: `translateX(-${interpolatingStyle.transform}%)`, '--transition-progress': `${interpolatingStyle.transform}%`,
transform: `translateX(-${interpolatingStyle.transform}%)`,
}} }}
> >
{React.Children.map(children, (child, index) => ( {React.Children.map(children, (child, index) => (

6
packages/app/components/ui/motion/slide-motion.scss
View File

@ -1,5 +1,11 @@
.container { .container {
white-space: nowrap; white-space: nowrap;
transform: translate(var(--transition-progress));
html[dir='ltr'] & {
// noinspection CssInvalidFunction works fine in a browser (:
transform: translate(calc(var(--transition-progress) * -1));
}
} }
.item { .item {