[dev] divide main menu LESS

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

minerva.less/minerva.variables.less

@@ -136,3 +136,7 @@
 // Print specific
 @colorPrintSubtle: #999;
 @borderColorPrint: #999;
+
+// Animations
+@menu-animation-duration: 0.25s;
+@menu-animation-easing: ease-in-out;

resources/skins.minerva.mainMenu.styles/MainMenu.less

@@ -0,0 +1,131 @@
+// 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;
+		}
+	}
+}

resources/skins.minerva.mainMenu.styles/MainMenuFooter.less

@@ -0,0 +1,32 @@
+@import '../../minerva.less/minerva.variables';
+
+// todo: use .menu (or make a new BEM class). At time of writing, this would require additional
+//       changes to have sufficient specificity.
+#mw-mf-page-left {
+	ul {
+		// This is, like, the area for the disclaimare.
+		&.hlist {
+			li {
+				background-color: transparent;
+				border: 0;
+				margin: 0;
+				font-size: 0.75em; // equals `12px` at base `font-size: 16px`
+
+				// T173507
+				&:after {
+					content: none;
+				}
+
+				a {
+					color: @colorProgressive;
+					padding: 0.7em 12px;
+
+					&:hover {
+						background-color: transparent;
+						box-shadow: none;
+					}
+				}
+			}
+		}
+	}
+}

resources/skins.minerva.mainMenu.styles/MainMenuItem.less

@@ -0,0 +1,71 @@
+@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;
+					}
+				}
+			}
+		}
+	}
+}

resources/skins.minerva.mainMenu.styles/NotificationsOverlay.less

@@ -0,0 +1,82 @@
+@import '../../minerva.less/minerva.variables';
+@import '../../minerva.less/minerva.mixins';
+
+/* stylelint-disable no-descending-specificity */
+
+.navigation-enabled {
+	.notifications-overlay {
+		visibility: visible;
+	}
+}
+
+// needs to be more specific than .overlay rules
+.notifications-overlay.navigation-drawer {
+	right: 0;
+	height: 100%;
+	width: auto;
+	box-shadow: -5px 0 0 0 rgba( 0, 0, 0, 0.3 );
+}
+
+@media all and ( min-width: @width-breakpoint-tablet ) {
+	@rightDrawerLeftOffset: 100% - @rightDrawerWidth;
+
+	.notifications-overlay.navigation-drawer {
+		left: @rightDrawerLeftOffset;
+
+		.overlay-header {
+			padding-left: 0;
+			padding-right: 0;
+			margin: 0; // T210191
+			width: 100%; // T218731
+			// T170903
+			max-width: none;
+
+			.cancel {
+				// 0 because we want to have some tappable area to the left of the icon
+				left: 0;
+			}
+		}
+	}
+}
+
+@media all and ( min-width: @width-breakpoint-tablet ) {
+	.secondary-navigation-enabled {
+		#mw-mf-page-center {
+			left: -@rightDrawerWidth !important;
+			right: @rightDrawerWidth !important;
+			width: auto;
+		}
+	}
+}
+
+.animations {
+	// FIXME: Make animations a conditional class on the drawer itself
+	.notifications-overlay.navigation-drawer {
+		display: block;
+
+		// +2% to accommodate for the border/box-shadow
+		.transform( translate( 102%, 0 ) );
+		.transition-transform( @menu-animation-duration @menu-animation-easing, visibility 0s @menu-animation-duration; );
+
+		&.visible {
+			.transform( translate( 0, 0 ) );
+		}
+	}
+}
+
+.navigation-enabled.animations {
+	// FIXME: Menu shouldn't need to know about drawers but a cta drawer might be open
+	.drawer .position-fixed,
+	#mw-mf-page-center {
+		.transition-transform( @menu-animation-duration @menu-animation-easing );
+	}
+}
+
+.secondary-navigation-enabled.animations {
+	#mw-mf-page-center {
+		// override non-animated version
+		left: 0 !important;
+		.transform( translate( -@rightDrawerWidth, 0 ) );
+		width: 100%;
+	}
+}

skin.json

@@ -449,7 +449,10 @@
 				"desktop"
 			],
 			"styles": [
-				"resources/skins.minerva.mainMenu.styles/mainmenu.less"
+				"resources/skins.minerva.mainMenu.styles/MainMenu.less",
+				"resources/skins.minerva.mainMenu.styles/MainMenuItem.less",
+				"resources/skins.minerva.mainMenu.styles/MainMenuFooter.less",
+				"resources/skins.minerva.mainMenu.styles/NotificationsOverlay.less"
 			]
 		},
 		"skins.minerva.loggedin.styles": {