From 559db765b37a730d1ce03e8aeb5ea1d1a3d00599 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Fri, 10 Nov 2023 11:52:26 +0100
Subject: [PATCH 1/2] MDL-76457 theme_boost: Fix bootstrap popovers in RTL

- Fix the arrow placement for bootstrap popovers in RTL mode.
- Remove unneded css parser workaround for popover arrows.
  After MDL-67386 was integrated those changes were not needed anymore.
---
 theme/boost/scss/moodle/bootstrap-rtl.scss | 21 +++++++++++
 theme/boost/scss/moodle/undo.scss          | 23 ------------
 theme/boost/style/moodle.css               | 43 ++++++++--------------
 theme/classic/style/moodle.css             | 43 ++++++++--------------
 4 files changed, 53 insertions(+), 77 deletions(-)

diff --git a/theme/boost/scss/moodle/bootstrap-rtl.scss b/theme/boost/scss/moodle/bootstrap-rtl.scss
index ede468e9c7a..f6a99006a33 100644
--- a/theme/boost/scss/moodle/bootstrap-rtl.scss
+++ b/theme/boost/scss/moodle/bootstrap-rtl.scss
@@ -40,4 +40,25 @@
             right: auto;
         }
     }
+
+    .popover {
+        &.bs-popover-right,
+        &.bs-popover-auto[x-placement^="right"] {
+            margin-right: 0;
+            margin-left: $popover-arrow-height;
+            .arrow {
+                transform: rotate(180deg);
+                left: subtract(-$popover-arrow-height, $popover-border-width);
+            }
+        }
+        &.bs-popover-left,
+        &.bs-popover-auto[x-placement^="left"] {
+            margin-right: $popover-arrow-height;
+            margin-left: 0;
+            .arrow {
+                transform: rotate(180deg);
+                right: subtract(-$popover-arrow-height, $popover-border-width);
+            }
+        }
+    }
 }
diff --git a/theme/boost/scss/moodle/undo.scss b/theme/boost/scss/moodle/undo.scss
index c9c41a6d77f..a6bfa397435 100644
--- a/theme/boost/scss/moodle/undo.scss
+++ b/theme/boost/scss/moodle/undo.scss
@@ -139,29 +139,6 @@ body:not(.jsenabled) .langmenu:hover > .dropdown-menu,
         }
     }
 }
