[yew-devel] [PATCH yew-widget-toolkit-assets v2 7/7] don't use 'html[dir="rtl"]' for RTL behavior

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

we can either use the 'inline' variants, or use the ':dir()' selector
that's available in chrome since 2023

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
new in v2
 scss/_datatable.scss | 10 ++--------
 scss/_menu.scss      | 11 +++++------
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/scss/_datatable.scss b/scss/_datatable.scss
index 2a0d5c3..752c675 100644
--- a/scss/_datatable.scss
+++ b/scss/_datatable.scss
@@ -168,14 +168,8 @@
     opacity: var(--pwt-tmp-trigger-opacity);
     transition: opacity 0.2s ease-in-out;
 
-    top: 0px;
-    bottom: 0px;
-    right: 0px;
-}
-
-html[dir="rtl"] .pwt-datatable-header-menu-trigger {
-    right: auto;
-    left: 0px;
+    inset-block: 0px;
+    inset-inline-end: 0px;
 }
 
 .pwt-datatable-header-anchor {
diff --git a/scss/_menu.scss b/scss/_menu.scss
index 1f81a0f..2dcd3c3 100644
--- a/scss/_menu.scss
+++ b/scss/_menu.scss
@@ -121,11 +121,10 @@ ul.pwt-menu {
 		margin-inline-start: var(--pwt-spacer-2);
 		font-size: map-get($font-size, "title-medium");
 		line-height: map-get($line-height, "title-medium");
-	}
-}
 
-/* change arrow icon direction */
-/* Note: :dir(rtl) only works with firefox, so we cant use that. */
-html[dir="rtl"] .pwt-menu-item-arrow {
-	transform: scaleX(-1);
+                /* change arrow icon direction */
+                &:dir(rtl) {
+                    transform: scaleX(-1);
+                }
+	}
 }
-- 
2.39.5



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