mediawiki-skins-MinervaNeue/components/ToggleList/MenuListItem.less

// A MenuListItem is a ToggleList item for menus.

@import '../../minerva.less/minerva.variables.less';
@import '../../minerva.less/minerva.mixins.less';

.toggle-list-item {
	display: block;
	padding: 1em;
	//
	// Make the app feel like an app, not a JPEG. When hovering over a menu item, add a little
	// interactivity.
	&:hover {
		background: @grayLightest;
	}
}

.toggle-list-item__anchor {
	display: block;

	&:hover {
		text-decoration: none;
	}

	&:visited, &:active {
		color: @grayMediumDark;
	}
}

.toggle-list-item__icon {
	vertical-align: middle;
}

.toggle-list-item__label {
	// Left-align text. Button elements are centered.
	text-align: left;
	color: @grayMediumDark;
	font-weight: bold;
	white-space: nowrap;
	vertical-align: middle;
	font-size: @font-size-minerva-small;
}
Hygiene: extract ToggleList to a reusable component A list that toggles visibility via the checkbox hack is needed in at least two spots: the page actions overflow menu and the user menu. This patch makes several refactors to turn what was previously hardcoded into page actions a reusable component: - Start a new components directory. Components are reusable and composable. The subdirectories are organized by function, not ResourceLoader module bundling which greatly improves the ability to see a component's full functionality in one directory instead of examining the entire codebase. See updates to README. - Extract pageactions.less into: - ToggleList.less: LESS for any checkbox hack list. - DropDownList.less: LESS for lists that open downwards. - MenuListItem.less: LESS for list items of menus. The division makes it easier to see concerns, dependencies, and change code. - Move pageActionMenu.mustache to a component and extract ToggleList template. - Extract ToggleList.js from Toolbar.js. Bug: T214540 Change-Id: I171831469a6733c458bc5c7ba249a5096ca975b8 2019-06-20 19:17:50 +00:00			`// A MenuListItem is a ToggleList item for menus.`

Dev: Prep for storybook * Remove ambiguity in imports - say the file extension 'less' for all instances of variables and mixins. * Separate toast styles from drawer styles so they can be imported separately * associate header-action selector with its parent (.overlay-header) not parent's parent (.overlay) so it can be imported and rendered without the Overlay. Change-Id: Ib7e19a440ba095d6424d35305fb41d643ca9764c 2019-08-08 20:01:03 +00:00			`@import '../../minerva.less/minerva.variables.less';`
			`@import '../../minerva.less/minerva.mixins.less';`
Hygiene: extract ToggleList to a reusable component A list that toggles visibility via the checkbox hack is needed in at least two spots: the page actions overflow menu and the user menu. This patch makes several refactors to turn what was previously hardcoded into page actions a reusable component: - Start a new components directory. Components are reusable and composable. The subdirectories are organized by function, not ResourceLoader module bundling which greatly improves the ability to see a component's full functionality in one directory instead of examining the entire codebase. See updates to README. - Extract pageactions.less into: - ToggleList.less: LESS for any checkbox hack list. - DropDownList.less: LESS for lists that open downwards. - MenuListItem.less: LESS for list items of menus. The division makes it easier to see concerns, dependencies, and change code. - Move pageActionMenu.mustache to a component and extract ToggleList template. - Extract ToggleList.js from Toolbar.js. Bug: T214540 Change-Id: I171831469a6733c458bc5c7ba249a5096ca975b8 2019-06-20 19:17:50 +00:00
Remove the mw-ui-icon hacks and overrides Note: this agitates T230232 again - when merging this please make sure a merge for I929090848f3e04647a97f4979ec78682623fa070 is pending. In various places we try to override the default mw-ui-icon behaviours The hacks need to be removed as part of addressing the core problem. Changes: * Wherever we use mw-ui-icon-before in PHP - wrap the label with a span so that label font-size is altered where needed - not the icon * Where a small icon is needed us isSmall parameter for the Icon component * Apply font-size to labels of mw-ui-icon-before elements * The browser tests need a slight update to access the span element inside a menu item - in the case of the logout button the label is always hidden, so we need to check the visibility of the parent element (secondary_action) Bug: T229440 Depends-On: I3f803ec4c9068b30aa93b803391aa4d65d8310ff Change-Id: I07e4ae233979636b739f1117dd7703571e0a9366 2019-08-30 17:23:55 +00:00			`.toggle-list-item {`
Hygiene: extract ToggleList to a reusable component A list that toggles visibility via the checkbox hack is needed in at least two spots: the page actions overflow menu and the user menu. This patch makes several refactors to turn what was previously hardcoded into page actions a reusable component: - Start a new components directory. Components are reusable and composable. The subdirectories are organized by function, not ResourceLoader module bundling which greatly improves the ability to see a component's full functionality in one directory instead of examining the entire codebase. See updates to README. - Extract pageactions.less into: - ToggleList.less: LESS for any checkbox hack list. - DropDownList.less: LESS for lists that open downwards. - MenuListItem.less: LESS for list items of menus. The division makes it easier to see concerns, dependencies, and change code. - Move pageActionMenu.mustache to a component and extract ToggleList template. - Extract ToggleList.js from Toolbar.js. Bug: T214540 Change-Id: I171831469a6733c458bc5c7ba249a5096ca975b8 2019-06-20 19:17:50 +00:00			`display: block;`
			`padding: 1em;`
			`//`
			`// Make the app feel like an app, not a JPEG. When hovering over a menu item, add a little`
			`// interactivity.`
			`&:hover {`
			`background: @grayLightest;`
			`}`
			`}`
Remove the mw-ui-icon hacks and overrides Note: this agitates T230232 again - when merging this please make sure a merge for I929090848f3e04647a97f4979ec78682623fa070 is pending. In various places we try to override the default mw-ui-icon behaviours The hacks need to be removed as part of addressing the core problem. Changes: * Wherever we use mw-ui-icon-before in PHP - wrap the label with a span so that label font-size is altered where needed - not the icon * Where a small icon is needed us isSmall parameter for the Icon component * Apply font-size to labels of mw-ui-icon-before elements * The browser tests need a slight update to access the span element inside a menu item - in the case of the logout button the label is always hidden, so we need to check the visibility of the parent element (secondary_action) Bug: T229440 Depends-On: I3f803ec4c9068b30aa93b803391aa4d65d8310ff Change-Id: I07e4ae233979636b739f1117dd7703571e0a9366 2019-08-30 17:23:55 +00:00
			`.toggle-list-item__anchor {`
			`display: block;`

			`&:hover {`
			`text-decoration: none;`
			`}`

			`&:visited, &:active {`
			`color: @grayMediumDark;`
			`}`
			`}`

			`.toggle-list-item__icon {`
			`vertical-align: middle;`
			`}`

			`.toggle-list-item__label {`
			`// Left-align text. Button elements are centered.`
			`text-align: left;`
			`color: @grayMediumDark;`
			`font-weight: bold;`
			`white-space: nowrap;`
			`vertical-align: middle;`
			`font-size: @font-size-minerva-small;`
			`}`