mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-17 03:08:12 +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
77 lines
1.7 KiB
Plaintext
77 lines
1.7 KiB
Plaintext
@import '../../minerva.less/minerva.variables.less';
|
|
|
|
// stylelint-disable no-descending-specificity, selector-max-id
|
|
|
|
@menuLinkLineHeight: 24px;
|
|
|
|
// .menu
|
|
#mw-mf-page-left {
|
|
.secondary-action {
|
|
border: 0;
|
|
// T170362 - reset font size
|
|
font-size: 16px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
border-left: 1px solid @grayMediumLight;
|
|
color: transparent;
|
|
}
|
|
|
|
.primary-action {
|
|
// 1px for the logout icon border-left
|
|
margin-right: @iconSize + @iconGutterWidth * 2;
|
|
}
|
|
|
|
ul {
|
|
&:first-child {
|
|
li:first-child {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
li {
|
|
background-color: @background-color-base;
|
|
position: relative; // ensure the logout link in beta can be position absolute
|
|
border-top: 1px solid @colorGray14;
|
|
// offset the border for the icon by 1px
|
|
margin-top: -1px;
|
|
|
|
&:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
a {
|
|
color: @colorGray5;
|
|
// Overrides .mw-ui-icon `display: inline-block` so that the text is
|
|
// vertically centered. It also avoids whitespace issues.
|
|
display: flex;
|
|
align-items: center;
|
|
// Overrides .mw-ui-icon `line-height: 0` property so that the text is
|
|
// visible.
|
|
line-height: inherit;
|
|
max-width: 100%;
|
|
padding: @menuLinkLineHeight / 2 10px @menuLinkLineHeight / 2 15px;
|
|
|
|
// T233166
|
|
&.secondary-action {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: inset 4px 0 0 0 @colorProgressive;
|
|
text-decoration: none;
|
|
}
|
|
|
|
span {
|
|
// Overflow text is ellipsized in one line.
|
|
.text-overflow( @visible: false );
|
|
font-size: @font-size-minerva-small;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// stylelint-enable no-descending-specificity, selector-max-id
|