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,