jquery.makeCollapsible: Align toggle based on content language

The collapsible toggle button is in user interface language but the alignment
of this button should fit to the direction of the content language.

Change-Id: I31927b8e091bdf81458c7d3d0cd5f6040af5f0f4

diff --git a/resources/src/jquery/jquery.makeCollapsible.css b/resources/src/jquery/jquery.makeCollapsible.css
index 0f47150..2e5efba 100644 (file)
--- a/resources/src/jquery/jquery.makeCollapsible.css
+++ b/resources/src/jquery/jquery.makeCollapsible.css
@@ -6,18 +6,38 @@
        -ms-user-select: none;
        user-select: none;
 }
+/* Align the toggle based on the direction of the content language */
+/* @noflip */
+.mw-content-ltr .mw-collapsible-toggle,
+.mw-content-rtl .mw-content-ltr .mw-collapsible-toggle {
+       float: right;
+}
+/* @noflip */
+.mw-content-rtl .mw-collapsible-toggle,
+.mw-content-ltr .mw-content-rtl .mw-collapsible-toggle {
+       float: left;
+}
+
 .mw-customtoggle,
 .mw-collapsible-toggle {
        cursor: pointer;
 }
 
 /* collapse links in captions should be inline */
-caption .mw-collapsible-toggle {
+caption .mw-collapsible-toggle,
+.mw-content-ltr caption .mw-collapsible-toggle,
+.mw-content-rtl caption .mw-collapsible-toggle,
+.mw-content-rtl .mw-content-ltr caption .mw-collapsible-toggle,
+.mw-content-ltr .mw-content-rtl caption .mw-collapsible-toggle {
        float: none;
 }
 
 /* list-items go as wide as their parent element, don't float them inside list items */
-li .mw-collapsible-toggle {
+li .mw-collapsible-toggle,
+.mw-content-ltr li .mw-collapsible-toggle,
+.mw-content-rtl li .mw-collapsible-toggle,
+.mw-content-rtl .mw-content-ltr li .mw-collapsible-toggle,
+.mw-content-ltr .mw-content-rtl li .mw-collapsible-toggle {
        float: none;
 }