From e4a4050b81fcafaaa1eeac4a3caca26ba066d5c8 Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Thu, 9 Apr 2020 12:16:36 -0700 Subject: [PATCH] Organize CSS by common, layout, typography and components Moving styles from the existing styles to common/layout or components stylesheets they should be associated with. Components are identified using PascalCase. Lowercase names are used for things that are not components. This distinction should help us reason with the code better and make it clearer where CSS belongs, saving us lots of wasted effort discussing conventions. Patch isn't making actual CSS changes themselves - for testing purposes this should be a NOOP. In preparation for the gradient removal, 'background-gradient.less' is marked as legacy. Merged 'externalLinks.less' into content.less, they belong to content. Bug: T249073 Change-Id: I8dbc29b7a19f7613b57b0984a8befaeae9c08798 --- resources/skins.vector.styles/Indicators.less | 14 ++ resources/skins.vector.styles/Menu.less | 5 + resources/skins.vector.styles/SiteNotice.less | 6 + ...tar-ie8.less => TabWatchstarLink-ie8.less} | 0 .../{watchstar.less => TabWatchstarLink.less} | 0 resources/skins.vector.styles/common.less | 174 ------------------ .../skins.vector.styles/common/content.less | 80 ++++++++ .../{ => common}/print.less | 0 .../common/typography.less | 50 +++++ .../skins.vector.styles/externalLinks.less | 10 - resources/skins.vector.styles/index.less | 23 ++- resources/skins.vector.styles/layout.less | 30 +++ resources/skins.vector.styles/legacy.less | 25 ++- .../legacy/background-gradient.less | 20 ++ .../skins.vector.styles/legacy/layout.less | 31 ++++ stories/MenuTabs.stories.js | 2 +- 16 files changed, 272 insertions(+), 198 deletions(-) create mode 100644 resources/skins.vector.styles/Indicators.less create mode 100644 resources/skins.vector.styles/SiteNotice.less rename resources/skins.vector.styles/{watchstar-ie8.less => TabWatchstarLink-ie8.less} (100%) rename resources/skins.vector.styles/{watchstar.less => TabWatchstarLink.less} (100%) delete mode 100644 resources/skins.vector.styles/common.less create mode 100644 resources/skins.vector.styles/common/content.less rename resources/skins.vector.styles/{ => common}/print.less (100%) create mode 100644 resources/skins.vector.styles/common/typography.less delete mode 100644 resources/skins.vector.styles/externalLinks.less create mode 100644 resources/skins.vector.styles/legacy/background-gradient.less diff --git a/resources/skins.vector.styles/Indicators.less b/resources/skins.vector.styles/Indicators.less new file mode 100644 index 0000000..50a1c6d --- /dev/null +++ b/resources/skins.vector.styles/Indicators.less @@ -0,0 +1,14 @@ +@import '../../variables.less'; + +// FIXME: Is specific `.mw-body` even needed? Does `.mw-indicators` exist outside? +.mw-body { + .mw-indicators { + font-size: @font-size-base; + line-height: @line-height-base; + position: relative; + } + + .mw-indicator { + display: inline-block; + } +} diff --git a/resources/skins.vector.styles/Menu.less b/resources/skins.vector.styles/Menu.less index d35cc34..8c6e403 100644 --- a/resources/skins.vector.styles/Menu.less +++ b/resources/skins.vector.styles/Menu.less @@ -1,6 +1,11 @@ @import '../../variables.less'; @import 'mediawiki.mixins.less'; +/* Hide empty portlets */ +.emptyPortlet { + display: none; +} + /* Personal */ .vector-menu, /* FIXME: Remove p-personal selector when cache has cleared. */ diff --git a/resources/skins.vector.styles/SiteNotice.less b/resources/skins.vector.styles/SiteNotice.less new file mode 100644 index 0000000..fbac2e1 --- /dev/null +++ b/resources/skins.vector.styles/SiteNotice.less @@ -0,0 +1,6 @@ +@import '../../variables.less'; + +/* Site Notice (includes notices from CentralNotice extension) */ +#siteNotice { + font-size: @font-size-site-notice; +} diff --git a/resources/skins.vector.styles/watchstar-ie8.less b/resources/skins.vector.styles/TabWatchstarLink-ie8.less similarity index 100% rename from resources/skins.vector.styles/watchstar-ie8.less rename to resources/skins.vector.styles/TabWatchstarLink-ie8.less diff --git a/resources/skins.vector.styles/watchstar.less b/resources/skins.vector.styles/TabWatchstarLink.less similarity index 100% rename from resources/skins.vector.styles/watchstar.less rename to resources/skins.vector.styles/TabWatchstarLink.less diff --git a/resources/skins.vector.styles/common.less b/resources/skins.vector.styles/common.less deleted file mode 100644 index cff58ab..0000000 --- a/resources/skins.vector.styles/common.less +++ /dev/null @@ -1,174 +0,0 @@ -/* - * Any rules which should not be flipped automatically in right-to-left situations should be - * prepended with @noflip in a comment block. - * - */ -@import '../../variables.less'; -@import 'mediawiki.mixins.less'; - -/* Framework */ -html { - font-size: @font-size-root; -} - -html, -body { - height: 100%; - margin: 0; - padding: 0; - font-family: @font-family-sans; -} - -body { - background-color: @background-color-secondary; - overflow-y: scroll; -} - -/* Content */ -.mw-body, -.parsoid-body { - background-color: @background-color-base; - color: @color-base; - padding: @padding-content; - direction: ltr; -} - -.mw-body { - /* Border on top, left, and bottom side */ - border: @border-width-base @border-style-base @border-color-content; - border-right-width: 0; - /* Merge the border with tabs' one (in their background image) */ - margin-top: -@border-width-base; - - // h1's can exist outside of mw-body-content so some heading styles - // need to be defined in mw-body as well - & h1, - &-content h1, - &-content h2 { - margin-bottom: 0.25em; - padding: 0; - font-family: @font-family-serif; - line-height: @line-height-heading; - - // Fallback heading font for scripts which render poorly in `@font-family-serif`. - // See T73240 - &:lang( ja ), /* See T65817 */ - &:lang( he ), /* See T65843 and T65844 */ - &:lang( ko ) { /* See T65827 */ - font-family: @font-family-sans--fallback; - } - - /* Burmese (Myanmar) language headlines would be cropped with set `line-height` */ - /* See T193270 */ - &:lang( my ) { - line-height: normal; - } - } - - & h1, - &-content h1 { - font-size: @font-size-heading-1; - } - - .firstHeading { - /* Change the default from mediawiki.skinning CSS to let indicators float into heading area */ - overflow: visible; - } - - .mw-indicators { - font-size: @font-size-base; - line-height: @line-height-base; - position: relative; - } - - .mw-indicator { - display: inline-block; - } -} - -.mw-body-content { - font-size: @font-size-base; - // Support IE 9-11, Trident cuts values 2 digits after decimal point. - // `calc` enables to set correct calculation in place again. See T102364. - font-size: calc( 1em ~'*' unit( @font-size-base ) ); - line-height: @line-height-base; - - p { - margin: 0.5em 0; - } - - h1 { - margin-top: 1em; - } - - h2 { - margin-top: 1em; - font-size: @font-size-heading-2; - } - - h3, - h4, - h5, - h6 { - margin-top: 0.3em; - margin-bottom: 0; - padding-bottom: 0; - line-height: @line-height-base; - } - - h3 { - font-size: @font-size-heading-3; - } - - h3, - h4 { - font-weight: bold; - } - - h4, - h5, - h6 { - font-size: @font-size-reset; // Reset. - } - - .toc h2 { - font-family: @font-family-sans; - font-size: @font-size-reset; // Reset. - } -} - -/* Allow edit sections outside of mw-body-content (T160269) */ -.mw-editsection, -.mw-editsection-like { - font-family: @font-family-sans; -} - -/* Hide empty portlets */ -.emptyPortlet { - display: none; -} - -ul { - // No need for PNG fallback. Fallback is browser default (a smaller, also black, circle). - .list-style-image( 'images/bullet-icon.svg' ); -} - -pre, -.mw-code { - line-height: @line-height-code; -} - -/* Site Notice (includes notices from CentralNotice extension) */ -#siteNotice { - font-size: @font-size-site-notice; -} - -.mw-jump-link:not( :focus ) { - .mixin-screen-reader-text; -} - -/* Head */ -#mw-page-base { - background-position: bottom left; - .vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% ); -} diff --git a/resources/skins.vector.styles/common/content.less b/resources/skins.vector.styles/common/content.less new file mode 100644 index 0000000..a96c4c8 --- /dev/null +++ b/resources/skins.vector.styles/common/content.less @@ -0,0 +1,80 @@ +/* + * Any rules which should not be flipped automatically in right-to-left situations should be + * prepended with @noflip in a comment block. + * + */ + +.mw-body-content { + p { + margin: 0.5em 0; + } + + h1 { + margin-top: 1em; + } + + h2 { + margin-top: 1em; + font-size: @font-size-heading-2; + } + + h3, + h4, + h5, + h6 { + margin-top: 0.3em; + margin-bottom: 0; + padding-bottom: 0; + line-height: @line-height-base; + } + + h3 { + font-size: @font-size-heading-3; + } + + h3, + h4 { + font-weight: bold; + } + + h4, + h5, + h6 { + font-size: @font-size-reset; // Reset. + } + + .toc h2 { + font-family: @font-family-sans; + font-size: @font-size-reset; // Reset. + } +} + +/* Allow edit sections outside of mw-body-content (T160269) */ +.mw-editsection, +.mw-editsection-like { + font-family: @font-family-sans; +} + +ul { + // No need for PNG fallback. Fallback is browser default (a smaller, also black, circle). + .list-style-image( 'images/bullet-icon.svg' ); +} + +pre, +.mw-code { + line-height: @line-height-code; +} + +.mw-jump-link:not( :focus ) { + .mixin-screen-reader-text; +} + +// External links +.mw-parser-output { + .external { + background-position: center right; + background-repeat: no-repeat; + .background-image-svg( 'images/external-link-ltr-icon.svg', 'images/external-link-ltr-icon.png' ); + padding-right: 13px; + } +} diff --git a/resources/skins.vector.styles/print.less b/resources/skins.vector.styles/common/print.less similarity index 100% rename from resources/skins.vector.styles/print.less rename to resources/skins.vector.styles/common/print.less diff --git a/resources/skins.vector.styles/common/typography.less b/resources/skins.vector.styles/common/typography.less new file mode 100644 index 0000000..8ecc33c --- /dev/null +++ b/resources/skins.vector.styles/common/typography.less @@ -0,0 +1,50 @@ +@import '../../../variables.less'; + +html { + font-size: @font-size-root; +} + +html, +body { + font-family: @font-family-sans; +} + +.mw-body-content { + font-size: @font-size-base; + // Support IE 9-11, Trident cuts values 2 digits after decimal point. + // `calc` enables to set correct calculation in place again. See T102364. + font-size: calc( 1em ~'*' unit( @font-size-base ) ); + line-height: @line-height-base; +} + +.mw-body { + // h1's can exist outside of mw-body-content so some heading styles + // need to be defined in mw-body as well + & h1, + &-content h1, + &-content h2 { + margin-bottom: 0.25em; + padding: 0; + font-family: @font-family-serif; + line-height: @line-height-heading; + + // Fallback heading font for scripts which render poorly in `@font-family-serif`. + // See T73240 + &:lang( ja ), /* See T65817 */ + &:lang( he ), /* See T65843 and T65844 */ + &:lang( ko ) { /* See T65827 */ + font-family: @font-family-sans--fallback; + } + + /* Burmese (Myanmar) language headlines would be cropped with set `line-height` */ + /* See T193270 */ + &:lang( my ) { + line-height: normal; + } + } + + & h1, + &-content h1 { + font-size: @font-size-heading-1; + } +} diff --git a/resources/skins.vector.styles/externalLinks.less b/resources/skins.vector.styles/externalLinks.less deleted file mode 100644 index d8095e2..0000000 --- a/resources/skins.vector.styles/externalLinks.less +++ /dev/null @@ -1,10 +0,0 @@ -@import 'mediawiki.mixins.less'; -// External links -.mw-parser-output { - .external { - background-position: center right; - background-repeat: no-repeat; - .background-image-svg( 'images/external-link-ltr-icon.svg', 'images/external-link-ltr-icon.png' ); - padding-right: 13px; - } -} diff --git a/resources/skins.vector.styles/index.less b/resources/skins.vector.styles/index.less index 852a4cd..78f78d5 100644 --- a/resources/skins.vector.styles/index.less +++ b/resources/skins.vector.styles/index.less @@ -1,23 +1,34 @@ +// Modern Vector stylesheets + @import '../../variables.less'; @import 'mediawiki.mixins.less'; -/* Vector screen styles */ @media screen { - @import 'common.less'; @import 'layout.less'; + // FIXME: Will be removed with new header. + @import 'legacy/background-gradient.less'; + @import 'common/content.less'; + @import 'common/typography.less'; + + // Components @import 'Logo.less'; + @import 'Indicators.less'; + @import 'SiteNotice.less'; @import 'Menu.less'; @import 'SearchBox.less'; @import 'MenuTabs.less'; - @import 'watchstar.less'; + @import 'TabWatchstarLink.less'; @import 'MenuDropdown.less'; @import 'Portal.less'; @import 'Sidebar.less'; @import 'SidebarLogo.less'; @import 'Footer.less'; @import 'EmphasizedSidebarAction.less'; - @import 'externalLinks.less'; } -@import 'watchstar-ie8.less'; -@import 'print.less'; +// Support: IE8 +// Media query hack required. +@import 'TabWatchstarLink-ie8.less'; + +// Media: Print +@import 'common/print.less'; diff --git a/resources/skins.vector.styles/layout.less b/resources/skins.vector.styles/layout.less index b4193f8..4263989 100644 --- a/resources/skins.vector.styles/layout.less +++ b/resources/skins.vector.styles/layout.less @@ -22,6 +22,36 @@ 2 * @padding-vertical-header; @width-grid-column-one: 11em; +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +body { + overflow-y: scroll; +} + +.mw-body, +.parsoid-body { + // General background/foreground color definition as one exception to the rule. + background-color: @background-color-base; + color: @color-base; + direction: ltr; + padding: @padding-content; +} + +.mw-body { + /* Merge the border with tabs' one (in their background image) */ + margin-top: -@border-width-base; + + .firstHeading { + /* Change the default from mediawiki.skinning CSS to let indicators float into heading area */ + overflow: visible; + } +} + /* Space for header above content */ .mw-header-placeholder { // Reserve space for the absolute positioned header and tabs. diff --git a/resources/skins.vector.styles/legacy.less b/resources/skins.vector.styles/legacy.less index 5acf767..5eade86 100644 --- a/resources/skins.vector.styles/legacy.less +++ b/resources/skins.vector.styles/legacy.less @@ -1,20 +1,31 @@ -@import '../../variables.less'; +// Legacy Vector stylesheets + +@import '../../variables.less'; +@import 'mediawiki.mixins.less'; -/* Vector screen styles */ @media screen { - @import 'common.less'; @import 'legacy/layout.less'; + @import 'legacy/background-gradient.less'; + @import 'common/content.less'; + @import 'common/typography.less'; + + // Components + @import 'Indicators.less'; + @import 'SiteNotice.less'; @import 'Menu.less'; @import 'SearchBox.less'; @import 'MenuTabs.less'; - @import 'watchstar.less'; + @import 'TabWatchstarLink.less'; @import 'MenuDropdown.less'; @import 'Portal.less'; @import 'Sidebar.less'; @import 'SidebarLogo.less'; @import 'Footer.less'; - @import 'externalLinks.less'; } -@import 'watchstar-ie8.less'; -@import 'print.less'; +// Support: IE8 +// Media query hack required. +@import 'TabWatchstarLink-ie8.less'; + +// Media: Print +@import 'common/print.less'; diff --git a/resources/skins.vector.styles/legacy/background-gradient.less b/resources/skins.vector.styles/legacy/background-gradient.less new file mode 100644 index 0000000..bdbcb7a --- /dev/null +++ b/resources/skins.vector.styles/legacy/background-gradient.less @@ -0,0 +1,20 @@ +// 'background-gradient.less' will be removed and its rules moved to +// legacy/layout.less as soon as new header is in place. + +@import '../../../variables.less'; + +body { + background-color: @background-color-secondary; +} + +/* Head */ +#mw-page-base { + background-position: bottom left; + .vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% ); +} + +.mw-body { + /* Border on top, left, and bottom side */ + border: @border-width-base @border-style-base @border-color-content; + border-right-width: 0; +} diff --git a/resources/skins.vector.styles/legacy/layout.less b/resources/skins.vector.styles/legacy/layout.less index bd421a3..f1a2077 100644 --- a/resources/skins.vector.styles/legacy/layout.less +++ b/resources/skins.vector.styles/legacy/layout.less @@ -2,12 +2,43 @@ // The rules here should only define the layout, not color or typography. @import 'mediawiki.mixins.less'; +@import '../../../variables.less'; + +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + +body { + overflow-y: scroll; +} + +.mw-body, +.parsoid-body { + // General background/foreground color definition as one exception to the rule. + background-color: @background-color-base; + color: @color-base; + direction: ltr; + padding: @padding-content; +} .mw-body, #mw-data-after-content { margin-left: 10em; } +.mw-body { + /* Merge the border with tabs' one (in their background image) */ + margin-top: -@border-width-base; + + .firstHeading { + /* Change the default from mediawiki.skinning CSS to let indicators float into heading area */ + overflow: visible; + } +} + .mw-indicators { float: right; z-index: @z-index-indicators; diff --git a/stories/MenuTabs.stories.js b/stories/MenuTabs.stories.js index 8b2888f..e459cde 100644 --- a/stories/MenuTabs.stories.js +++ b/stories/MenuTabs.stories.js @@ -2,7 +2,7 @@ import mustache from 'mustache'; import { menuTemplate as vectorTabsTemplate } from './Menu.stories.data'; import { namespaceTabsData, pageActionsData } from './MenuTabs.stories.data'; import '../resources/skins.vector.styles/MenuTabs.less'; -import '../resources/skins.vector.styles/watchstar.less'; +import '../resources/skins.vector.styles/TabWatchstarLink.less'; import '../.storybook/common.less'; export default {