mediawiki-skins-MinervaNeue/components/ToggleList/MenuListItem.less
jdlrobson be641141e6 Fixes Click/Tap Targets on User and Page Actions Menu Item
Bug: T288678
Change-Id: I47d6f884cfe98ccbe68a877ba12b95a4d7ab788c
2021-09-17 19:15:18 +00:00

45 lines
967 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;
//
// Make the app feel like an app, not a JPEG. When hovering over a menu item, add a little
// interactivity.
&:hover {
background: @grayLightest;
}
a {
padding: 0.75em 0.875em;
}
}
.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 );
}