[yew-devel] [PATCH yew-widget-toolkit-assets v2 3/7] page: animations: reverse the direction on X axis for RTL mode

[Dominik Csapak <d.csapak@proxmox.com>]

e.g. the fade-from-right animation, should fade in from the left in RTL
mode.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
changes from v1:
* use more specific variable name (to avoid clashes)
 scss/_page.scss | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/scss/_page.scss b/scss/_page.scss
index 4fb9295..7f0328b 100644
--- a/scss/_page.scss
+++ b/scss/_page.scss
@@ -2,6 +2,11 @@
     --page-animation-time: 0.3s;
     --page-animation-in: page-animation-push-in var(--page-animation-time) ease-out;
     --page-animation-out: page-animation-push-out var(--page-animation-time) ease-out;
+    --page-animation-rtl-factor: 1;
+}
+
+html[dir="rtl"] {
+  --page-animation-rtl-factor: -1;
 }
 
 .pwt-page-outer {
@@ -23,7 +28,7 @@
 
 @keyframes page-animation-push-in {
     from {
-        transform: translateX(100%);
+        transform: translateX(calc(100% * var(--page-animation-rtl-factor)));
         transform-origin: left;
     }
     to {
@@ -38,7 +43,7 @@
         transform-origin: left;
     }
     to {
-        transform: translateX(-100%);
+        transform: translateX(calc(-100% * var(--page-animation-rtl-factor)));
         transform-origin: left;
     }
 }
@@ -64,7 +69,7 @@
 @keyframes page-animation-fade-from-right-in {
     from {
         opacity: 0;
-        transform: translateX(10%);
+        transform: translateX(calc(10% *var(--page-animation-rtl-factor)));
     }
     to {
         opacity: 1;
-- 
2.39.5



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel