mediawiki-skins-Vector/resources/common/components/Menu.less

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

.mw-portlet {
	// Hidden by default, but displayed by certain menus
	// e.g. MenuPortal
	h3 {
		display: none;
	}

	ul {
		list-style: none none;
		margin: 0;
	}

	li {
		margin-left: 0.75em;
		// `padding-top` instead of `margin-top` necessary for
		// anonymous user icon position below
		padding-top: 0.5em;
		line-height: @line-height-nav-personal;
	}
}
Reorganize LESS files to match ResourceLoader conventions Separating most LESS files into 2 ResourceLoader modules and a common folder: - skins.vector.styles - skins.vector.styles.legacy - common This changes aims to clearly separate the old (“legacy”), the new (“modern”) and the common styles which were previously all placed under `skins.vector.styles/`. Inside each directory are separate folders for `layouts` and `components`. The entry files, `skin.less` and `skin-legacy.less` are moved into the specific folders and a third, `common.less` entry file is created that contains the common imports for both old and new Vector. Aliases have been added to the Storybook Webpack config to avoid adding the story file changes to this patch. Images coming from CSS `url()`'s have also been temporarily disabled in Storybook until Storybook can be upgraded to use Webpack 5, and use array values for aliases, in a follow-up patch. This patch also slightly changes a footer layout specific rule so that existing `padding` remains unchanged in rendering due to new common and component structure. Bug: T264309 Change-Id: I1cd2681a2b61edb7be56c38f9bb3994827d7e322 2021-02-02 10:04:37 +00:00			`@import '../variables.less';`
Add storybook to Vector - Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746 2020-01-09 22:11:00 +00:00			`@import 'mediawiki.mixins.less';`

Drop unsupported skin CSS classes Drop support for vectorMenu, vectorTabs and vectorMenuCheckbox, body, menu selectors in preference for standard selectors. This change will impact a large amount of user scripts/styles but should not impact any gadgets. These classes were kept around for user scripts and styles however are not needed internally. As we transition to a more maintainable skin menu system, it is time to lose these selectors even though this will cause disruption. Vector now will use the mw-portlet class rather than the vector-menu class in its own CSS styling, however it keeps the other classes to allow differentiation of the different types of menu. Changes to test: Previously the tests assumed all portlets were empty when checking the classes. This is very rare, so its better to check the classes of non-empty portlets, so several tests are updated accordingly to drop the emptyPortlet class. Bug: T262092 Change-Id: I1824335eb47d613c2a4804ec1f1106c0f4c16101 2020-09-04 19:34:05 +00:00			`.mw-portlet {`
Refactor: Simplify and standardize menu definitions * Standardise the menu markup. This means all menus in Vector will now be wrapped in a div and will have a heading. * All menus now have the vector-menu class. Styles specific to personal tools are moved to layout since these are concerned with placement. * The ul class will always have menu class. * emptyPortal class is generalised into vector-menu-empty for consistency with other classes and moved from common.less into Menu.less * Standardise hooks - BaseTemplateAfterPortlet can now be run on any menu. Changes to HTML: * lang and dir attributes are moved from the h3 up to the div element .vectorTabs, .portal(s) and #p-personal now has hidden span element inside h3 * for non portals ul.menu" is now wrapped in a div.vector-menu-content This change does impact the following CSS selectors which will need to be updated: I see no matches for these selectors in code search. ``` #p-variants > ul #p-namespaces > ul #p-personal > ul #p-views > ul #p-cactions > ul ``` Using global-search.toolforge.org I see one match for p-variants, 26 for p-namespaces, 30 for p-personal, 36 for p-views and 7 for p-cactions. I see this as acceptable breakage provided a user notice is sent out which it has been (T252447) Bug: T249372 Change-Id: Id59234aa6b822a24848386bdc04d8d7ed37ca145 2020-04-16 18:40:39 +00:00			`// Hidden by default, but displayed by certain menus`
			`// e.g. MenuPortal`
Move Vector skin from core This is the final step of the process described at <https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>. Corresponding core change: Idfc38503. Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d 2014-08-07 11:38:34 +00:00			`h3 {`
			`display: none;`
			`}`

			`ul {`
Use `list-style` shorthand with x-browser compatible values Change-Id: I6e47cb2dc406b9cfa3e2ca9b63f8cecce7c59ce1 2018-10-16 02:13:07 +00:00			`list-style: none none;`
Move Vector skin from core This is the final step of the process described at <https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>. Corresponding core change: Idfc38503. Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d 2014-08-07 11:38:34 +00:00			`margin: 0;`
			`}`

			`li {`
			`margin-left: 0.75em;`
Bring personal tools' icons on baseline with label Put icons on baseline as good as possible cross-browser. It's complete waste of time trying. And is partly originated in different internal text node sizing in various browsers, biggest browser share difference is Chrome/Yandex/Safari 5 on Windows against all others. Partly it's a result of us relying on `sans-serif` generic font family instead of `Arial` – it results in different letter baseline position within font's virtual letter box, which eats my limited time on Planet Earth uselessly away. Also adding and renaming LESS variable for proper code style. Bug: T207075 Change-Id: I92acb9851a3c0acdbc40a4a4528a91c7332c9293 2018-10-15 23:19:45 +00:00			// `padding-top` instead of `margin-top` necessary for
			`// anonymous user icon position below`
			`padding-top: 0.5em;`
Unify on variables and file names on 'navigation' Navigation is the appropriate, general term – settling on it and unifying file name and common abbreviation 'nav' for variable names. Change-Id: I237b56320544de15e3b97c4806f6e2387bc54ca0 2019-09-29 20:21:41 +00:00			`line-height: @line-height-nav-personal;`
Move Vector skin from core This is the final step of the process described at <https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>. Corresponding core change: Idfc38503. Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d 2014-08-07 11:38:34 +00:00			`}`
			`}`