-/* Force positioning of popover arrows.
- *
- * The Css prefixer used in Moodle does not support complex calc statements used
- * in Bootstrap 4 CSS. For example:
- * calc((0.5rem + 1px) * -1); is stripped out by lib/php-css-parser/Parser.php.
- * See MDL-61879. For now the arrow positions of popovers are fixed until this is resolved.
- */
-.bs-popover-right .arrow,
-.bs-popover-auto[x-placement^="right"] .arrow {
-    left: -9px;
-}
-.bs-popover-left .arrow,
-.bs-popover-auto[x-placement^="left"] .arrow {
-    right: -9px;
-}
-.bs-popover-top .arrow,
-.bs-popover-auto[x-placement^="top"] .arrow {
-    bottom: -9px;
-}
-.bs-popover-bottom .arrow,
-.bs-popover-auto[x-placement^="bottom"] .arrow {
-    top: -9px;
-}
 
 // Fixes an issue on Safari when the .custom-select is inside a .card class.
 .custom-select {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 8f6b429c543..5ad2ee60458 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -12727,6 +12727,22 @@ a.text-dark:hover, a.text-dark:focus {
   left: 0;
   right: auto;
 }
+.dir-rtl .popover.bs-popover-right, .dir-rtl .popover.bs-popover-auto[x-placement^=right] {
+  margin-right: 0;
+  margin-left: 0.5rem;
+}
+.dir-rtl .popover.bs-popover-right .arrow, .dir-rtl .popover.bs-popover-auto[x-placement^=right] .arrow {
+  transform: rotate(180deg);
+  left: calc(-0.5rem - 1px);
+}
+.dir-rtl .popover.bs-popover-left, .dir-rtl .popover.bs-popover-auto[x-placement^=left] {
+  margin-right: 0.5rem;
+  margin-left: 0;
+}
+.dir-rtl .popover.bs-popover-left .arrow, .dir-rtl .popover.bs-popover-auto[x-placement^=left] .arrow {
+  transform: rotate(180deg);
+  right: calc(-0.5rem - 1px);
+}
 
 /**
  * Moodle variables
@@ -24947,33 +24963,6 @@ body:not(.jsenabled) .langmenu:hover > .dropdown-menu,
   z-index: inherit;
 }
 
-/* Force positioning of popover arrows.
- *
- * The Css prefixer used in Moodle does not support complex calc statements used
- * in Bootstrap 4 CSS. For example:
- * calc((0.5rem + 1px) * -1); is stripped out by lib/php-css-parser/Parser.php.
- * See MDL-61879. For now the arrow positions of popovers are fixed until this is resolved.
- */
-.bs-popover-right .arrow,
-.bs-popover-auto[x-placement^=right] .arrow {
-  left: -9px;
-}
-
-.bs-popover-left .arrow,
-.bs-popover-auto[x-placement^=left] .arrow {
-  right: -9px;
-}
-
-.bs-popover-top .arrow,
-.bs-popover-auto[x-placement^=top] .arrow {
-  bottom: -9px;
-}
-
-.bs-popover-bottom .arrow,
-.bs-popover-auto[x-placement^=bottom] .arrow {
-  top: -9px;
-}
-
 .custom-select {
   word-wrap: normal;
 }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index dc7921a3b91..87681748067 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -12727,6 +12727,22 @@ a.text-dark:hover, a.text-dark:focus {
   left: 0;
   right: auto;
 }
+.dir-rtl .popover.bs-popover-right, .dir-rtl .popover.bs-popover-auto[x-placement^=right] {
+  margin-right: 0;
+  margin-left: 0.5rem;
+}
+.dir-rtl .popover.bs-popover-right .arrow, .dir-rtl .popover.bs-popover-auto[x-placement^=right] .arrow {
+  transform: rotate(180deg);
+  left: calc(-0.5rem - 1px);
+}
+.dir-rtl .popover.bs-popover-left, .dir-rtl .popover.bs-popover-auto[x-placement^=left] {
+  margin-right: 0.5rem;
+  margin-left: 0;
+}
+.dir-rtl .popover.bs-popover-left .arrow, .dir-rtl .popover.bs-popover-auto[x-placement^=left] .arrow {
+  transform: rotate(180deg);
+  right: calc(-0.5rem - 1px);
+}
 
 /**
  * Moodle variables
@@ -24947,33 +24963,6 @@ body:not(.jsenabled) .langmenu:hover > .dropdown-menu,
   z-index: inherit;
 }
 
-/* Force positioning of popover arrows.
- *
- * The Css prefixer used in Moodle does not support complex calc statements used
- * in Bootstrap 4 CSS. For example:
- * calc((0.5rem + 1px) * -1); is stripped out by lib/php-css-parser/Parser.php.
- * See MDL-61879. For now the arrow positions of popovers are fixed until this is resolved.
- */
-.bs-popover-right .arrow,
-.bs-popover-auto[x-placement^=right] .arrow {
-  left: -9px;
-}
-
-.bs-popover-left .arrow,
-.bs-popover-auto[x-placement^=left] .arrow {
-  right: -9px;
-}
-
-.bs-popover-top .arrow,
-.bs-popover-auto[x-placement^=top] .arrow {
-  bottom: -9px;
-}
-
-.bs-popover-bottom .arrow,
-.bs-popover-auto[x-placement^=bottom] .arrow {
-  top: -9px;
-}
-
 .custom-select {
   word-wrap: normal;
 }

From b372929c9b11fa089c09a6d6cee6259bb42c0b0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Fri, 10 Nov 2023 12:57:23 +0100
Subject: [PATCH 2/2] MDL-76457 tool_usertours: Fix tour popovers in RTL

---
 theme/boost/scss/moodle/tool_usertours.scss | 20 ++++++++++++++++++++
 theme/boost/style/moodle.css                | 16 ++++++++++++++++
 theme/classic/style/moodle.css              | 16 ++++++++++++++++
 3 files changed, 52 insertions(+)

diff --git a/theme/boost/scss/moodle/tool_usertours.scss b/theme/boost/scss/moodle/tool_usertours.scss
index 79dee6c54fc..d7e67f3404d 100644
--- 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
index 5ad2ee60458..1ac03646ffa 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -25684,6 +25684,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
index 87681748067..5199d31aeac 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -25618,6 +25618,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*/