mediawiki-skins-MinervaNeue/components/ToggleList/MenuListItem.less
jdlrobson c0f08790ea Remove the mw-ui-icon hacks and overrides
Note: this agitates T230232 again - when merging this please
make sure a merge for I929090848f3e04647a97f4979ec78682623fa070
is pending.

In various places we try to override the default mw-ui-icon behaviours
The hacks need to be removed as part of addressing the core problem.

Changes:
* Wherever we use mw-ui-icon-before in PHP - wrap the label with a span
so that label font-size is altered where needed - not the icon
* Where a small icon is needed us isSmall parameter for the Icon component
* Apply font-size to labels of mw-ui-icon-before elements
* The browser tests need a slight update to access the span element inside
a menu item - in the case of the logout button the label is always hidden,
so we need to check the visibility of the parent element (secondary_action)

Bug: T229440
Depends-On:  I3f803ec4c9068b30aa93b803391aa4d65d8310ff
Change-Id: I07e4ae233979636b739f1117dd7703571e0a9366
2019-09-10 10:53:20 -07:00

42 lines
792 B
Plaintext

// A MenuListItem is a ToggleList item for menus.
@import '../../minerva.less/minerva.variables.less';
@import '../../minerva.less/minerva.mixins.less';
.toggle-list-item {
display: block;
padding: 1em;
//
// Make the app feel like an app, not a JPEG. When hovering over a menu item, add a little
// interactivity.
&:hover {
background: @grayLightest;
}
}
.toggle-list-item__anchor {
display: block;
&:hover {
text-decoration: none;
}
&:visited, &:active {
color: @grayMediumDark;
}
}
.toggle-list-item__icon {
vertical-align: middle;
}
.toggle-list-item__label {
// Left-align text. Button elements are centered.
text-align: left;
color: @grayMediumDark;
font-weight: bold;
white-space: nowrap;
vertical-align: middle;
font-size: @font-size-minerva-small;
}