MDL-76457 tool_usertours: Fix tour popovers in RTL

roland04 · Nov 14, 2023 · e0f753b · e0f753b
1 parent 991926e
commit e0f753b
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 0 deletions.
diff --git a/theme/boost/scss/moodle/tool_usertours.scss b/theme/boost/scss/moodle/tool_usertours.scss
@@ -103,6 +103,26 @@ span[data-flexitour="container"] {
             }
         }
     }
+
+    // RTL specific styles.
+    .dir-rtl & {
+        &[x-placement^="right"] {
+            margin-left: $popover-arrow-width;
+            div[data-role="arrow"] {
+                transform: rotate(180deg);
+                left: -$popover-arrow-width;
+                right: auto;
+            }
+        }
+        &[x-placement^="left"] {
+            margin-right: $popover-arrow-width;
+            div[data-role="arrow"] {
+                transform: rotate(180deg);
+                left: auto;
+                right: -$popover-arrow-width;
+            }
+        }
+    }
 }
 
 // Hack the bone! Hack the bone!

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -35984,6 +35984,22 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
   border-left-width: 0;
   border-right-color: #fff;
 }
+.dir-rtl span[data-flexitour=container][x-placement^=right] {
+  margin-left: 1rem;
+}
+.dir-rtl span[data-flexitour=container][x-placement^=right] div[data-role=arrow] {
+  transform: rotate(180deg);
+  left: -1rem;
+  right: auto;
+}
+.dir-rtl span[data-flexitour=container][x-placement^=left] {
+  margin-right: 1rem;
+}
+.dir-rtl span[data-flexitour=container][x-placement^=left] div[data-role=arrow] {
+  transform: rotate(180deg);
+  left: auto;
+  right: -1rem;
+}
 
 [data-region=drawer] [data-flexitour=container] {
   /*rtl:ignore*/

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
@@ -35918,6 +35918,22 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
   border-left-width: 0;
   border-right-color: #fff;
 }
+.dir-rtl span[data-flexitour=container][x-placement^=right] {
+  margin-left: 1rem;
+}
+.dir-rtl span[data-flexitour=container][x-placement^=right] div[data-role=arrow] {
+  transform: rotate(180deg);
+  left: -1rem;
+  right: auto;
+}
+.dir-rtl span[data-flexitour=container][x-placement^=left] {
+  margin-right: 1rem;
+}
+.dir-rtl span[data-flexitour=container][x-placement^=left] div[data-role=arrow] {
+  transform: rotate(180deg);
+  left: auto;
+  right: -1rem;
+}
 
 [data-region=drawer] [data-flexitour=container] {
   /*rtl:ignore*/