mediawiki-skins-Vector/.storybook/common.less

@import '../resources/common/variables.less';
@import 'integration.less';
@import 'icons.less';
@import '../skinStyles/mediawiki.ui.icon.less';

body {
	font-family: @font-family-sans;
}

a {
	text-decoration: none;
}

ul {
	padding: 0;
}

#mw-panel {
	background-color: @background-color-secondary;
}

.printfooter {
	display: none;
}
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 '../resources/common/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 'integration.less';`
			`@import 'icons.less';`
Language button is quiet with focus, active and hover states * Add mediawiki ui button styles to Vector and convert language button to a quiet button * Restore the arrow for language button with ULS * Vertically align button to first line of header * Add a storybook entry for LanguageButton Additional changes: * Fix issues revealed by storybook - menu dropdown should reset generic typography rule for `ul` tags * Allow quotes usage in storybook without disable rule Bug: T268241 Change-Id: I483350084fb46a51c50af6aab78c62db6d02df89 2021-02-08 23:10:21 +00:00			`@import '../skinStyles/mediawiki.ui.icon.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
			`body {`
			`font-family: @font-family-sans;`
			`}`

			`a {`
			`text-decoration: none;`
			`}`

			`ul {`
			`padding: 0;`
			`}`

			`#mw-panel {`
			`background-color: @background-color-secondary;`
			`}`

			`.printfooter {`
			`display: none;`
			`}`