diff --git a/includes/Skins/ToggleList/DropDownList.less b/includes/Skins/ToggleList/DropDownList.less
index 3efe69500..437d1fd60 100644
--- a/includes/Skins/ToggleList/DropDownList.less
+++ b/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
diff --git a/includes/Skins/ToggleList/MenuListItem.less b/includes/Skins/ToggleList/MenuListItem.less
deleted file mode 100644
index d742e1804..000000000
--- a/includes/Skins/ToggleList/MenuListItem.less
+++ /dev/null
@@ -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 );
-}
diff --git a/includes/Skins/ToggleList/ToggleList.less b/includes/Skins/ToggleList/ToggleList.less
index a49874141..4887537ea 100644
--- a/includes/Skins/ToggleList/ToggleList.less
+++ b/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
diff --git a/includes/Skins/menuGroup.mustache b/includes/Skins/menuGroup.mustache
index d9f391fc9..19a64d6aa 100644
--- a/includes/Skins/menuGroup.mustache
+++ b/includes/Skins/menuGroup.mustache
@@ -1,9 +1,8 @@
-
- {{#components}}
-
- {{#data-icon}}{{>Icon}}{{/data-icon}}
- {{label}}
-
- {{/components}}
+
+ {{#components}}
+
+ {{#data-icon}}{{>Icon}}{{/data-icon}}
+ {{label}}
+
+ {{/components}}
diff --git a/resources/skins.minerva.amc.styles/index.less b/resources/skins.minerva.amc.styles/index.less
index c4fd64991..aea20aa3c 100644
--- a/resources/skins.minerva.amc.styles/index.less
+++ b/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';
diff --git a/resources/skins.minerva.base.styles/buttons.less b/resources/skins.minerva.base.styles/buttons.less
index 94c1ff33b..fb7542d21 100644
--- a/resources/skins.minerva.base.styles/buttons.less
+++ b/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;
}
diff --git a/resources/skins.minerva.mainMenu.styles/MainMenuItem.less b/resources/skins.minerva.mainMenu.styles/MainMenuItem.less
index 6782d799d..2d52afb39 100644
--- a/resources/skins.minerva.mainMenu.styles/MainMenuItem.less
+++ b/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 {
- 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;
- }
+ .toggle-list-item__anchor:hover {
+ box-shadow: inset 4px 0 0 0 @box-shadow-color-progressive--focus;
+ text-decoration: none;
}
}
}
}
-// stylelint-enable no-descending-specificity, selector-max-id
+// stylelint-enable selector-max-id