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 337920f..7d067c3 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 0acb91f..5727239 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 0000000..e3d0d05 --- /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 dd4794e..ec2a7cb 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 50a1c6d..86fd7ce 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 c880a61..891c960 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 58d2dc3..a1afa2a 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 a7e92c4..3bdb086 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 eced99a..9dcdcc8 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 7a2f70d..d57f5b1 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 d4b4924..98a04db 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 fbac2e1..97f2c3e 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 45e632f..11a9321 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 edf3745..3ee80e1 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 63557d1..bd8ec85 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 4fd1962..6607521 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 e89acb6..76c36be 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 38d7382..d440a4c 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 0000000..c50bbf8 --- /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 4399f67..1c15ad5 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 297efaa..ed0e1f4 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 7379539..dc951d8 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 0e85a63..646bb51 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 4a511b1..1e3e382 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 ba4a10e..0000000 --- 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 a3b5ab8..315456b 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 c5144c7..0000000 --- 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 a295f88..0b6c773 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 58d790c..4db3cd8 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 d293eae..f19b5b2 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 38d3d4a..e55c8af 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 70543a5..6b2a398 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,