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
This commit is contained in:
jdlrobson
Jdlrobson
parent
6f57028553
commit
e4a4050b81
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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. */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
@import '../../variables.less';
|
||||
|
||||
/* Site Notice (includes notices from CentralNotice extension) */
|
||||
#siteNotice {
|
||||
font-size: @font-size-site-notice;
|
||||
}
|
||||
|
|
@ -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% );
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue