Use text direction based on the context

A categorytree can be part of the user interface (in the sidebar) or
part of the content. The user interface and the content can have a
different text direction.

This change use the usual way to of bidi flipping based on the user
interface language direction and on the content direction like the class
mw-editsection in core.

The direction of the bullets in mixed directions will be fixed in
Ibfb0cb28f0086fb1b7d0997be2246bc120eea85e.

Bug: T288910
Change-Id: Ia420ef120cf4aa66a1e63c9cf3aa2438cc68da52
This commit is contained in:
Fomafix 2019-02-07 18:14:48 +01:00
parent c8d85702c7
commit 00dd5b2bce

View file

@ -23,11 +23,22 @@
* @author Daniel Kinzler, brightbyte.de
*/
/* On the list of subcategories hide the normal list bullet */
.client-js #mw-subcategories ul {
list-style: none;
}
/* and reduce the margin on the margin start side. */
/* @noflip */
.client-js #mw-subcategories .mw-content-ltr ul {
margin-left: 0.25em;
}
/* @noflip */
.client-js #mw-subcategories .mw-content-rtl ul {
margin-right: 0.25em;
}
#mw-panel .portal .body .CategoryTreeTag {
margin: 0;
font-size: 0.75em;
@ -38,10 +49,33 @@
padding: 0.25em 0;
}
/*
* Indent the children on each level on margin start side.
* A category tree in the sidebar is in user interface language therefor
* a flipped margin-left is the margin start side.
*/
.CategoryTreeChildren {
margin-left: 1.25em;
}
/*
* Category trees in the content are in content language and therefor
* an unflipped margin-left or margin-right is the margin start side.
* Use margin: 0 0 0 1.25em instead of margin-left: 1.25em here to
* overwrite the flipped margin-left from above.
*/
/* @noflip */
.mw-content-ltr .CategoryTreeChildren,
.mw-content-rtl .mw-content-ltr .CategoryTreeChildren {
margin: 0 0 0 1.25em;
}
/* @noflip */
.mw-content-rtl .CategoryTreeChildren,
.mw-content-ltr .mw-content-rtl .CategoryTreeChildren {
margin: 0 1.25em 0 0;
}
.CategoryTreeBullet,
.CategoryTreeEmptyBullet {
cursor: default;
@ -95,7 +129,3 @@
.CategoryTreeNotice {
font-style: italic;
}
.CategoryTreeSection {
direction: ltr;
}