[yew-devel] [PATCH yew-widget-toolkit-assets v2 7/7] don't use 'html[dir="rtl"]' for RTL behavior
Dominik Csapak
d.csapak at proxmox.com
Mon Jun 30 10:24:57 CEST 2025
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 at 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
More information about the yew-devel
mailing list