mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-17 03:08:12 +00:00
10076c1b61
Split apart the extensive mainmenu.less file into a few component-like
files: MainMenu, MainMenuFooter, MainMenuItem, and NotificationsOverlay.
Two variables, @duration and @easing, were moved to minerva.variables.
The separation is imperfect as some overlap still exists but is far
better than before.
This patch is focused on division without regression. Please limit any
refactor requests.
No user visible changes intended. The only selector that was cognizantly
changed was to duplicate the drawer visibility on main menu and
notifications overlay:
// Old: mainmenu.less
.navigation-drawer,
.transparent-shield {
visibility: visible;
}
// ---
// New: MainMenu.less
#mw-mf-page-left,
.transparent-shield {
visibility: visible;
}
// New: NotifcationsOverlay.less
.navigation-enabled {
.notifications-overlay {
visibility: visible;
}
}
The is unfortunately useless. It is best to reproduce these changes
locally by renaming mainmenu.less to MainMenu.less and extract parts to
MainMenuFooter, MainMenuItem, and NotificationsOverlay LESS files until
the result matches.
Bug: T206354
Change-Id: I8d37c5346efcf39a4d76322fd6e6af3fff96ac53
72 lines
1.3 KiB
Plaintext
72 lines
1.3 KiB
Plaintext
@import '../../minerva.less/minerva.variables';
|
|
|
|
/* 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;
|
|
|
|
&: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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|