mediawiki-skins-MinervaNeue/resources/skins.minerva.mainMenu.styles/MainMenuItem.less
jdlrobson 7280d255c0 Dev: Prep for storybook
* Remove ambiguity in imports - say the file extension
'less' for all instances of variables and mixins.
* Separate toast styles from drawer styles so they can be
imported separately
* associate header-action selector with its parent
(.overlay-header) not parent's parent (.overlay) so it can be imported
and rendered without the Overlay.

Change-Id: Ib7e19a440ba095d6424d35305fb41d643ca9764c
2019-08-21 12:20:26 -07:00

77 lines
1.4 KiB
Plaintext

@import '../../minerva.less/minerva.variables.less';
/* stylelint-disable no-descending-specificity */
@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;
padding-right: 0;
border-left: 1px solid @grayMediumLight;
}
.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: @skinContentBgColor;
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;
font-size: 0.875em;
&:first-child {
border-top: 0;
}
a {
color: @colorGray5;
display: block;
padding: @menuLinkLineHeight / 2 10px @menuLinkLineHeight / 2 15px;
// Overflowing text is ellipsized.
max-width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&:hover {
box-shadow: inset 4px 0 0 0 @colorProgressive;
text-decoration: none;
}
&:visited,
&:active {
color: @colorGray5;
}
&.mw-ui-icon {
font-weight: bold;
line-height: 1.857; // equals `26px` at `font-size: 14px` above
&:before {
font-size: 16px;
}
}
}
}
}
}