[yew-devel] [PATCH yew-widget-toolkit-assets 3/6] page: animations: reverse the direction on X axis for RTL mode
Dominik Csapak
d.csapak at proxmox.com
Fri Jun 27 14:08:45 CEST 2025
e.g. the fade-from-right animation, should fade in from the left in RTL
mode.
Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
scss/_page.scss | 11 ++++++++---
1 file changed, 8 insertions(+), 3 deletions(-)
diff --git a/scss/_page.scss b/scss/_page.scss
index 4fb9295..e119550 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;
+ --rtl-factor: 1;
+}
+
+html[dir=rtl] {
+ --rtl-factor: -1;
}
.pwt-page-outer {
@@ -23,7 +28,7 @@
@keyframes page-animation-push-in {
from {
- transform: translateX(100%);
+ transform: translateX(calc(100% * var(--rtl-factor)));
transform-origin: left;
}
to {
@@ -38,7 +43,7 @@
transform-origin: left;
}
to {
- transform: translateX(-100%);
+ transform: translateX(calc(-100% * var(--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(--rtl-factor)));
}
to {
opacity: 1;
--
2.39.5
More information about the yew-devel
mailing list