build: Update 'stylelint-config-wikimedia' to v0.5.0 and make pass

Updates code comments and whitespacing.

Change-Id: If7665beaa2d342881483fd7a9fc0fc880768d2ef
This commit is contained in:
Volker E 2018-12-12 15:20:10 -08:00 committed by Jdlrobson
parent 339e31752a
commit f0608db19a
27 changed files with 110 additions and 75 deletions

View File

@ -17,8 +17,7 @@
"grunt-stylelint": "0.10.0",
"jsdoc": "3.5.5",
"pre-commit": "1.2.2",
"stylelint": "9.3.0",
"stylelint-config-wikimedia": "0.4.3",
"stylelint-config-wikimedia": "0.5.0",
"svgo": "0.7.2"
}
}

View File

@ -22,26 +22,33 @@ audio, video {
vertical-align: baseline;
background: none;
}
table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
caption {
font-weight: bold;
}
button {
border: 0;
background-color: transparent;
cursor: pointer;
}
body {
line-height: 1;
}
input {
line-height: normal;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
}

View File

@ -7,15 +7,16 @@
.box-sizing( border-box );
}
// We hide the table of contents unless the user is viewing in tablet resolution or higher
/* Hide the table of contents `.toc-mobile` unless the user is viewing in tablet resolution or
* higher */
.toc-mobile,
// Table of contents as provided by parser has no styling, this is a temporary measure until we are able
// to commit more time to Minerva on desktop
/* Table of contents `.toc` as provided by parser has no styling, this is a temporary measure
* until we are able to commit more time to Minerva on desktop */
.toc,
// We also need a more specific rule for tablet non-JS users who will load skins.minerva.tablet.styles
/* We also need a more specific rule for tablet non-JS users who will load skins.minerva.tablet.styles */
.client-nojs .toc-mobile,
.client-js .mw-redirectedfrom,
// FIXME: Use generic rule for print stylesheets
/* FIXME: Use generic rule for print stylesheets */
.printfooter,
.jsonly {
display: none;

View File

@ -4,6 +4,8 @@
@placeholderBackgroundColor: @grayLightest;
.lazy-image-placeholder {
background-color: @placeholderBackgroundColor;
// If the placeholder itself is inside an inline element do not use block
// See https://phabricator.wikimedia.org/T143558
// and https://phabricator.wikimedia.org/T144567
@ -17,8 +19,6 @@
display: none;
}
background-color: @placeholderBackgroundColor;
// In order to avoid reflows placeholder needs to be inline-block
// Otherwise display block will always take up the full line
// instead of allowing text before and after

View File

@ -33,7 +33,6 @@
width: 100%;
border-top: 1px solid @colorGray14;
border-bottom: 1px solid @colorGray12;
padding: 0.5em 0;
li {
@ -89,6 +88,7 @@
.watch-this-article {
visibility: hidden;
}
.is-authenticated {
.watch-this-article {
visibility: visible;

View File

@ -35,6 +35,7 @@
#bodyContent {
padding-top: 55px;
position: relative;
&:before {
top: 0;
}

View File

@ -2,12 +2,15 @@
.mw-cite-backlink {
display: none;
}
.reference-text {
font-style: italic;
}
a {
text-decoration: none;
}
.external.text {
background-image: none;
}

View File

@ -77,7 +77,8 @@ body {
.branding-box {
width: auto;
h1, // TODO: remove after T198947 HTML changes expire from cache.
// TODO: Remove `h1` after T198947 HTML changes expire from cache.
h1,
a {
margin-left: 5px;
font-size: 1em;
@ -118,32 +119,28 @@ body {
}
.search-box,
// Selector is needed to override table-cell rules
/* `.header .search-box` is needed to override table-cell rules */
.header .search-box {
display: none;
width: auto;
}
.search-box {
.search {
@searchIconSize: 20px;
@searchIconGutter: 6px;
outline: 0;
width: 100%;
// FIXME: unable to check but the important may not be needed for Nokia S60;
background-color: #fff !important; /* remove fennec default background also see bug 36490 */
// get rid of rounded corners in Safari
-webkit-appearance: none;
padding: 0.5em 0 0.5em @searchIconSize + (2 * @searchIconGutter);
background-position: left @searchIconGutter center;
background-repeat: no-repeat;
.background-size( @searchIconSize, @searchIconSize );
border-radius: @borderRadius;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.05 );
margin-top: 0;
}
.search-box .search {
@searchIconSize: 20px;
@searchIconGutter: 6px;
outline: 0;
width: 100%;
// FIXME: unable to check but the important may not be needed for Nokia S60;
background-color: #fff !important; /* remove fennec default background also see bug 36490 */
// get rid of rounded corners in Safari
-webkit-appearance: none;
padding: 0.5em 0 0.5em @searchIconSize + (2 * @searchIconGutter);
background-position: left @searchIconGutter center;
background-repeat: no-repeat;
.background-size( @searchIconSize, @searchIconSize );
border-radius: @borderRadius;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.05 );
margin-top: 0;
}
/* Search */
@ -215,9 +212,11 @@ input.search {
.in-block {
// Safari needs this. @see T106347
display: table;
.mw-headline {
width: 100%;
}
> span {
display: table-cell;
vertical-align: middle;
@ -277,9 +276,9 @@ input.search {
.backtotop,
.image-list,
.pre-content,
// Form only pages e.g Special:MobileOptions
/* Form only pages e.g Special:MobileOptions */
#mw-content-text > form > .oo-ui-fieldLayout > .oo-ui-fieldLayout-body,
// Save button on Special:MobileOptions
/* Save button on Special:MobileOptions */
#mw-content-text > form > .oo-ui-widget,
.content,
.post-content {
@ -287,16 +286,16 @@ input.search {
}
@media all and ( min-width: @width-breakpoint-tablet ) {
// FIXME: this should be one generic class name
// SpecialMobileEditWatchlist
/* FIXME: this should be one generic class name */
/* SpecialMobileEditWatchlist */
.page-summary-list,
// Talk overlay
/* Talk overlay */
.topic-title-list,
// structured languages, mobile pagelists
/* structured languages, mobile pagelists */
.site-link-list,
// overlays
/* overlays */
.overlay .panel,
// language overlay / MobileSpecialPageFeed
/* language overlay / MobileSpecialPageFeed */
.list-header {
padding-left: @contentPaddingTablet;
padding-right: @contentPaddingTablet;

View File

@ -23,13 +23,13 @@ FIXME: Review all of these hacks to see if they still apply.
display: none;
}
// Hide cleanup templates by default to non-javascript users as these stop them from reading the article itself
// Edit page notices
/* Hide cleanup templates by default to non-javascript users as these stop them from reading the article itself
* Edit page notices */
.action-edit .fmbox,
// Talk page informational boxes
/* Talk page informational boxes */
.tmbox,
#coordinates,
// Hide article badges, clean-up notices, stub notices, and navigation boxes
/* Hide article badges, clean-up notices, stub notices, and navigation boxes */
.topicon {
// It's important as some of these are tables which become display: table on larger screens
display: none !important;
@ -47,7 +47,6 @@ FIXME: Review all of these hacks to see if they still apply.
border: 1px solid @colorGray14;
margin-bottom: 2em;
background-color: @colorGray15;
display: flex;
flex: 1 1 100%;
flex-flow: column nowrap;
@ -131,6 +130,7 @@ FIXME: Review all of these hacks to see if they still apply.
background-color: @colorGray15;
margin-bottom: 1px;
overflow: hidden;
a {
color: @colorProgressive;
}
@ -148,7 +148,6 @@ FIXME: Review all of these hacks to see if they still apply.
// Hacks to render galleries and multicol tables better on mobile
@media all and ( max-width: @width-breakpoint-tablet ) {
.content {
table {
// Make {{col-beg}}, {{col-break}}, and {{col-end}} templates display single column tables

View File

@ -20,7 +20,6 @@
@import '../../minerva.less/minerva.mixins';
.content {
img {
// Matches commonElements.css
vertical-align: middle;

View File

@ -5,6 +5,7 @@
& > li > ul {
list-style-type: disc;
& > li > ul {
list-style-type: circle;
}
@ -22,8 +23,10 @@
ul {
margin-left: 1em;
}
li {
margin-bottom: 10px;
&:last-child {
margin-bottom: inherit;
}
@ -34,9 +37,11 @@
dl {
margin-left: 1em;
dt {
font-weight: bold;
}
dd {
display: block;
// Some dd's may contain images so these need to be scrollable
@ -57,4 +62,3 @@ dl {
body.mw-hide-empty-elt .mw-empty-elt {
display: none;
}

View File

@ -83,7 +83,7 @@ body {
// & T204807.
@supports ( font: -apple-system-body ) {
html {
font: -apple-system-body;
font: -apple-system-body; // stylelint-disable-line font-family-no-missing-generic-family-keyword
}
// Most iOS browsers' default font size is 16px but Dynamic Type's default

View File

@ -11,7 +11,7 @@
@amboxBackground: @colorGray15;
.ambox,
// Be more specific than .content table styles in Minerva
/* Be more specific than .content table styles in Minerva */
table.ambox {
display: none;
margin: 0;
@ -72,6 +72,7 @@ table.ambox {
a {
color: inherit !important;
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ) !important;
&:hover,
&:focus {
text-decoration: none;
@ -81,17 +82,17 @@ table.ambox {
small,
.hide-when-compact,
// Template:Expand Russian
/* Template:Expand Russian */
.mw-collapsible-content,
// Remove empty leftmost column when present (.mbox-empty-cell)
// and .verbose and any hr tags that might be present in the ambox
// See https://en.wikipedia.org/w/index.php?
// title=Special:WhatLinksHere/Template:Proposed_deletion_notify
// (https://phabricator.wikimedia.org/T197265)
/* Remove empty leftmost column when present (.mbox-empty-cell)
* and .verbose and any hr tags that might be present in the ambox
* See https://en.wikipedia.org/w/index.php?
* title=Special:WhatLinksHere/Template:Proposed_deletion_notify
* (https://phabricator.wikimedia.org/T197265) */
.mbox-empty-cell,
hr,
.verbose,
// nested amboxes (multiple issues)
/* Nested amboxes (multiple issues) */
table,
.mbox-image {
display: none;
@ -113,6 +114,7 @@ table.ambox {
bottom: @amboxPadding;
z-index: 1;
line-height: @contentLineHeight; // sets height for fade & aligns "learn more" to ambox text.
/* creates a fade under the "learn more" button to avoid overlapping text. */
&:before {
content: '';
@ -135,10 +137,12 @@ table.ambox {
height: auto;
margin-bottom: @amboxPadding * 3 !important; // important offsets `.ambox div { margin:0!important}` which offsets inline styles.
}
.ambox-learn-more {
left: @amboxIconPadding;
right: 0;
background: none;
// Move blur to far right last line
// https://phabricator.wikimedia.org/T197931#4475197
&:before {
@ -147,5 +151,4 @@ table.ambox {
}
}
}
}

View File

@ -160,11 +160,13 @@ nav {
@media all and ( min-width: @width-breakpoint-tablet ) {
@rightDrawerLeftOffset: 100% - @rightDrawerWidth;
.secondary-navigation-enabled {
#mw-mf-page-center {
left: -@rightDrawerWidth !important;
right: @rightDrawerWidth !important;
width: auto;
.main-header-button {
visibility: hidden;
}
@ -251,7 +253,6 @@ nav {
}
.primary-navigation-enabled {
&.animations {
// FIXME: Menu shouldn't need to know about drawers
.drawer .position-fixed,

View File

@ -13,12 +13,13 @@
// overlay styles
.overlay-issues {
.cleanup {
> li {
border-bottom: solid 1px @grayLight;
.issue-notice {
padding: @smallIconSize @smallIconSize @smallIconSize 0;
.mw-ui-icon {
float: left;
}
@ -37,15 +38,16 @@
}
.issue-details {
// This should match the icon width for the overlay close icon
// which is derived from these two variables:
padding-left: @iconSize + ( 2 * @iconGutterWidth );
// align the first line to the top of the element
// but line-height should be normal for text that follows (T190469)
> :first-line {
line-height: 1;
}
// This should match the icon width for the overlay close icon
// which is derived from these two variables:
padding-left: @iconSize + ( 2 * @iconGutterWidth );
// assume date
small i {
color: @colorGray7;

View File

@ -25,6 +25,7 @@
from {
opacity: 0;
}
to {
opacity: 1;
}
@ -34,6 +35,7 @@
from {
opacity: 0;
}
to {
opacity: 1;
}

View File

@ -49,7 +49,7 @@ A file for css that optimises the Minerva skin on larger devices.
// FIXME: Have a class that identifies all of these selectors
.pre-content,
// Form only pages e.g. Special:MobileOptions
/* Form only pages e.g. Special:MobileOptions */
#mw-content-text > form,
.content,
.post-content {
@ -92,6 +92,7 @@ A file for css that optimises the Minerva skin on larger devices.
caption {
background: inherit; // T170344
}
tbody {
display: table-row-group;
}
@ -108,20 +109,20 @@ A file for css that optimises the Minerva skin on larger devices.
@media screen and ( min-width: @width-breakpoint-desktop ) {
.banner-container,
// FIXME: Generic header class needed me-thinks!
/* FIXME: Generic header class needed me-thinks! */
.header,
.page-header-bar,
.content-header,
.overlay-header,
// FIXME: Generic content class needed?
/* FIXME: Generic content class needed? */
.content,
.overlay-content,
.content-unstyled,
.pre-content,
.post-content,
// Form only pages e.g. Special:MobileOptions
/* Form only pages e.g. Special:MobileOptions */
#mw-content-text > form,
// FIXME: remove need for id selector
/* FIXME: remove need for id selector */
#mw-mf-page-center .pointer-overlay {
margin-left: auto;
margin-right: auto;

View File

@ -3,10 +3,13 @@
.user-links {
margin: 15px 0 0 0;
li {
display: inline-block;
& + li {
margin-left: 4px;
&:before {
content: '·';
right: 2px;
@ -14,6 +17,7 @@
}
}
}
.mw-ui-icon-talk {
&:before {
// FIXME: this shouldn't be necessary

View File

@ -21,6 +21,7 @@
&-toolbar {
&-top {
display: table;
.row {
display: table-row;
}

View File

@ -2,7 +2,6 @@
@import '../../minerva.less/minerva.mixins';
.mw-editform {
textarea {
.editor-textarea();
}
@ -32,6 +31,7 @@
#mw-anon-edit-warning {
padding: 8px;
> p {
margin: 0;
}

View File

@ -5,9 +5,6 @@
* as well as subtle tweaks to the appearance. It's a work in progress.
*/
// FIXME: to support hlists on enwiki projects - this should be deprecated
.hlist > ul,
.hlist > dl,
// Horizontal Lists
//
// Use hlist class when dealing with lists where items should be horizontal.
@ -19,7 +16,10 @@
// </ul>
//
// Styleguide 1.5.
ul.hlist {
// FIXME: `.hlist > *` to support hlists on enwiki projects - this should be deprecated
ul.hlist,
.hlist > ul,
.hlist > dl {
li {
display: inline-block;
margin-right: 8px;
@ -34,6 +34,7 @@ ul.hlist {
font-size: 1em;
line-height: 1;
}
:last-child:after {
content: none !important;
}

View File

@ -9,6 +9,7 @@
.gallery {
.gallerybox {
width: 100% !important;
div {
width: 100% !important;
}

View File

@ -8,6 +8,7 @@
.mw-search-result-heading {
font-weight: bold;
}
.mw-search-result-data {
font-size: 0.7em;
font-style: italic;

View File

@ -1,10 +1,10 @@
@import '../../minerva.less/minerva.variables';
@import '../../minerva.less/minerva.mixins';
// hide the texts inside these selectors because they push the login form below the fold
// Hide the texts inside these selectors because they push the login form below the fold
// `#user-button` serves no purpose on the login screen as you are not logged in so cannot use.
#userloginprompt,
#languagelinks,
// This serves no purpose on the login screen as you are not logged in so cannot use.
#user-button {
display: none;
}
@ -129,6 +129,7 @@
// FIXME: Should we set the height here?
height: 72px;
margin-bottom: @headingMargin;
img {
// Important to override default max-width and height auto combo
height: 72px !important;

View File

@ -14,10 +14,12 @@
.mw-echo-notification {
padding: 1.75em @contentPaddingTablet;
}
.overlay-header .cancel {
// 0 because we want to have some tappable area to the left of the icon
left: 0;
}
.overlay-header {
padding-left: 0;
padding-right: 0;

View File

@ -22,6 +22,7 @@
.search-box {
display: table-cell;
}
.spinner-container,
.search-content,
.results {

View File

@ -6,10 +6,12 @@
right: 0;
bottom: 0;
}
.position-fixed {
// use !important to override more specific rules (e.g. in Overlay.less)
position: fixed !important;
}
.touch-events {
:focus {
outline: 0;