From edd2f4ff85c1208b4f66ddde4e67ed6386e7d719 Mon Sep 17 00:00:00 2001 From: Jan Drewniak Date: Tue, 2 Feb 2021 11:04:37 +0100 Subject: [PATCH] Reorganize LESS files to match ResourceLoader conventions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .storybook/common.less | 2 +- .storybook/webpack.config.js | 29 +++- resources/common/common.less | 29 ++++ .../components}/Footer.less | 3 +- .../components}/Indicators.less | 2 +- .../components}/Menu.less | 2 +- .../components}/MenuDropdown.less | 2 +- .../components}/MenuPortal.less | 2 +- .../components}/MenuTabs.less | 2 +- .../components}/SearchBox.less | 2 +- .../components}/SidebarLogo.less | 2 +- .../components}/SiteNotice.less | 2 +- .../components}/TabWatchstarLink.less | 2 +- .../images/arrow-down.svg | 0 .../images/bullet-icon.svg | 0 .../images/external-link-ltr-icon.svg | 0 .../images/external-link-rtl-icon.svg | 0 .../images/portal-separator.png | Bin .../images/search.svg | 0 .../images/tab-normal-fade.png | Bin .../images/tab-separator.png | Bin .../images/unwatch-icon-hl.svg | 0 .../images/unwatch-icon.svg | 0 .../images/unwatch-temp-icon-hl.svg | 0 .../images/unwatch-temp-icon.svg | 0 .../images/user-avatar.svg | 0 .../images/watch-icon-hl.svg | 0 .../images/watch-icon-loading.svg | 0 .../images/watch-icon.svg | 0 .../common/normalize.less | 2 +- .../common/print.less | 0 .../common/typography.less | 2 +- .../common/variables.less | 0 .../components}/MenuDropdown.less | 3 +- .../components}/Sidebar.less | 2 +- .../layouts/screen.less} | 10 +- .../skin-legacy.less | 13 ++ .../{ => components}/LanguageButton.less | 2 +- .../{ => components}/Logo.less | 2 +- .../{ => components}/SearchBoxLoader.less | 2 +- .../{ => components}/Sidebar.less | 8 +- .../VueEnhancedSearchBox.less | 2 - .../{ => components}/checkboxHack.less | 0 resources/skins.vector.styles/layout.less | 124 ----------------- .../{layout-print.less => layouts/print.less} | 0 .../screen.less} | 126 +++++++++++++++++- .../skins.vector.styles/skin-legacy.less | 27 ---- resources/skins.vector.styles/skin.less | 36 ++--- skin.json | 10 +- skinStyles/mediawiki.notification.less | 2 +- skinStyles/mediawiki.ui.icon.less | 2 +- skinStyles/ooui.less | 2 +- 52 files changed, 245 insertions(+), 213 deletions(-) create mode 100644 resources/common/common.less rename resources/{skins.vector.styles => common/components}/Footer.less (91%) rename resources/{skins.vector.styles => common/components}/Indicators.less (88%) rename resources/{skins.vector.styles => common/components}/Menu.less (97%) rename resources/{skins.vector.styles => common/components}/MenuDropdown.less (99%) rename resources/{skins.vector.styles => common/components}/MenuPortal.less (97%) rename resources/{skins.vector.styles => common/components}/MenuTabs.less (98%) rename resources/{skins.vector.styles => common/components}/SearchBox.less (98%) rename resources/{skins.vector.styles => common/components}/SidebarLogo.less (87%) rename resources/{skins.vector.styles => common/components}/SiteNotice.less (78%) rename resources/{skins.vector.styles => common/components}/TabWatchstarLink.less (98%) rename resources/{skins.vector.styles => common}/images/arrow-down.svg (100%) rename resources/{skins.vector.styles => common}/images/bullet-icon.svg (100%) rename resources/{skins.vector.styles => common}/images/external-link-ltr-icon.svg (100%) rename resources/{skins.vector.styles => common}/images/external-link-rtl-icon.svg (100%) rename resources/{skins.vector.styles => common}/images/portal-separator.png (100%) rename resources/{skins.vector.styles => common}/images/search.svg (100%) rename resources/{skins.vector.styles => common}/images/tab-normal-fade.png (100%) rename resources/{skins.vector.styles => common}/images/tab-separator.png (100%) rename resources/{skins.vector.styles => common}/images/unwatch-icon-hl.svg (100%) rename resources/{skins.vector.styles => common}/images/unwatch-icon.svg (100%) rename resources/{skins.vector.styles => common}/images/unwatch-temp-icon-hl.svg (100%) rename resources/{skins.vector.styles => common}/images/unwatch-temp-icon.svg (100%) rename resources/{skins.vector.styles => common}/images/user-avatar.svg (100%) rename resources/{skins.vector.styles => common}/images/watch-icon-hl.svg (100%) rename resources/{skins.vector.styles => common}/images/watch-icon-loading.svg (100%) rename resources/{skins.vector.styles => common}/images/watch-icon.svg (100%) rename resources/{skins.vector.styles => }/common/normalize.less (90%) rename resources/{skins.vector.styles => }/common/print.less (100%) rename resources/{skins.vector.styles => }/common/typography.less (98%) rename variables.less => resources/common/variables.less (100%) rename resources/{skins.vector.styles/legacy => skins.vector.styles.legacy/components}/MenuDropdown.less (64%) rename resources/{skins.vector.styles/legacy => skins.vector.styles.legacy/components}/Sidebar.less (84%) rename resources/{skins.vector.styles/legacy/layout.less => skins.vector.styles.legacy/layouts/screen.less} (93%) create mode 100644 resources/skins.vector.styles.legacy/skin-legacy.less rename resources/skins.vector.styles/{ => components}/LanguageButton.less (98%) rename resources/skins.vector.styles/{ => components}/Logo.less (96%) rename resources/skins.vector.styles/{ => components}/SearchBoxLoader.less (98%) rename resources/skins.vector.styles/{ => components}/Sidebar.less (94%) rename resources/skins.vector.styles/{ => components}/VueEnhancedSearchBox.less (99%) rename resources/skins.vector.styles/{ => components}/checkboxHack.less (100%) delete mode 100644 resources/skins.vector.styles/layout.less rename resources/skins.vector.styles/{layout-print.less => layouts/print.less} (100%) rename resources/skins.vector.styles/{layout-default.less => layouts/screen.less} (66%) delete mode 100644 resources/skins.vector.styles/skin-legacy.less diff --git a/.storybook/common.less b/.storybook/common.less index 337920f8..7d067c32 100644 --- a/.storybook/common.less +++ b/.storybook/common.less @@ -1,4 +1,4 @@ -@import '../variables.less'; +@import '../resources/common/variables.less'; @import 'integration.less'; @import 'icons.less'; @import '../skinStyles/mediawiki.ui.icon.less'; diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 0acb91fb..57272395 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -1,6 +1,25 @@ const path = require( 'path' ); module.exports = { + resolve: { + alias: { + // FIXME: These imports should be updated in the story files instead of here. + '../resources/skins.vector.styles/Footer.less': '../resources/common/components/Footer.less', + '../resources/skins.vector.styles/LanguageButton.less': '../resources/skins.vector.styles/components/LanguageButton.less', + '../resources/skins.vector.styles/skin-legacy.less': '../resources/skins.vector.styles.legacy/skin-legacy.less', + '../resources/skins.vector.styles/Logo.less': '../resources/skins.vector.styles/components/Logo.less', + '../resources/skins.vector.styles/Menu.less': '../resources/common/components/Menu.less', + '../.storybook/common.less': '../resources/common/common.less', + '../resources/skins.vector.styles/MenuDropdown.less': '../resources/common/components/MenuDropdown.less', + '../resources/skins.vector.styles/MenuPortal.less': '../resources/common/components/MenuPortal.less', + '../resources/skins.vector.styles/MenuTabs.less': '../resources/common/components/MenuTabs.less', + '../resources/skins.vector.styles/TabWatchstarLink.less': '../resources/common/components/TabWatchstarLink.less', + '../resources/skins.vector.styles/SearchBox.less': '../resources/common/components/SearchBox.less', + '../resources/skins.vector.styles/Sidebar.less': '../resources/skins.vector.styles/components/Sidebar.less', + '../resources/skins.vector.styles/SidebarLogo.less': '../resources/common/components/SidebarLogo.less', + '../resources/skins.vector.styles/MenuPortal.less': '../resources/common/components/MenuPortal.less' + } + }, module: { rules: [ { test: /\.js$/, @@ -37,11 +56,17 @@ module.exports = { use: [ { loader: 'style-loader' }, { - loader: 'css-loader' + loader: 'css-loader', + options: { + // FIXME: Disable resolving of CSS urls until Storybook is upgraded + // to use Webpack 5 and array values for aliases + // (which would cleanly resolve urls in LESS partial starting with `url(images/...)` ) + url: false + } }, { loader: 'less-loader', options: { - relativeUrls: false, + relativeUrls: true, strictUnits: true, paths: [ path.resolve( __dirname, 'resolve-imports' ) diff --git a/resources/common/common.less b/resources/common/common.less new file mode 100644 index 00000000..e3d0d058 --- /dev/null +++ b/resources/common/common.less @@ -0,0 +1,29 @@ +/** + * Common styles and components shared by both, + * Vector legacy and Vector modern. + */ + +@import './variables.less'; +@import 'mediawiki.mixins.less'; + +@media screen { + // Common styles + @import './normalize.less'; + @import './typography.less'; + + // Components + @import './components/Indicators.less'; + @import './components/SiteNotice.less'; + @import './components/Menu.less'; + @import './components/MenuTabs.less'; + @import './components/TabWatchstarLink.less'; + @import './components/MenuDropdown.less'; + @import './components/MenuPortal.less'; + @import './components/SearchBox.less'; + @import './components/SidebarLogo.less'; + @import './components/Footer.less'; +} + +@media print { + @import './print.less'; +} diff --git a/resources/skins.vector.styles/Footer.less b/resources/common/components/Footer.less similarity index 91% rename from resources/skins.vector.styles/Footer.less rename to resources/common/components/Footer.less index dd4794ef..ec2a7cbb 100644 --- a/resources/skins.vector.styles/Footer.less +++ b/resources/common/components/Footer.less @@ -1,8 +1,7 @@ -@import '../../variables.less'; +@import '../variables.less'; /* Footer */ .mw-footer { - padding: 0.75em; direction: ltr; ul { diff --git a/resources/skins.vector.styles/Indicators.less b/resources/common/components/Indicators.less similarity index 88% rename from resources/skins.vector.styles/Indicators.less rename to resources/common/components/Indicators.less index 50a1c6db..86fd7ce0 100644 --- a/resources/skins.vector.styles/Indicators.less +++ b/resources/common/components/Indicators.less @@ -1,4 +1,4 @@ -@import '../../variables.less'; +@import '../variables.less'; // FIXME: Is specific `.mw-body` even needed? Does `.mw-indicators` exist outside? .mw-body { diff --git a/resources/skins.vector.styles/Menu.less b/resources/common/components/Menu.less similarity index 97% rename from resources/skins.vector.styles/Menu.less rename to resources/common/components/Menu.less index c880a61b..891c960d 100644 --- a/resources/skins.vector.styles/Menu.less +++ b/resources/common/components/Menu.less @@ -1,4 +1,4 @@ -@import '../../variables.less'; +@import '../variables.less'; @import 'mediawiki.mixins.less'; /* Personal Menu */ diff --git a/resources/skins.vector.styles/MenuDropdown.less b/resources/common/components/MenuDropdown.less similarity index 99% rename from resources/skins.vector.styles/MenuDropdown.less rename to resources/common/components/MenuDropdown.less index 58d2dc35..a1afa2af 100644 --- a/resources/skins.vector.styles/MenuDropdown.less +++ b/resources/common/components/MenuDropdown.less @@ -1,4 +1,4 @@ -@import '../../variables.less'; +@import '../variables.less'; @import 'mediawiki.mixins.less'; /* Variants and Actions */ diff --git a/resources/skins.vector.styles/MenuPortal.less b/resources/common/components/MenuPortal.less similarity index 97% rename from resources/skins.vector.styles/MenuPortal.less rename to resources/common/components/MenuPortal.less index a7e92c48..3bdb0868 100644 --- a/resources/skins.vector.styles/MenuPortal.less +++ b/resources/common/components/MenuPortal.less @@ -1,4 +1,4 @@ -@import '../../variables.less'; +@import '../variables.less'; @import 'mediawiki.mixins.less'; .vector-menu-portal { diff --git a/resources/skins.vector.styles/MenuTabs.less b/resources/common/components/MenuTabs.less similarity index 98% rename from resources/skins.vector.styles/MenuTabs.less rename to resources/common/components/MenuTabs.less index eced99a2..9dcdcc8e 100644 --- a/resources/skins.vector.styles/MenuTabs.less +++ b/resources/common/components/MenuTabs.less @@ -1,4 +1,4 @@ -@import '../../variables.less'; +@import '../variables.less'; @import 'mediawiki.mixins.less'; /** diff --git a/resources/skins.vector.styles/SearchBox.less b/resources/common/components/SearchBox.less similarity index 98% rename from resources/skins.vector.styles/SearchBox.less rename to resources/common/components/SearchBox.less index 7a2f70d2..d57f5b17 100644 --- a/resources/skins.vector.styles/SearchBox.less +++ b/resources/common/components/SearchBox.less @@ -1,6 +1,6 @@ @import 'mediawiki.mixins.less'; @import 'mediawiki.ui/variables.less'; -@import '../../variables.less'; +@import '../../common/variables.less'; // Search portlet. #p-search h3 { diff --git a/resources/skins.vector.styles/SidebarLogo.less b/resources/common/components/SidebarLogo.less similarity index 87% rename from resources/skins.vector.styles/SidebarLogo.less rename to resources/common/components/SidebarLogo.less index d4b4924c..98a04db8 100644 --- a/resources/skins.vector.styles/SidebarLogo.less +++ b/resources/common/components/SidebarLogo.less @@ -1,4 +1,4 @@ -@import '../../variables.less'; +@import '../variables.less'; /* Logo */ #p-logo { diff --git a/resources/skins.vector.styles/SiteNotice.less b/resources/common/components/SiteNotice.less similarity index 78% rename from resources/skins.vector.styles/SiteNotice.less rename to resources/common/components/SiteNotice.less index fbac2e17..97f2c3e9 100644 --- a/resources/skins.vector.styles/SiteNotice.less +++ b/resources/common/components/SiteNotice.less @@ -1,4 +1,4 @@ -@import '../../variables.less'; +@import '../variables.less'; /* Site Notice (includes notices from CentralNotice extension) */ #siteNotice { diff --git a/resources/skins.vector.styles/TabWatchstarLink.less b/resources/common/components/TabWatchstarLink.less similarity index 98% rename from resources/skins.vector.styles/TabWatchstarLink.less rename to resources/common/components/TabWatchstarLink.less index 45e632f8..11a9321e 100644 --- a/resources/skins.vector.styles/TabWatchstarLink.less +++ b/resources/common/components/TabWatchstarLink.less @@ -1,4 +1,4 @@ -@import '../../variables.less'; +@import '../variables.less'; @import 'mediawiki.mixins.less'; @import 'mediawiki.mixins.rotation.less'; diff --git a/resources/skins.vector.styles/images/arrow-down.svg b/resources/common/images/arrow-down.svg similarity index 100% rename from resources/skins.vector.styles/images/arrow-down.svg rename to resources/common/images/arrow-down.svg diff --git a/resources/skins.vector.styles/images/bullet-icon.svg b/resources/common/images/bullet-icon.svg similarity index 100% rename from resources/skins.vector.styles/images/bullet-icon.svg rename to resources/common/images/bullet-icon.svg diff --git a/resources/skins.vector.styles/images/external-link-ltr-icon.svg b/resources/common/images/external-link-ltr-icon.svg similarity index 100% rename from resources/skins.vector.styles/images/external-link-ltr-icon.svg rename to resources/common/images/external-link-ltr-icon.svg diff --git a/resources/skins.vector.styles/images/external-link-rtl-icon.svg b/resources/common/images/external-link-rtl-icon.svg similarity index 100% rename from resources/skins.vector.styles/images/external-link-rtl-icon.svg rename to resources/common/images/external-link-rtl-icon.svg diff --git a/resources/skins.vector.styles/images/portal-separator.png b/resources/common/images/portal-separator.png similarity index 100% rename from resources/skins.vector.styles/images/portal-separator.png rename to resources/common/images/portal-separator.png diff --git a/resources/skins.vector.styles/images/search.svg b/resources/common/images/search.svg similarity index 100% rename from resources/skins.vector.styles/images/search.svg rename to resources/common/images/search.svg diff --git a/resources/skins.vector.styles/images/tab-normal-fade.png b/resources/common/images/tab-normal-fade.png similarity index 100% rename from resources/skins.vector.styles/images/tab-normal-fade.png rename to resources/common/images/tab-normal-fade.png diff --git a/resources/skins.vector.styles/images/tab-separator.png b/resources/common/images/tab-separator.png similarity index 100% rename from resources/skins.vector.styles/images/tab-separator.png rename to resources/common/images/tab-separator.png diff --git a/resources/skins.vector.styles/images/unwatch-icon-hl.svg b/resources/common/images/unwatch-icon-hl.svg similarity index 100% rename from resources/skins.vector.styles/images/unwatch-icon-hl.svg rename to resources/common/images/unwatch-icon-hl.svg diff --git a/resources/skins.vector.styles/images/unwatch-icon.svg b/resources/common/images/unwatch-icon.svg similarity index 100% rename from resources/skins.vector.styles/images/unwatch-icon.svg rename to resources/common/images/unwatch-icon.svg diff --git a/resources/skins.vector.styles/images/unwatch-temp-icon-hl.svg b/resources/common/images/unwatch-temp-icon-hl.svg similarity index 100% rename from resources/skins.vector.styles/images/unwatch-temp-icon-hl.svg rename to resources/common/images/unwatch-temp-icon-hl.svg diff --git a/resources/skins.vector.styles/images/unwatch-temp-icon.svg b/resources/common/images/unwatch-temp-icon.svg similarity index 100% rename from resources/skins.vector.styles/images/unwatch-temp-icon.svg rename to resources/common/images/unwatch-temp-icon.svg diff --git a/resources/skins.vector.styles/images/user-avatar.svg b/resources/common/images/user-avatar.svg similarity index 100% rename from resources/skins.vector.styles/images/user-avatar.svg rename to resources/common/images/user-avatar.svg diff --git a/resources/skins.vector.styles/images/watch-icon-hl.svg b/resources/common/images/watch-icon-hl.svg similarity index 100% rename from resources/skins.vector.styles/images/watch-icon-hl.svg rename to resources/common/images/watch-icon-hl.svg diff --git a/resources/skins.vector.styles/images/watch-icon-loading.svg b/resources/common/images/watch-icon-loading.svg similarity index 100% rename from resources/skins.vector.styles/images/watch-icon-loading.svg rename to resources/common/images/watch-icon-loading.svg diff --git a/resources/skins.vector.styles/images/watch-icon.svg b/resources/common/images/watch-icon.svg similarity index 100% rename from resources/skins.vector.styles/images/watch-icon.svg rename to resources/common/images/watch-icon.svg diff --git a/resources/skins.vector.styles/common/normalize.less b/resources/common/normalize.less similarity index 90% rename from resources/skins.vector.styles/common/normalize.less rename to resources/common/normalize.less index edf37459..3ee80e17 100644 --- a/resources/skins.vector.styles/common/normalize.less +++ b/resources/common/normalize.less @@ -4,7 +4,7 @@ * */ -@import '../../../variables.less'; +@import './variables.less'; html, body { diff --git a/resources/skins.vector.styles/common/print.less b/resources/common/print.less similarity index 100% rename from resources/skins.vector.styles/common/print.less rename to resources/common/print.less diff --git a/resources/skins.vector.styles/common/typography.less b/resources/common/typography.less similarity index 98% rename from resources/skins.vector.styles/common/typography.less rename to resources/common/typography.less index 63557d14..bd8ec858 100644 --- a/resources/skins.vector.styles/common/typography.less +++ b/resources/common/typography.less @@ -5,7 +5,7 @@ * */ -@import '../../../variables.less'; +@import './variables.less'; html { font-size: @font-size-root; diff --git a/variables.less b/resources/common/variables.less similarity index 100% rename from variables.less rename to resources/common/variables.less diff --git a/resources/skins.vector.styles/legacy/MenuDropdown.less b/resources/skins.vector.styles.legacy/components/MenuDropdown.less similarity index 64% rename from resources/skins.vector.styles/legacy/MenuDropdown.less rename to resources/skins.vector.styles.legacy/components/MenuDropdown.less index 4fd1962f..66075210 100644 --- a/resources/skins.vector.styles/legacy/MenuDropdown.less +++ b/resources/skins.vector.styles.legacy/components/MenuDropdown.less @@ -1,5 +1,4 @@ -// Extends the dropdown menu but allows it to be opened via hover. -@import '../MenuDropdown.less'; +// Extends the common MenuDropdown, but allows it to be opened via hover. .vector-menu-dropdown { &:hover .vector-menu-content { diff --git a/resources/skins.vector.styles/legacy/Sidebar.less b/resources/skins.vector.styles.legacy/components/Sidebar.less similarity index 84% rename from resources/skins.vector.styles/legacy/Sidebar.less rename to resources/skins.vector.styles.legacy/components/Sidebar.less index e89acb64..76c36bef 100644 --- a/resources/skins.vector.styles/legacy/Sidebar.less +++ b/resources/skins.vector.styles.legacy/components/Sidebar.less @@ -1,4 +1,4 @@ -@import '../../../variables.less'; +@import '../../common/variables.less'; /* Panel */ #mw-panel { diff --git a/resources/skins.vector.styles/legacy/layout.less b/resources/skins.vector.styles.legacy/layouts/screen.less similarity index 93% rename from resources/skins.vector.styles/legacy/layout.less rename to resources/skins.vector.styles.legacy/layouts/screen.less index 38d7382e..d440a4c5 100644 --- a/resources/skins.vector.styles/legacy/layout.less +++ b/resources/skins.vector.styles.legacy/layouts/screen.less @@ -1,8 +1,11 @@ -// Layout rules divide the page into sections and how VectorComponents should be arranged in the skin. -// The rules here should only define the layout, not color or typography. +/** + * Layout rules divide the page into sections and how VectorComponents should be arranged in the skin. + * The rules here should only define the layout, not color or typography. + * See '../../common/' folder for latter stylesheets. + */ @import 'mediawiki.mixins.less'; -@import '../../../variables.less'; +@import '../../common/variables.less'; body { background-color: @background-color-secondary; @@ -152,6 +155,7 @@ body { .mw-footer { margin-left: 10em; margin-top: 0; + padding: 0.75em; } /* Vector screen styles for high definition displays. These rules cross the above components and are diff --git a/resources/skins.vector.styles.legacy/skin-legacy.less b/resources/skins.vector.styles.legacy/skin-legacy.less new file mode 100644 index 00000000..c50bbf88 --- /dev/null +++ b/resources/skins.vector.styles.legacy/skin-legacy.less @@ -0,0 +1,13 @@ +/** + * Vector legacy stylesheets + * See '../common/common.less' for common screen and print Vector stylesheets. + */ + +@media screen { + // Layouts + @import './layouts/screen.less'; + + // Legacy specific components + @import './components/MenuDropdown.less'; + @import './components/Sidebar.less'; +} diff --git a/resources/skins.vector.styles/LanguageButton.less b/resources/skins.vector.styles/components/LanguageButton.less similarity index 98% rename from resources/skins.vector.styles/LanguageButton.less rename to resources/skins.vector.styles/components/LanguageButton.less index 4399f67b..1c15ad5b 100644 --- a/resources/skins.vector.styles/LanguageButton.less +++ b/resources/skins.vector.styles/components/LanguageButton.less @@ -1,5 +1,5 @@ // The use of mixins.buttons requires @font-size-base to be defined for this to work in Storybook -@import '../../variables.less'; +@import '../../common/variables.less'; @import 'mediawiki.mixins.less'; // `.mw-body-header` class can be removed when language button is the default. diff --git a/resources/skins.vector.styles/Logo.less b/resources/skins.vector.styles/components/Logo.less similarity index 96% rename from resources/skins.vector.styles/Logo.less rename to resources/skins.vector.styles/components/Logo.less index 297efaa4..ed0e1f4a 100644 --- a/resources/skins.vector.styles/Logo.less +++ b/resources/skins.vector.styles/components/Logo.less @@ -1,4 +1,4 @@ -@import '../../variables.less'; +@import '../../common/variables.less'; @import 'mediawiki.mixins.less'; .mw-logo { diff --git a/resources/skins.vector.styles/SearchBoxLoader.less b/resources/skins.vector.styles/components/SearchBoxLoader.less similarity index 98% rename from resources/skins.vector.styles/SearchBoxLoader.less rename to resources/skins.vector.styles/components/SearchBoxLoader.less index 73795396..dc951d81 100644 --- a/resources/skins.vector.styles/SearchBoxLoader.less +++ b/resources/skins.vector.styles/components/SearchBoxLoader.less @@ -12,7 +12,7 @@ * **/ -@import '../../variables.less'; +@import '../../common/variables.less'; #simpleSearch.search-form__loader:after { // Set the i18n message. diff --git a/resources/skins.vector.styles/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less similarity index 94% rename from resources/skins.vector.styles/Sidebar.less rename to resources/skins.vector.styles/components/Sidebar.less index 0e85a63e..646bb51b 100644 --- a/resources/skins.vector.styles/Sidebar.less +++ b/resources/skins.vector.styles/components/Sidebar.less @@ -1,8 +1,8 @@ -@import '../../variables.less'; +@import '../../common/variables.less'; @import 'mediawiki.mixins.less'; -@import './layout.less'; -@import 'legacy/Sidebar.less'; -@import 'checkboxHack.less'; +@import '../layouts/screen.less'; +@import '../../skins.vector.styles.legacy/components/Sidebar.less'; +@import './checkboxHack.less'; .mw-sidebar-action { // Align with the portal heading/links diff --git a/resources/skins.vector.styles/VueEnhancedSearchBox.less b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less similarity index 99% rename from resources/skins.vector.styles/VueEnhancedSearchBox.less rename to resources/skins.vector.styles/components/VueEnhancedSearchBox.less index 4a511b1f..1e3e3823 100644 --- a/resources/skins.vector.styles/VueEnhancedSearchBox.less +++ b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less @@ -1,5 +1,3 @@ -@import 'SearchBox.less'; - /** * Minimal styling for initial no-JS server-rendered * search form, which gets replaced by WVUI on focus. diff --git a/resources/skins.vector.styles/checkboxHack.less b/resources/skins.vector.styles/components/checkboxHack.less similarity index 100% rename from resources/skins.vector.styles/checkboxHack.less rename to resources/skins.vector.styles/components/checkboxHack.less diff --git a/resources/skins.vector.styles/layout.less b/resources/skins.vector.styles/layout.less deleted file mode 100644 index ba4a10ee..00000000 --- a/resources/skins.vector.styles/layout.less +++ /dev/null @@ -1,124 +0,0 @@ -/** - * Layout - * - * Layout rules divide the page into sections and how VectorComponents should be arranged in the skin. - * The rules here should only define the layout, not color or typography. - */ - -@import '../../variables.less'; -@import 'mediawiki.mixins.less'; - -// Header - -// Header sizes defined in the description of T246170 and comment T246170#5957100 -@width-grid-column-one: 11em; -@padding-vertical-header: 0.125em; -@margin-top-header: 0.625em; -@margin-bottom-header: 0.3125em; -@height-header: - @height-logo-icon + - @margin-top-header + - @margin-bottom-header + - 2 * @padding-vertical-header; -// 3.125em + 0.625em + 0.3125em + 0.25em = 4.3125em - -// Menu button -@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em); // 0.75em @ 16 - -// Logo - -// Logo sizes per specification in T245190. -@height-logo-icon: 3.125em; - -// The logo is variable width but typically consists of: -// - a icon (50x50) -// - a wordmark (approx 120px) -@min-width-logo: unit( 180px / @font-size-browser, em ); // 11.25em @ 16 - -// Search - -// Canonical version of spec: T270202 -// This assumes the presence of variables inside layout.less. DO NOT import it separately. -// Assumes various variables defined there. -@min-width-search: unit( 150px / @font-size-browser / @font-size-base, em ); // 10.71428571em @ 16 & 0.875em -@min-width-search-tablet: unit( 350px / @font-size-browser / @font-size-base, em ); // 25em @ 16 & 0.875em -@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em -@margin-horizontal-search: unit( 40px / @font-size-browser / @font-size-base, em ); // 2.85714286em @ 16 & 0.875em - -// Personal menu - -@min-width-personal-tools: unit( 300px / @font-size-browser, em ); // 18.75 @ 16 - -// Sidebar - -@margin-top-sidebar: 0.5em; - -// Adjust the left position of the sidebar to align it with the sidebar menu button, -// in the header, while ensuring the background gradient still extends to the edge of the screen. -// note: the 1px comes from the transparent border of the sidebar button. -@padding-left-sidebar: - @margin-horizontal-sidebar-button-icon + - unit( @border-width-base / @font-size-browser, em ); - -// Layout containers - -// Page container - -@max-width-page-container: unit( 1650px / @font-size-browser, em ); // 103.125em @ 16 -@min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container ); // 106.875em -@padding-horizontal-page-container: unit( 30px / @font-size-browser, em ); // 1.875em @ 16 - -// Content containers - -@max-width-workspace-container: unit( 1440px / @font-size-browser, em ); // 90em @ 16 -@max-width-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 16 - -// Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them -// see T259331. -@padding-content: @padding-top-content @padding-horizontal-content 1.5em; -// We want ~60px of space between the end of the sidebar and the start of the -// content container for aesthetic reasons. The sidebar is already displaced -// -30px so we simply add 30px of space to the width of the sidebar. -@margin-start-content: @width-grid-column-one + unit( 8px / @font-size-browser, em ); // 11.5em @ 16 - -// Tabs - -@height-tabs: 2.5em; // Keep in sync with .vector-menu-tabs height. - -// Breakpoints - -// This determines the maximum width breakpoint at which -// the content will have a fixed start margin applied to it when the sidebar -// is open. The content can shift its position when the sidebar is open/closed -// at or below this breakpoint and will maintain its position above this breakpoint. -@max-width-margin-start-content: - (2 * @margin-start-content ) + - ( 2 * @padding-horizontal-page-container ) + - @max-width-content-container; -// 23em + 3.75em + 60em = 86.75em @ 16 - -// Defines the minimum viewport width, at which point the layout will not get any -// smaller and will start horizontal scrolling instead. -@min-width-supported: - unit( 500px / @font-size-browser, em ) - - ( 2 * @padding-horizontal-page-container ); -// 31.25em - 3.75em = 27.5em @ 16 - -// Width used to determine when to break the personal tools onto a separate line -// below the search box. -@width-comfortable: - ( 2 * @padding-horizontal-page-container ) + - @size-sidebar-button + - @margin-horizontal-sidebar-button-icon + - @min-width-logo + - ( 2 * @margin-horizontal-search ) + - @max-width-search + - @min-width-personal-tools; -// 3.75em + 2.75em + 0.75em + 11.25em + 5.71428571em + 35.71428571em + 18.75em = 78.67857142em @ 16 - -@border-color-sidebar: @background-color-secondary--modern; -@background-color-secondary--modern: #f8f9fa; -@background-color-page-container: @background-color-base; - -// Default layout. -@import 'layout-default.less'; diff --git a/resources/skins.vector.styles/layout-print.less b/resources/skins.vector.styles/layouts/print.less similarity index 100% rename from resources/skins.vector.styles/layout-print.less rename to resources/skins.vector.styles/layouts/print.less diff --git a/resources/skins.vector.styles/layout-default.less b/resources/skins.vector.styles/layouts/screen.less similarity index 66% rename from resources/skins.vector.styles/layout-default.less rename to resources/skins.vector.styles/layouts/screen.less index a3b5ab86..315456b4 100644 --- a/resources/skins.vector.styles/layout-default.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -1,6 +1,124 @@ -// -// Default layout for Modern Vector. -// +/** + * Vector modern layout styles for screen + * + * Layout rules divide the page into sections and how VectorComponents should be arranged in the skin. + * The rules here should only define the layout, not color or typography. + */ + +@import '../../common/variables.less'; +@import 'mediawiki.mixins.less'; + +// Header + +// Header sizes defined in the description of T246170 and comment T246170#5957100 +@width-grid-column-one: 11em; +@padding-vertical-header: 0.125em; +@margin-top-header: 0.625em; +@margin-bottom-header: 0.3125em; +@height-header: + @height-logo-icon + + @margin-top-header + + @margin-bottom-header + + 2 * @padding-vertical-header; +// 3.125em + 0.625em + 0.3125em + 0.25em = 4.3125em + +// Menu button +@margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em); // 0.75em @ 16 + +// Logo + +// Logo sizes per specification in T245190. +@height-logo-icon: 3.125em; + +// The logo is variable width but typically consists of: +// - a icon (50x50) +// - a wordmark (approx 120px) +@min-width-logo: unit( 180px / @font-size-browser, em ); // 11.25em @ 16 + +// Search + +// Canonical version of spec: T270202 +// This assumes the presence of variables inside screen.less. DO NOT import it separately. +// Assumes various variables defined there. +@min-width-search: unit( 150px / @font-size-browser / @font-size-base, em ); // 10.71428571em @ 16 & 0.875em +@min-width-search-tablet: unit( 350px / @font-size-browser / @font-size-base, em ); // 25em @ 16 & 0.875em +@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em +@margin-horizontal-search: unit( 40px / @font-size-browser / @font-size-base, em ); // 2.85714286em @ 16 & 0.875em + +// Personal menu + +@min-width-personal-tools: unit( 300px / @font-size-browser, em ); // 18.75 @ 16 + +// Sidebar + +@margin-top-sidebar: 0.5em; + +// Adjust the left position of the sidebar to align it with the sidebar menu button, +// in the header, while ensuring the background gradient still extends to the edge of the screen. +// note: the 1px comes from the transparent border of the sidebar button. +@padding-left-sidebar: + @margin-horizontal-sidebar-button-icon + + unit( @border-width-base / @font-size-browser, em ); + +// Layout containers + +// Page container + +@max-width-page-container: unit( 1650px / @font-size-browser, em ); // 103.125em @ 16 +@min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container ); // 106.875em +@padding-horizontal-page-container: unit( 30px / @font-size-browser, em ); // 1.875em @ 16 + +// Content containers + +@max-width-workspace-container: unit( 1440px / @font-size-browser, em ); // 90em @ 16 +@max-width-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 16 + +// Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them +// see T259331. +@padding-content: @padding-top-content @padding-horizontal-content 1.5em; +// We want ~60px of space between the end of the sidebar and the start of the +// content container for aesthetic reasons. The sidebar is already displaced +// -30px so we simply add 30px of space to the width of the sidebar. +@margin-start-content: @width-grid-column-one + unit( 8px / @font-size-browser, em ); // 11.5em @ 16 + +// Tabs + +@height-tabs: 2.5em; // Keep in sync with .vector-menu-tabs height. + +// Breakpoints + +// This determines the maximum width breakpoint at which +// the content will have a fixed start margin applied to it when the sidebar +// is open. The content can shift its position when the sidebar is open/closed +// at or below this breakpoint and will maintain its position above this breakpoint. +@max-width-margin-start-content: + (2 * @margin-start-content ) + + ( 2 * @padding-horizontal-page-container ) + + @max-width-content-container; +// 23em + 3.75em + 60em = 86.75em @ 16 + +// Defines the minimum viewport width, at which point the layout will not get any +// smaller and will start horizontal scrolling instead. +@min-width-supported: + unit( 500px / @font-size-browser, em ) - + ( 2 * @padding-horizontal-page-container ); +// 31.25em - 3.75em = 27.5em @ 16 + +// Width used to determine when to break the personal tools onto a separate line +// below the search box. +@width-comfortable: + ( 2 * @padding-horizontal-page-container ) + + @size-sidebar-button + + @margin-horizontal-sidebar-button-icon + + @min-width-logo + + ( 2 * @margin-horizontal-search ) + + @max-width-search + + @min-width-personal-tools; +// 3.75em + 2.75em + 0.75em + 11.25em + 5.71428571em + 35.71428571em + 18.75em = 78.67857142em @ 16 + +@border-color-sidebar: @background-color-secondary--modern; +@background-color-secondary--modern: #f8f9fa; +@background-color-page-container: @background-color-base; body { background-color: @background-color-secondary--modern; @@ -162,7 +280,7 @@ body { .mw-footer { border-top: @border-base; - padding: 32px 0 0 0; + padding: 0.75em; } // Container logic. diff --git a/resources/skins.vector.styles/skin-legacy.less b/resources/skins.vector.styles/skin-legacy.less deleted file mode 100644 index c5144c71..00000000 --- a/resources/skins.vector.styles/skin-legacy.less +++ /dev/null @@ -1,27 +0,0 @@ -// Legacy Vector stylesheets - -@import '../../variables.less'; -@import 'mediawiki.mixins.less'; - -@media screen { - @import 'common/normalize.less'; - @import 'legacy/layout.less'; - @import 'common/typography.less'; - - // Components - @import 'Indicators.less'; - @import 'SiteNotice.less'; - @import 'Menu.less'; - @import 'SearchBox.less'; - @import 'MenuTabs.less'; - @import 'TabWatchstarLink.less'; - @import 'legacy/MenuDropdown.less'; - @import 'MenuPortal.less'; - @import 'legacy/Sidebar.less'; - @import 'SidebarLogo.less'; - @import 'Footer.less'; -} - -@media print { - @import 'common/print.less'; -} diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less index a295f884..0b6c773e 100644 --- a/resources/skins.vector.styles/skin.less +++ b/resources/skins.vector.styles/skin.less @@ -1,35 +1,27 @@ -// Modern Vector stylesheets +/** + * Vector modern stylesheets + * See '../common/common.less' for common screen and print Vector stylesheets. + */ -@import '../../variables.less'; +@import '../common/variables.less'; @import 'mediawiki.mixins.less'; @media screen { - @import 'common/normalize.less'; - @import 'layout.less'; - @import 'common/typography.less'; + // Layouts + @import './layouts/screen.less'; // Components - @import 'Indicators.less'; - @import 'SiteNotice.less'; - @import 'Menu.less'; - @import 'VueEnhancedSearchBox.less'; - @import 'SearchBoxLoader.less'; - @import 'MenuTabs.less'; - @import 'TabWatchstarLink.less'; - @import 'MenuDropdown.less'; - @import 'MenuPortal.less'; - @import 'LanguageButton.less'; - @import 'Sidebar.less'; - @import 'SidebarLogo.less'; - @import 'Footer.less'; + @import './components/SearchBoxLoader.less'; + @import './components/VueEnhancedSearchBox.less'; + @import './components/Sidebar.less'; + @import './components/LanguageButton.less'; } @media all { - // Component styles that should apply in all modes. - @import 'Logo.less'; + // Component styles that should apply in all media. + @import './components/Logo.less'; } @media print { - @import 'common/print.less'; - @import 'layout-print.less'; + @import './layouts/print.less'; } diff --git a/skin.json b/skin.json index 58d790c0..4db3cd89 100644 --- a/skin.json +++ b/skin.json @@ -111,7 +111,10 @@ "desktop", "mobile" ], - "styles": [ "resources/skins.vector.styles/skin-legacy.less" ] + "styles": [ + "resources/common/common.less", + "resources/skins.vector.styles.legacy/skin-legacy.less" + ] }, "skins.vector.styles": { "class": "ResourceLoaderSkinModule", @@ -127,7 +130,10 @@ "desktop", "mobile" ], - "styles": [ "resources/skins.vector.styles/skin.less" ] + "styles": [ + "resources/common/common.less", + "resources/skins.vector.styles/skin.less" + ] }, "skins.vector.icons": { "selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before", diff --git a/skinStyles/mediawiki.notification.less b/skinStyles/mediawiki.notification.less index d293eae8..f19b5b23 100644 --- a/skinStyles/mediawiki.notification.less +++ b/skinStyles/mediawiki.notification.less @@ -1,5 +1,5 @@ @import 'mediawiki.ui/variables.less'; -@import '../variables.less'; +@import '../resources/common/variables.less'; /* mediawiki.notification */ diff --git a/skinStyles/mediawiki.ui.icon.less b/skinStyles/mediawiki.ui.icon.less index 38d3d4a5..e55c8af1 100644 --- a/skinStyles/mediawiki.ui.icon.less +++ b/skinStyles/mediawiki.ui.icon.less @@ -1,7 +1,7 @@ // Override core's `.mw-ui-icon` which defaults to 24x24. // The Design Style Guide and its icons are now set to 20x20. // FIXME: With core set to 20x20 this file should become obsolete, see T191021. -@import '../variables.less'; +@import '../resources/common/variables.less'; .mw-portlet-lang .mw-ui-icon:before { background-size: unit( @size-icon / @font-size-base, em ) auto; diff --git a/skinStyles/ooui.less b/skinStyles/ooui.less index 70543a59..6b2a3987 100644 --- a/skinStyles/ooui.less +++ b/skinStyles/ooui.less @@ -1,4 +1,4 @@ -@import '../variables.less'; +@import '../resources/common/variables.less'; .oo-ui-defaultOverlay, .skin-vector .oo-ui-windowManager-modal > .oo-ui-dialog,