Use Codex provided arrow icons for the tree

It also adds an animation for the arrow matching other
recently Codex provided arrow icons adopted animations.

Change-Id: If8b2b45b24351ee5c8fc9ee1380563f5d5b88678
This commit is contained in:
Ebrahim Byagowi 2024-10-04 23:32:42 +03:30
parent b1e3b5f06d
commit 451aeceba1
2 changed files with 31 additions and 34 deletions

View file

@ -72,7 +72,7 @@
] ]
}, },
"ext.categoryTree.styles": { "ext.categoryTree.styles": {
"styles": "ext.categoryTree.styles.css" "styles": "ext.categoryTree.styles.less"
} }
}, },
"ResourceFileModulePaths": { "ResourceFileModulePaths": {

View file

@ -23,6 +23,9 @@
* @author Daniel Kinzler, brightbyte.de * @author Daniel Kinzler, brightbyte.de
*/ */
@import 'mediawiki.mixins.less';
@import 'mediawiki.skin.variables.less';
/* On the list of subcategories hide the normal list bullet */ /* On the list of subcategories hide the normal list bullet */
.client-js #mw-subcategories ul { .client-js #mw-subcategories ul {
list-style: none; list-style: none;
@ -78,14 +81,18 @@
.CategoryTreeBullet, .CategoryTreeBullet,
.CategoryTreeEmptyBullet { .CategoryTreeEmptyBullet {
-webkit-user-select: none; .user-select( none );
-moz-user-select: none; }
-ms-user-select: none;
user-select: none; .expandable-arrow( @param-color ) {
.cdx-mixin-css-icon(
@cdx-icon-down-triangle, @param-color, 14px,
false, center, text-top
);
} }
.CategoryTreeEmptyBullet { .CategoryTreeEmptyBullet {
color: #c0c0c0; .expandable-arrow( @color-disabled );
} }
/* Hide toggle buttons for clients without JavaScript */ /* Hide toggle buttons for clients without JavaScript */
@ -102,40 +109,30 @@
height: 0; height: 0;
} }
.CategoryTreeToggle {
transition: transform 250ms ease;
.expandable-arrow( @color-progressive );
&:visited {
.expandable-arrow( @color-visited );
}
}
.CategoryTreeEmptyBullet, .CategoryTreeEmptyBullet,
.CategoryTreeToggle[ aria-expanded='false' ] { .CategoryTreeToggle[ aria-expanded='false' ] {
border-top: 5px solid transparent; .mw-content-ltr &,
border-left: 10px solid; .mw-content-rtl .mw-content-ltr & {
border-bottom: 5px solid transparent; transform: rotate( -90deg );
border-right: 0 none;
} }
/* @noflip */ .mw-content-rtl &,
.mw-content-ltr .CategoryTreeEmptyBullet, .mw-content-ltr .mw-content-rtl & {
.mw-content-ltr .CategoryTreeToggle[ aria-expanded='false' ], transform: rotate( 90deg );
.mw-content-rtl .mw-content-ltr .CategoryTreeEmptyBullet,
.mw-content-rtl .mw-content-ltr .CategoryTreeToggle[ aria-expanded='false' ] {
border-left: 10px solid;
border-right: 0 none;
} }
/* @noflip */
.mw-content-rtl .CategoryTreeEmptyBullet,
.mw-content-rtl .CategoryTreeToggle[ aria-expanded='false' ],
.mw-content-ltr .mw-content-rtl .CategoryTreeEmptyBullet,
.mw-content-ltr .mw-content-rtl .CategoryTreeToggle[ aria-expanded='false' ] {
border-right: 10px solid;
border-left: 0 none;
}
.CategoryTreeToggle[ aria-expanded='true' ] {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid;
} }
.CategoryTreePageBullet { .CategoryTreePageBullet {
border-left: 10px solid transparent; margin-left: 14px;
} }
.CategoryTreeLabelPage { .CategoryTreeLabelPage {