mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-16 02:41:54 +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
132 lines
2.8 KiB
Plaintext
132 lines
2.8 KiB
Plaintext
// Component of ui.less
|
|
// FIXME: Move to components/
|
|
@import '../../minerva.less/minerva.variables';
|
|
@import '../../minerva.less/minerva.mixins';
|
|
|
|
/* stylelint-disable no-descending-specificity */
|
|
|
|
// .menu
|
|
#mw-mf-page-left {
|
|
background-color: @primaryNavBackgroundColor;
|
|
float: left;
|
|
height: 100%;
|
|
// Add vertical scrollbar as needed.
|
|
overflow-y: auto;
|
|
|
|
ul {
|
|
padding-bottom: 22px;
|
|
}
|
|
}
|
|
|
|
.navigation-enabled {
|
|
#mw-mf-viewport {
|
|
// disable horizontal scrolling
|
|
overflow: hidden;
|
|
// the two following properties are needed to override the height set
|
|
// by position: fixed fallback on scroll event
|
|
min-height: 100%;
|
|
}
|
|
|
|
#mw-mf-page-center {
|
|
// Since we change the color of the body tag above we need to ensure the content has a white background
|
|
background: #fff;
|
|
position: absolute;
|
|
height: 100%;
|
|
// Overriden in mainmenuAnimation
|
|
left: @menuWidth;
|
|
}
|
|
|
|
// .menu
|
|
#mw-mf-page-left,
|
|
.transparent-shield {
|
|
visibility: visible;
|
|
}
|
|
|
|
.transparent-shield {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
// FIXME: overrides the .has-drawer background color when a drawer is open.
|
|
// Should be removed when T214045 is resolved.
|
|
.primary-navigation-enabled.has-drawer {
|
|
background-color: @primaryNavBackgroundColor;
|
|
}
|
|
|
|
.primary-navigation-enabled {
|
|
background-color: @primaryNavBackgroundColor;
|
|
|
|
// .menu
|
|
#mw-mf-page-left {
|
|
width: @menuWidth;
|
|
}
|
|
|
|
// FIXME: Menu shouldn't need to know about drawers but a cta drawer might be open
|
|
.drawer .position-fixed {
|
|
left: @menuWidth !important;
|
|
}
|
|
}
|
|
|
|
// FIXME: Cleanup animation css
|
|
.animations {
|
|
#mw-mf-page-center {
|
|
min-height: 100%;
|
|
|
|
// *2 to avoid weird glitch of left nav flickering after closing
|
|
@transition: @menu-animation-duration @menu-animation-easing, height 0s ( @menu-animation-duration * 2 );
|
|
.transition-transform( @transition );
|
|
}
|
|
|
|
// .menu
|
|
#mw-mf-page-left {
|
|
width: @menuWidth;
|
|
|
|
.transition( visibility 0s @menu-animation-duration );
|
|
}
|
|
}
|
|
|
|
.primary-navigation-enabled.animations {
|
|
// FIXME: Menu shouldn't need to know about drawers
|
|
.drawer .position-fixed,
|
|
#mw-mf-page-center {
|
|
// override non-animated version
|
|
left: 0 !important;
|
|
.transform( translate( @menuWidth, 0 ) );
|
|
}
|
|
|
|
// .menu
|
|
#mw-mf-page-left {
|
|
// make menu scrollable when open (on small screens)
|
|
position: static;
|
|
.transition( none );
|
|
}
|
|
}
|
|
|
|
@media all and ( min-width: @width-breakpoint-tablet ) {
|
|
.navigation-enabled {
|
|
// .menu
|
|
#mw-mf-page-center {
|
|
left: @menuWidthTablet;
|
|
}
|
|
}
|
|
|
|
.primary-navigation-enabled {
|
|
&.animations {
|
|
// FIXME: Menu shouldn't need to know about drawers
|
|
.drawer .position-fixed,
|
|
#mw-mf-page-center {
|
|
.transform( translate( @menuWidthTablet, 0 ) );
|
|
}
|
|
}
|
|
|
|
// .menu
|
|
#mw-mf-page-left {
|
|
width: @menuWidthTablet;
|
|
}
|
|
|
|
// FIXME: Menu shouldn't need to know about drawers but a cta drawer might be open
|
|
.drawer .position-fixed {
|
|
left: @menuWidthTablet !important;
|
|
}
|
|
}
|
|
}
|