Make menuGroup.mustache use togglelist classes, ensuring ToggleList HTML is consistent. Remove duplicated CSS

Bug: T343920
Change-Id: I567d20171b0e511d00922adf250f97b9b8ed146b

includes/Skins/ToggleList/DropDownList.less

@@ -6,6 +6,12 @@
 	// When cursor is pointer and -webkit-tap-highlight-color is set, the color does not seem to
 	// transition. Clear it.
 	-webkit-tap-highlight-color: transparent;
+
+	.toggle-list-item:hover {
+		// Make the app feel like an app, not a JPEG. When hovering over a menu item, add a little
+		// interactivity.
+		background: @background-color-light;
+	}
 }
 
 // Without the minerva-animations-ready class, DropDownList can appear and

includes/Skins/ToggleList/MenuListItem.less

@@ -1,42 +0,0 @@
-// A MenuListItem is a ToggleList item for menus.
-
-@import '../../../minerva.less/minerva.variables.less';
-@import '../../../minerva.less/minerva.mixins.less';
-@import 'mediawiki.mixins.less';
-
-.toggle-list-item {
-	display: block;
-
-	//
-	// Make the app feel like an app, not a JPEG. When hovering over a menu item, add a little
-	// interactivity.
-	&:hover {
-		background: @background-color-light;
-	}
-
-	a {
-		padding: 0.75em 0.875em;
-	}
-}
-
-.toggle-list-item__anchor {
-	display: flex;
-	align-items: center;
-	padding: 0.75em 0.875em;
-
-	&:hover {
-		text-decoration: none;
-	}
-
-	&:visited, &:active {
-		color: @color-subtle;
-	}
-}
-
-.toggle-list-item__label {
-	color: @color-subtle;
-	font-weight: bold;
-	font-size: @font-size-minerva-small;
-	// Overflow text is ellipsized in one line.
-	.text-overflow( @visible: false );
-}

includes/Skins/ToggleList/ToggleList.less

@@ -1,4 +1,28 @@
 @import '../../../minerva.less/minerva.variables.less';
+@import '../../../minerva.less/minerva.mixins.less';
+@import 'mediawiki.mixins.less';
+
+.toggle-list-item {
+	display: block;
+}
+
+.toggle-list-item__anchor {
+	display: flex;
+	align-items: center;
+	padding: 0.75em 0.875em;
+
+	&:hover {
+		text-decoration: none;
+	}
+}
+
+.toggle-list-item__label {
+	color: @color-subtle;
+	font-weight: bold;
+	font-size: @font-size-minerva-small;
+	// Overflow text is ellipsized in one line.
+	.text-overflow( @visible: false );
+}
 
 .toggle-list__checkbox {
 	// Always occlude the checkbox. The checkbox display cannot be none since its focus state is used

includes/Skins/menuGroup.mustache

@@ -1,9 +1,8 @@
-<li class="{{class}}">
+<li class="toggle-list-item {{class}}">
 	{{#components}}
-    <a class="{{class}}"
-    {{#array-attributes}}{{key}}="{{value}}"{{/array-attributes}}>
+	<a class="toggle-list-item__anchor {{class}}" {{#array-attributes}}{{key}}="{{value}}"{{/array-attributes}}>
 		{{#data-icon}}{{>Icon}}{{/data-icon}}
-      <span>{{label}}</span>
+		<span class="toggle-list-item__label">{{label}}</span>
 	</a>
 	{{/components}}
 </li>

resources/skins.minerva.amc.styles/index.less

@@ -6,7 +6,6 @@
 
 // wgMinervaPersonalMenu
 @import '../../includes/Skins/ToggleList/DropDownList.less';
-@import '../../includes/Skins/ToggleList/MenuListItem.less';
 
 // wgMinervaPersonalMenu
 @import '../../resources/skins.minerva.amc.styles/userMenu.less';

resources/skins.minerva.base.styles/buttons.less

@@ -1,8 +1,5 @@
 @import 'mediawiki.skin.variables.less';
 
-/* stylelint-disable no-descending-specificity */
-/* stylelint-disable selector-max-id */
-
 // Make sure label vertically aligns with icon
 .cdx-button {
 	display: inline-flex;
@@ -12,8 +9,7 @@
 
 // Apply spacing between icons and text in buttons and menu items
 .toggle-list-item__anchor,
-.cdx-button,
-#mw-mf-page-left ul li a {
+.cdx-button {
 	.minerva-icon + span:not( :empty ) {
 		margin-left: 8px;
 	}

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

@@ -1,20 +1,12 @@
 @import '../../minerva.less/minerva.variables.less';
 @import 'mediawiki.mixins.less';
 
-// stylelint-disable no-descending-specificity, selector-max-id
-
-@menuLinkLineHeight: 24px;
+// stylelint-disable selector-max-id
 
 // .menu
 #mw-mf-page-left {
 	ul {
-		&:first-child {
-			li:first-child {
-				border-top: 0;
-			}
-		}
-
-		li {
+		.toggle-list-item {
 			background-color: @background-color-base;
 			position: relative; // ensure the logout link in beta can be position absolute
 			border-top: @border-width-base @border-style-base #eaecf0;
@@ -25,31 +17,11 @@
 				border-top: 0;
 			}
 
-			a {
-				color: @color-subtle;
-				// 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;
-
-				&:hover {
+			.toggle-list-item__anchor:hover {
 				box-shadow: inset 4px 0 0 0 @box-shadow-color-progressive--focus;
 				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
+// stylelint-enable selector-max-id