jenkins-bot has submitted this change and it was merged. Change subject: Add whitespace rules to stylelint ......................................................................
Add whitespace rules to stylelint See https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS#Whitespace Change-Id: Id7908c1ada0a3dd0de400e917ebb7cde7c761c25 --- M .stylelintrc M src/styles/common.less M src/themes/apex/common.less M src/themes/apex/elements.less M src/themes/apex/layouts.less M src/themes/apex/tools.less M src/themes/apex/widgets.less M src/themes/apex/windows.less 8 files changed, 90 insertions(+), 70 deletions(-) Approvals: Jforrester: Looks good to me, approved Esanders: Looks good to me, but someone else must approve jenkins-bot: Verified diff --git a/.stylelintrc b/.stylelintrc index 495cf72..d074d1d 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -5,7 +5,29 @@ "color-named": [ "never" ], "color-no-invalid-hex": true, + "declaration-bang-space-after": [ "never" ], + "declaration-bang-space-before": [ "always" ], + "declaration-colon-space-after": [ "always" ], + "declaration-colon-space-before": [ "never" ], + "font-family-name-quotes": [ "single-unless-keyword" ], - "font-weight-notation": [ "named-where-possible" ] + "font-weight-notation": [ "named-where-possible" ], + + "function-calc-no-unspaced-operator": true, + "function-comma-newline-after": "never-multi-line", + "function-comma-newline-before": "never-multi-line", + "function-comma-space-after": [ "always" ], + "function-comma-space-before": [ "never" ], + "function-parentheses-newline-inside": [ "never-multi-line" ], + "function-parentheses-space-inside": [ "always" ], + "function-url-quotes": [ "none" ], + "function-whitespace-after": [ "always" ], + + "string-no-newline": true, + + "value-list-comma-newline-after": [ "never-multi-line" ], + "value-list-comma-newline-before": [ "never-multi-line" ], + "value-list-comma-space-after": [ "always-single-line" ], + "value-list-comma-space-before": [ "never" ] } } \ No newline at end of file diff --git a/src/styles/common.less b/src/styles/common.less index 537fb7a..9ca943f 100644 --- a/src/styles/common.less +++ b/src/styles/common.less @@ -12,7 +12,7 @@ // Mixins .oo-ui-background-image( @url ) { - background-image: e( '/* @embed */' ) url(~'@{url}'); + background-image: e( '/* @embed */' ) url( ~'@{url}' ); // stylelint-disable-line function-url-quotes } .oo-ui-background-image-svg2( @svg, @fallback ) when ( @oo-ui-distribution = mixed ) { @@ -39,14 +39,14 @@ } .oo-ui-animation( @value1, @value2: X, ... ) { - @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`; + @value: ~`"@{arguments}".replace( /[\[\]]|\,\sX/g, '' )`; // stylelint-disable-line function-comma-space-after, function-whitespace-after -webkit-animation: @value; -moz-animation: @value; animation: @value; } .oo-ui-transition( @value1, @value2: X, ... ) { - @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`; + @value: ~`"@{arguments}".replace( /[\[\]]|\,\sX/g, '' )`; // stylelint-disable-line function-comma-space-after, function-whitespace-after -webkit-transition: @value; -moz-transition: @value; transition: @value; @@ -73,9 +73,9 @@ .oo-ui-vertical-gradient( @start: #eee, @stop: #fff ) { background-color: average( @start, @stop ); background-image: -webkit-gradient( linear, right top, right bottom, color-stop( 0, @start ), color-stop( 100%, @stop ) ); - background-image: -webkit-linear-gradient( top, @start 0, @stop 100% ); - background-image: -moz-linear-gradient( top, @start 0, @stop 100% ); - background-image: linear-gradient( to bottom, @start 0, @stop 100% ); + background-image: -webkit-linear-gradient( top, @start 0, @stop 100% ); + background-image: -moz-linear-gradient( top, @start 0, @stop 100% ); + background-image: linear-gradient( to bottom, @start 0, @stop 100% ); // Maximize tolerance of color values input. // Also expand shorthands like `#abc` to `#ffaabbcc`, as IE's proprietary gradient filter doesn't // accept them. diff --git a/src/themes/apex/common.less b/src/themes/apex/common.less index 81237ca..e6a3b5e 100644 --- a/src/themes/apex/common.less +++ b/src/themes/apex/common.less @@ -22,8 +22,8 @@ @size-icon-min: 24px; @size-indicator-min: 12px; -@size-icon: unit(24 / 16 / 0.8, em); -@size-indicator: unit(12 / 16 / 0.8, em); +@size-icon: unit( 24 / 16 / 0.8, em ); +@size-indicator: unit( 12 / 16 / 0.8, em ); // Theme animation variables @quick-ease: 100ms ease; diff --git a/src/themes/apex/elements.less b/src/themes/apex/elements.less index ba90281..1b6d8bf 100644 --- a/src/themes/apex/elements.less +++ b/src/themes/apex/elements.less @@ -90,7 +90,7 @@ > .oo-ui-buttonElement-button { padding: 0.2em 0.8em; border-radius: 0.3em; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); + text-shadow: 0 1px 1px rgba( 255, 255, 255, 0.5 ); border: 1px #c9c9c9 solid; .oo-ui-transition(border-color @quick-ease); .oo-ui-vertical-gradient(#fff, #ddd); @@ -111,7 +111,7 @@ &.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, &.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, &.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { - box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px 4px 0 rgba( 0, 0, 0, 0.07 ); color: #000; border-color: #c9c9c9; .oo-ui-vertical-gradient(#ddd, #fff); diff --git a/src/themes/apex/layouts.less b/src/themes/apex/layouts.less index 60be239..0ff3fa9 100644 --- a/src/themes/apex/layouts.less +++ b/src/themes/apex/layouts.less @@ -13,7 +13,7 @@ border-right: 1px solid #ddd; > .oo-ui-outlineControlsWidget { - box-shadow: 0 0 0.25em rgba(0,0,0,0.25); + box-shadow: 0 0 0.25em rgba( 0, 0, 0, 0.25 ); } } } @@ -149,7 +149,7 @@ &-framed { border-radius: 0.5em; - box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.25); + box-shadow: 0 0.25em 1em rgba( 0, 0, 0, 0.25 ); } &-padded&-framed { diff --git a/src/themes/apex/tools.less b/src/themes/apex/tools.less index c989258..7f59f7c 100644 --- a/src/themes/apex/tools.less +++ b/src/themes/apex/tools.less @@ -104,7 +104,7 @@ &.oo-ui-widget-enabled { &:hover { - border-color: rgba(0,0,0,0.1); + border-color: rgba( 0, 0, 0, 0.1 ); } .oo-ui-tool-link .oo-ui-tool-title { @@ -146,18 +146,18 @@ &.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool { &.oo-ui-widget-enabled:hover { - border-color: rgba(0,0,0,0.2); + border-color: rgba( 0, 0, 0, 0.2 ); } &.oo-ui-tool-active { &.oo-ui-widget-enabled { - border-color: rgba(0,0,0,0.2); - box-shadow: inset 0 0.0875em 0.0875em 0 rgba(0, 0, 0, 0.07); + border-color: rgba( 0, 0, 0, 0.2 ); + box-shadow: inset 0 0.0875em 0.0875em 0 rgba( 0, 0, 0, 0.07 ); .oo-ui-vertical-gradient(#F1F7FB, #fff); } &.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled { - border-left-color: rgba(0,0,0,0.1); + border-left-color: rgba( 0, 0, 0, 0.1 ); } } @@ -186,7 +186,7 @@ &:focus { outline: 0; } - + > .oo-ui-tool-link { &:focus { outline: 0; @@ -288,7 +288,7 @@ &-active.oo-ui-widget-enabled { border-bottom-left-radius: 0; border-bottom-right-radius: 0; - box-shadow: inset 0 0.0875em 0.0875em 0 rgba(0, 0, 0, 0.07); + box-shadow: inset 0 0.0875em 0.0875em 0 rgba( 0, 0, 0, 0.07 ); .oo-ui-vertical-gradient(#F1F7FB, #fff); } @@ -298,7 +298,7 @@ margin: 0 -1px; border: 1px solid #ccc; background-color: #fff; - box-shadow: 0 0.3125em 1.25em rgba(0,0,0,0.25); + box-shadow: 0 0.3125em 1.25em rgba( 0, 0, 0, 0.25 ); } .oo-ui-tool-link { @@ -331,7 +331,7 @@ } &.oo-ui-popupToolGroup-active { - border-color: rgba(0,0,0,0.2); + border-color: rgba( 0, 0, 0, 0.2 ); } .oo-ui-tool { @@ -341,22 +341,22 @@ &-active { &.oo-ui-widget-enabled { - border-color: rgba(0,0,0,0.1); - box-shadow: inset 0 0.0875em 0.0875em 0 rgba(0, 0, 0, 0.07); + border-color: rgba( 0, 0, 0, 0.1 ); + box-shadow: inset 0 0.0875em 0.0875em 0 rgba( 0, 0, 0, 0.07 ); .oo-ui-vertical-gradient(#F1F7FB, #fff); + .oo-ui-tool-active.oo-ui-widget-enabled { - border-top-color: rgba(0,0,0,0.1); + border-top-color: rgba( 0, 0, 0, 0.1 ); } &:hover { - border-color: rgba(0,0,0,0.2); + border-color: rgba( 0, 0, 0, 0.2 ); } } } &.oo-ui-widget-enabled { &:hover { - border-color: rgba(0,0,0,0.2); + border-color: rgba( 0, 0, 0, 0.2 ); } &:hover .oo-ui-tool-link .oo-ui-iconElement-icon { opacity: 1; @@ -390,7 +390,7 @@ } .theme-oo-ui-menuToolGroup () { - border-color: rgba(0,0,0,0.1); + border-color: rgba( 0, 0, 0, 0.1 ); .oo-ui-popupToolGroup-handle { min-width: 10em; @@ -406,12 +406,12 @@ &.oo-ui-widget-enabled { &:hover { - border-color: rgba(0,0,0,0.2); + border-color: rgba( 0, 0, 0, 0.2 ); } } &.oo-ui-popupToolGroup-active { - border-color: rgba(0,0,0,0.25); + border-color: rgba( 0, 0, 0, 0.25 ); } .oo-ui-tool { @@ -449,7 +449,7 @@ &.oo-ui-widget-disabled { color: #ccc; - border-color: rgba(0,0,0,0.05); + border-color: rgba( 0, 0, 0, 0.05 ); .oo-ui-indicatorElement-indicator, .oo-ui-iconElement-icon { diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less index 9eecc42..2e46697 100644 --- a/src/themes/apex/widgets.less +++ b/src/themes/apex/widgets.less @@ -102,16 +102,15 @@ width: 100%; max-width: @max-width-input-default; background-color: @background-color-main; - .oo-ui-inline-spacing(0.5em); &-handle { height: 2.5em; - border: 1px solid rgba(0,0,0,0.1); + border: 1px solid rgba( 0, 0, 0, 0.1 ); border-radius: 0.25em; &:hover { - border-color: rgba(0,0,0,0.2); + border-color: rgba( 0, 0, 0, 0.2 ); } .oo-ui-indicatorElement-indicator { @@ -178,7 +177,7 @@ &-info { height: 2.4em; background-color: @background-color-main; - border: 1px solid rgba(0,0,0,0.1); + border: 1px solid rgba( 0, 0, 0, 0.1 ); border-radius: 0.25em; > .oo-ui-indicatorElement-indicator { @@ -339,7 +338,7 @@ padding: 0.5em; font-size: inherit; font-family: inherit; - border: 1px solid rgba(0,0,0,0.1); + border: 1px solid rgba( 0, 0, 0, 0.1 ); border-radius: 0.25em; } @@ -353,7 +352,7 @@ &.oo-ui-widget-enabled { select:hover, select:focus { - border-color: rgba(0,0,0,0.2); + border-color: rgba( 0, 0, 0, 0.2 ); outline: none; } } @@ -482,7 +481,6 @@ .theme-oo-ui-comboBoxInputWidget () { width: 100%; max-width: @max-width-input-default; - .oo-ui-inline-spacing(0.5em); &.oo-ui-widget-disabled, @@ -508,7 +506,7 @@ .oo-ui-inline-spacing(0.5em); padding: 0.15em 0.25em; - border: 1px solid rgba(0,0,0,0.1); + border: 1px solid rgba( 0, 0, 0, 0.1 ); border-radius: 0.25em; .oo-ui-box-sizing(border-box); @@ -558,7 +556,7 @@ } &:hover &-handle { - border-color: rgba(0,0,0,0.2); + border-color: rgba( 0, 0, 0, 0.2 ); } &.oo-ui-widget-disabled &-handle { @@ -756,7 +754,7 @@ .oo-ui-selectWidget-depressed &.oo-ui-optionWidget-selected { background-color: #a7dcff; - text-shadow: 0 1px 1px rgba(255,255,255,0.5); + text-shadow: 0 1px 1px rgba( 255, 255, 255, 0.5 ); } &.oo-ui-flaggedElement-important { @@ -795,7 +793,7 @@ &.oo-ui-widget-enabled { &:hover { - background-color: rgba(255, 255, 255, 0.2); + background-color: rgba( 255, 255, 255, 0.2 ); border-color: #ddd; } @@ -818,7 +816,7 @@ background-color: @background-color-main; border: 1px solid #ccc; border-radius: 0.25em; - box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 0.15em 0.5em 0 rgba( 0, 0, 0, 0.2 ); } @anchor-size: 6px; @@ -879,7 +877,7 @@ &-query { height: 4em; padding: 0 1em; - box-shadow: 0 0 0.5em rgba(0,0,0,0.2); + box-shadow: 0 0 0.5em rgba( 0, 0, 0, 0.2 ); .oo-ui-textInputWidget { margin: 0.75em 0; @@ -926,7 +924,7 @@ margin-top: -1px; border: 1px solid #ccc; border-radius: 0 0 0.25em 0.25em; - box-shadow: 0 0.15em 1em 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 0.15em 1em 0 rgba( 0, 0, 0, 0.2 ); } .theme-oo-ui-floatingMenuSelectWidget () {} @@ -935,7 +933,7 @@ .theme-oo-ui-tabSelectWidget () { background-color: #eee; - box-shadow: inset 0 -0.015em 0.1em rgba(0, 0, 0, 0.1); + box-shadow: inset 0 -0.015em 0.1em rgba( 0, 0, 0, 0.1 ); } .theme-oo-ui-numberInputWidget () { @@ -985,7 +983,7 @@ height: 1.5em; margin-top: -1px; border-radius: 1em; - box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1); + box-shadow: 0 0.1em 0.25em rgba( 0, 0, 0, 0.1 ); border: 1px #c9c9c9 solid; .oo-ui-transition(left @medium-ease, margin-left @medium-ease); @@ -1001,7 +999,7 @@ .oo-ui-toggleSwitchWidget-glow { border-radius: 1em; - box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07); + box-shadow: inset 0 1px 4px 0 rgba( 0, 0, 0, 0.07 ); .oo-ui-transition(opacity @medium-ease); .oo-ui-vertical-gradient(#b0d9ee, #eaf4fa); diff --git a/src/themes/apex/windows.less b/src/themes/apex/windows.less index 28db43c..80778c7 100644 --- a/src/themes/apex/windows.less +++ b/src/themes/apex/windows.less @@ -7,14 +7,14 @@ .theme-oo-ui-dialog () { &-content > .oo-ui-window-body { - box-shadow: 0 0 0.66em rgba(0,0,0,0.25); + box-shadow: 0 0 0.66em rgba( 0, 0, 0, 0.25 ); } } .theme-oo-ui-messageDialog () { &-content { .oo-ui-window-body { - box-shadow: 0 0 0.33em rgba(0,0,0,0.33); + box-shadow: 0 0 0.33em rgba( 0, 0, 0, 0.33 ); } } @@ -79,21 +79,21 @@ } &:hover { - background-color: rgba(0,0,0,0.05); + background-color: rgba( 0, 0, 0, 0.05 ); } &:active { - background-color: rgba(0,0,0,0.1); + background-color: rgba( 0, 0, 0, 0.1 ); } &.oo-ui-flaggedElement { &-progressive { &:hover { - background-color: rgba(8,126,204,0.05); + background-color: rgba( 8, 126, 204, 0.05 ); } &:active { - background-color: rgba(8,126,204,0.1); + background-color: rgba( 8, 126, 204, 0.1 ); } .oo-ui-labelElement-label { @@ -103,21 +103,21 @@ &-constructive { &:hover { - background-color: rgba(118,171,54,0.05); + background-color: rgba( 118, 171, 54, 0.05 ); } &:active { - background-color: rgba(118,171,54,0.1); + background-color: rgba( 118, 171, 54, 0.1 ); } } &-destructive { &:hover { - background-color: rgba(212,83,83,0.05); + background-color: rgba( 212, 83, 83, 0.05 ); } &:active { - background-color: rgba(212,83,83,0.1); + background-color: rgba( 212, 83, 83, 0.1 ); } } } @@ -133,7 +133,7 @@ .oo-ui-window-body { top: 3.4em; - box-shadow: 0 0 0.33em rgba(0,0,0,0.33); + box-shadow: 0 0 0.33em rgba( 0, 0, 0, 0.33 ); } } @@ -197,21 +197,21 @@ &-primary { .oo-ui-actionWidget { &:hover { - background-color: rgba(0,0,0,0.05); + background-color: rgba( 0, 0, 0, 0.05 ); } &:active { - background-color: rgba(0,0,0,0.1); + background-color: rgba( 0, 0, 0, 0.1 ); } &.oo-ui-flaggedElement { &-progressive { &:hover { - background-color: rgba(8,126,204,0.05); + background-color: rgba( 8, 126, 204, 0.05 ); } &:active { - background-color: rgba(8,126,204,0.1); + background-color: rgba( 8, 126, 204, 0.1 ); } .oo-ui-labelElement-label { @@ -221,21 +221,21 @@ &-constructive { &:hover { - background-color: rgba(118,171,54,0.05); + background-color: rgba( 118, 171, 54, 0.05 ); } &:active { - background-color: rgba(118,171,54,0.1); + background-color: rgba( 118, 171, 54, 0.1 ); } } &-destructive { &:hover { - background-color: rgba(212,83,83,0.05); + background-color: rgba( 212, 83, 83, 0.05 ); } &:active { - background-color: rgba(212,83,83,0.1); + background-color: rgba( 212, 83, 83, 0.1 ); } } } @@ -256,7 +256,7 @@ } &-errors { - background-color: rgba(255,255,255,0.9); + background-color: rgba( 255, 255, 255, 0.9 ); padding: 3em 3em 1.5em 3em; text-align: center; @@ -283,7 +283,7 @@ .theme-oo-ui-windowManager () { &-modal > .oo-ui-dialog { - background-color: rgba(255,255,255,0.5); + background-color: rgba( 255, 255, 255, 0.5 ); opacity: 0; .oo-ui-transition(opacity @medium-ease); @@ -317,6 +317,6 @@ max-height: e( 'calc(100% - 2em)' ); border: 1px solid #ccc; border-radius: 0.5em; - box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3); + box-shadow: 0 0.2em 1em rgba( 0, 0, 0, 0.3 ); } } -- To view, visit https://gerrit.wikimedia.org/r/289319 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: Id7908c1ada0a3dd0de400e917ebb7cde7c761c25 Gerrit-PatchSet: 5 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: VolkerE <volke...@wikimedia.org> Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com> Gerrit-Reviewer: Esanders <esand...@wikimedia.org> Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org> Gerrit-Reviewer: VolkerE <volke...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
