mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-25 14:47:08 +00:00
46ac6048d7
Placing the text overflow on the span instead of the anchor element prevents issues like T287522#7272991 from occurring. Additionally: * Uses the `text-overflow` mixin on every toggle list item label instead of just the user link item as it simplifies the logic and presumably we'd want any text that overflows the menu to be handled the same. * Changes the anchor element to use flexbox/align-items to vertically center instead of relying on `vertical-align` both the span and the icon. Eventually, this should be put into core (see I029f97ba9d5e7f46c8aa175d9a6bbb45ef9615df) but we have to remove all the overrides that use vertical-align first. Bug: T287522 Change-Id: Ie0fbff9dfaf8444c76125df52931a687730b4ad1
42 lines
957 B
Plaintext
42 lines
957 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: 0.75em 0.875em;
|
|
|
|
//
|
|
// 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 {
|
|
// Override .mw-ui-icon `display: inline-block` so that the text is
|
|
// vertically centered. It also avoids whitespace issues.
|
|
display: flex;
|
|
align-items: center;
|
|
// Override .mw-ui-icon `line-height: 0` so that the text is visible.
|
|
line-height: inherit;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:visited, &:active {
|
|
color: @grayMediumDark;
|
|
}
|
|
}
|
|
|
|
.toggle-list-item__label {
|
|
color: @grayMediumDark;
|
|
font-weight: bold;
|
|
font-size: @font-size-minerva-small;
|
|
// Overflow text is ellipsized in one line.
|
|
.text-overflow( @visible: false );
|
|
}
|