From 559db765b37a730d1ce03e8aeb5ea1d1a3d00599 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= Date: Fri, 10 Nov 2023 11:52:26 +0100 Subject: [PATCH] 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; }