jenkins-bot has submitted this change and it was merged.
Change subject: Improve styles & align components to CSS/Less guidelines
......................................................................
Improve styles & align components to CSS/Less guidelines
Aligning mediawiki.ui components to CSS/Less guidelines by
- harmonizing colors
- harmonizing whitespaces
- putting all variables centralized in variables file
- harmonizing IE version comments
Improving output by
- order properties where appropriate
- making use of CSS properties and color values shorthand
notation where applicable
- changing fixed values with variables where applicable
Change-Id: Iad71a5342462af8e07fe3e625ecb00ac1559ba74
---
M resources/src/mediawiki.less/mediawiki.ui/variables.less
M resources/src/mediawiki.ui/components/anchors.less
M resources/src/mediawiki.ui/components/buttons.less
M resources/src/mediawiki.ui/components/checkbox.less
M resources/src/mediawiki.ui/components/forms.less
M resources/src/mediawiki.ui/components/icons.less
M resources/src/mediawiki.ui/components/inputs.less
M resources/src/mediawiki.ui/components/radio.less
M resources/src/mediawiki.ui/components/text.less
9 files changed, 78 insertions(+), 76 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less
b/resources/src/mediawiki.less/mediawiki.ui/variables.less
index 3b4a403..507109a 100644
--- a/resources/src/mediawiki.less/mediawiki.ui/variables.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less
@@ -72,3 +72,7 @@
// Icon related variables
@iconSize: 1.5em;
@iconGutterWidth: 1em;
+
+// Form input sizes
+@checkboxSize: 2em;
+@radioSize: 2em;
diff --git a/resources/src/mediawiki.ui/components/anchors.less
b/resources/src/mediawiki.ui/components/anchors.less
index f0fb7b9..5bb69b8 100644
--- a/resources/src/mediawiki.ui/components/anchors.less
+++ b/resources/src/mediawiki.ui/components/anchors.less
@@ -11,7 +11,8 @@
color: lighten( @mainColor, @colorLightenPercentage );
}
// Focus and active states
- &:focus, &:active {
+ &:focus,
+ &:active {
color: darken( @mainColor, @colorDarkenPercentage );
outline: none; // outline fix
}
@@ -74,7 +75,8 @@
&:hover {
color: @mainColor;
}
- &:focus, &:active {
+ &:focus,
+ &:active {
color: darken( @mainColor, @colorDarkenPercentage );
}
}
diff --git a/resources/src/mediawiki.ui/components/buttons.less
b/resources/src/mediawiki.ui/components/buttons.less
index 600b771..4ffaeee 100644
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -33,18 +33,18 @@
display: inline-block;
padding: .5em 1em;
margin: 0;
- .box-sizing(border-box);
+ .box-sizing( border-box );
// Disable weird iOS styling
-webkit-appearance: none;
- // IE6/IE7 hack
- // http://stackoverflow.com/a/5838575/365238
+ // IE 6 & 7 hack
+ // https://stackoverflow.com/a/5838575/365238
*display: inline;
zoom: 1;
// Container styling
- .button-colors(#FFF, #CCC, #777);
+ .button-colors( #fff, #ccc, #777 );
border-radius: @borderRadius;
min-width: 4em;
@@ -130,10 +130,10 @@
// Styleguide 2.1.1.
&.mw-ui-progressive,
&.mw-ui-primary {
- .button-colors(@colorProgressive, @colorProgressiveHighlight,
@colorProgressiveActive);
+ .button-colors( @colorProgressive, @colorProgressiveHighlight,
@colorProgressiveActive );
&.mw-ui-quiet {
- .button-colors-quiet(@colorProgressive,
@colorProgressiveHighlight, @colorProgressiveActive);
+ .button-colors-quiet( @colorProgressive,
@colorProgressiveHighlight, @colorProgressiveActive );
}
}
@@ -153,10 +153,10 @@
//
// Styleguide 2.1.2.
&.mw-ui-constructive {
- .button-colors(@colorConstructive, @colorConstructiveHighlight,
@colorConstructiveActive);
+ .button-colors( @colorConstructive,
@colorConstructiveHighlight, @colorConstructiveActive );
&.mw-ui-quiet {
- .button-colors-quiet(@colorConstructive,
@colorConstructiveHighlight, @colorConstructiveActive);
+ .button-colors-quiet( @colorConstructive,
@colorConstructiveHighlight, @colorConstructiveActive );
}
}
@@ -175,10 +175,10 @@
//
// Styleguide 2.1.3.
&.mw-ui-destructive {
- .button-colors(@colorDestructive, @colorDestructiveHighlight,
@colorDestructiveActive);
+ .button-colors( @colorDestructive, @colorDestructiveHighlight,
@colorDestructiveActive );
&.mw-ui-quiet {
- .button-colors-quiet(@colorDestructive,
@colorDestructiveHighlight, @colorDestructiveActive);
+ .button-colors-quiet( @colorDestructive,
@colorDestructiveHighlight, @colorDestructiveActive );
}
}
@@ -213,9 +213,9 @@
// Styleguide 2.1.4.
&.mw-ui-quiet {
background: transparent;
- border: none;
+ border: 0;
text-shadow: none;
- .button-colors-quiet(@colorButtonText,
@colorButtonTextHighlight, @colorButtonTextActive);
+ .button-colors-quiet( @colorButtonText,
@colorButtonTextHighlight, @colorButtonTextActive );
&:hover,
&:focus {
@@ -269,8 +269,8 @@
border-bottom-left-radius: @borderRadius;
}
- &:not(:first-child) {
- border-left: none;
+ &:not( :first-child ) {
+ border-left: 0;
}
&:last-child{
diff --git a/resources/src/mediawiki.ui/components/checkbox.less
b/resources/src/mediawiki.ui/components/checkbox.less
index bd5dd4a..d44e5d7 100644
--- a/resources/src/mediawiki.ui/components/checkbox.less
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -5,8 +5,8 @@
//
// Styling checkboxes in a way that works cross browser is a tricky problem to
solve.
// In MediaWiki UI put a checkbox and label inside a mw-ui-checkbox div.
-// This renders in all browsers except IE6-8 which do not support the :checked
selector;
-// these are kept backwards-compatible using the :not(#noop) selector.
+// This renders in all browsers except IE 6-8 which do not support the
:checked selector;
+// these are kept backwards-compatible using the `:not( #noop )` selector.
// You should give the checkbox and label matching "id" and "for" attributes,
respectively.
//
// Markup:
@@ -33,13 +33,11 @@
vertical-align: middle;
}
-@checkboxSize: 2em;
-
// We use the not selector to cancel out styling on IE 8 and below
-// We also disable this styling on javascript disabled devices. This fixes the
issue with
+// We also disable this styling on JavaScript disabled devices. This fixes the
issue with
// Opera Mini where checking/unchecking doesn't apply styling but potentially
leaves other
// more capable browsers with unstyled checkboxes.
-.client-js .mw-ui-checkbox:not(#noop) {
+.client-js .mw-ui-checkbox:not( #noop ) {
// Position relatively so we can make use of absolute pseudo elements
position: relative;
display: table;
@@ -62,8 +60,7 @@
height: @checkboxSize;
// This is needed for Firefox mobile (See bug 71750 to
workaround default Firefox stylesheet)
max-width: none;
- margin: 0;
- margin-right: 0.4em;
+ margin: 0 0.4em 0 0;
display: table-cell;
& + label {
@@ -73,25 +70,25 @@
// the pseudo before element of the label after the checkbox
now looks like a checkbox
& + label::before {
content: '';
- cursor: pointer;
- .box-sizing(border-box);
- position: absolute;
- left: 0;
- border-radius: @borderRadius;
- width: @checkboxSize;
- height: @checkboxSize;
- line-height: @checkboxSize;
background-color: #fff;
- border: 1px solid @colorGray7;
- // align the checkbox to middle of the text
- top: 50%;
- margin-top: -1em;
- .background-image-svg('images/checked.svg',
'images/checked.png');
- .background-size( @checkboxSize - 0.2em, @checkboxSize
- 0.2em );
- background-repeat: no-repeat;
+ .background-image-svg( 'images/checked.svg',
'images/checked.png' );
background-position: center center;
background-origin: border-box;
+ background-repeat: no-repeat;
+ .background-size( @checkboxSize - 0.2em, @checkboxSize
- 0.2em );
background-size: 0 0;
+ .box-sizing( border-box );
+ position: absolute;
+ // align the checkbox to middle of the text
+ top: 50%;
+ left: 0;
+ width: @checkboxSize;
+ height: @checkboxSize;
+ margin-top: -1em;
+ border: 1px solid @colorGray7;
+ border-radius: @borderRadius;
+ line-height: @checkboxSize;
+ cursor: pointer;
}
// when the input is checked, style the label pseudo before
element that followed as a checked checkbox
@@ -122,7 +119,7 @@
// disabled and checked checkboxes have a white circle
&:disabled:checked + label::before {
- .background-image-svg('images/checked_disabled.svg',
'images/checked_disabled.png');
+ .background-image-svg( 'images/checked_disabled.svg',
'images/checked_disabled.png' );
}
}
}
diff --git a/resources/src/mediawiki.ui/components/forms.less
b/resources/src/mediawiki.ui/components/forms.less
index 6a5fa96..cc96a5c 100644
--- a/resources/src/mediawiki.ui/components/forms.less
+++ b/resources/src/mediawiki.ui/components/forms.less
@@ -36,7 +36,7 @@
//
// Styleguide 5.1.
.mw-ui-vform {
- .box-sizing(border-box);
+ .box-sizing( border-box );
width: @defaultFormWidth;
@@ -44,7 +44,7 @@
select,
.mw-ui-button {
display: block;
- .box-sizing(border-box);
+ .box-sizing( border-box );
margin: 0;
width: 100%;
}
@@ -52,13 +52,13 @@
// Give dropdown lists the same spacing as input fields for consistency.
// Values taken from .agora-field-styling() in mixins/form.less
select {
- padding: 0.35em 0.5em 0.35em 0.5em;
+ padding: 0.35em 0.5em;
vertical-align: middle;
}
> label {
display: block;
- .box-sizing(border-box);
+ .box-sizing( border-box );
.agora-label-styling();
width: auto;
margin: 0 0 0.2em;
@@ -68,7 +68,7 @@
// Override input styling just for checkboxes and radio inputs.
input[type="radio"] {
display: inline;
- .box-sizing(content-box);
+ .box-sizing( content-box );
width: auto;
}
@@ -106,7 +106,7 @@
.errorbox,
.warningbox,
.successbox {
- .box-sizing(border-box);
+ .box-sizing( border-box );
font-size: 0.9em;
margin: 0 0 1em 0;
padding: 0.5em;
@@ -115,7 +115,7 @@
// Colours taken from those for .errorbox in shared.css
.error {
- color: #cc0000;
+ color: @colorErrorText;
border: 1px solid #fac5c5;
background-color: #fae3e3;
text-shadow: 0 1px #fae3e3;
diff --git a/resources/src/mediawiki.ui/components/icons.less
b/resources/src/mediawiki.ui/components/icons.less
index c90a6b9..9b9d324 100644
--- a/resources/src/mediawiki.ui/components/icons.less
+++ b/resources/src/mediawiki.ui/components/icons.less
@@ -2,10 +2,10 @@
@import "mediawiki.ui/variables";
// Mixins
-.mixin-mw-ui-icon-bgimage(@iconSvg, @iconPng) {
+.mixin-mw-ui-icon-bgimage( @iconSvg, @iconPng ) {
&.mw-ui-icon {
&:before {
- .background-image-svg(@iconSvg, @iconPng);
+ .background-image-svg( @iconSvg, @iconPng );
}
}
}
@@ -13,7 +13,7 @@
// Icons
//
// To use icons you must be using a browser that supports pseudo elements.
-// This includes support for IE8.
+// This includes support for IE 8.
// http://caniuse.com/#feat=css-gencontent
//
// For elements that are intended to have both an icon and text, browsers that
@@ -45,6 +45,7 @@
width: @width;
min-width: @width;
max-width: @width;
+
&:before {
left: 0;
right: 0;
@@ -56,10 +57,10 @@
&.mw-ui-icon-before:before,
&.mw-ui-icon-element:before {
background-position: 50% 50%;
- float: left;
- display: block;
background-repeat: no-repeat;
background-size: 100% auto;
+ float: left;
+ display: block;
min-height: @iconSize;
content: '';
}
diff --git a/resources/src/mediawiki.ui/components/inputs.less
b/resources/src/mediawiki.ui/components/inputs.less
index 62f0e83..d0633ae 100644
--- a/resources/src/mediawiki.ui/components/inputs.less
+++ b/resources/src/mediawiki.ui/components/inputs.less
@@ -29,16 +29,16 @@
.mw-ui-input {
// turn off default input styling for input[type="search"] fields
-webkit-appearance: none;
- border: 1px solid @colorFieldBorder;
- .box-sizing(border-box);
- width: 100%;
- padding: .3em .3em .3em .6em;
+ .box-sizing( border-box );
display: block;
- vertical-align: middle;
+ width: 100%;
+ border: 1px solid @colorFieldBorder;
border-radius: @borderRadius;
+ padding: 0.3em 0.3em 0.3em 0.6em;
font-family: inherit;
font-size: inherit;
line-height: inherit;
+ vertical-align: middle;
// Placeholder text styling must be set individually for each browser
@winter
&::-webkit-input-placeholder { // webkit
diff --git a/resources/src/mediawiki.ui/components/radio.less
b/resources/src/mediawiki.ui/components/radio.less
index 52effd6..448390a 100644
--- a/resources/src/mediawiki.ui/components/radio.less
+++ b/resources/src/mediawiki.ui/components/radio.less
@@ -5,8 +5,8 @@
//
// Styling radios in a way that works cross browser is a tricky problem to
solve.
// In MediaWiki UI put a radio and label inside a mw-ui-radio div.
-// This renders in all browsers except IE6-8 which do not support the :checked
selector;
-// these are kept backwards-compatible using the :not(#noop) selector.
+// This renders in all browsers except IE 6-8 which do not support the
:checked selector;
+// these are kept backwards-compatible using the `:not( #noop )` selector.
// You should give the radio and label matching "id" and "for" attributes,
respectively.
//
// Markup:
@@ -33,13 +33,11 @@
vertical-align: middle;
}
-@radioSize: 2em;
-
// We use the not selector to cancel out styling on IE 8 and below.
-// We also disable this styling on javascript disabled devices. This fixes the
issue with
+// We also disable this styling on JavaScript disabled devices. This fixes the
issue with
// Opera Mini where checking/unchecking doesn't apply styling but potentially
leaves other
// more capable browsers with unstyled radio buttons.
-.client-js .mw-ui-radio:not(#noop) {
+.client-js .mw-ui-radio:not( #noop ) {
// Position relatively so we can make use of absolute pseudo elements
position: relative;
line-height: @radioSize;
@@ -64,21 +62,21 @@
// the pseudo before element of the label after the radio now
looks like a radio
& + label::before {
content: '';
- cursor: pointer;
- .box-sizing(border-box);
+ background-color: #fff;
+ .background-image-svg( 'images/radio_checked.svg',
'images/radio_checked.png' );
+ background-origin: border-box;
+ background-position: center center;
+ background-repeat: no-repeat;
+ .background-size( @radioSize, @radioSize );
+ background-size: 0 0;
+ .box-sizing( border-box );
position: absolute;
left: 0;
- border-radius: 100%;
width: @radioSize;
height: @radioSize;
- background-color: #fff;
border: 1px solid @colorGray7;
- .background-image-svg('images/radio_checked.svg',
'images/radio_checked.png');
- .background-size( @radioSize, @radioSize );
- background-repeat: no-repeat;
- background-position: center center;
- background-origin: border-box;
- background-size: 0 0;
+ border-radius: 100%;
+ cursor: pointer;
}
// when the input is checked, style the label pseudo before
element that followed as a checked radio
@@ -102,14 +100,14 @@
// disabled radios have a gray background
&:disabled + label::before {
- cursor: default;
background-color: @colorGray14;
border-color: @colorGray14;
+ cursor: default;
}
// disabled and checked radios have a white circle
&:disabled:checked + label::before {
- .background-image-svg('images/radio_disabled.svg',
'images/radio_disabled.png');
+ .background-image-svg( 'images/radio_disabled.svg',
'images/radio_disabled.png' );
}
}
}
diff --git a/resources/src/mediawiki.ui/components/text.less
b/resources/src/mediawiki.ui/components/text.less
index 500d42c..cc27e9e 100644
--- a/resources/src/mediawiki.ui/components/text.less
+++ b/resources/src/mediawiki.ui/components/text.less
@@ -26,7 +26,7 @@
*/
.mw-ui-text {
- // The selector order is like this on purpose; IE6 ignores the second
selector,
+ // The selector order is like this on purpose; IE 6 ignores the second
selector,
// so we don't want to accidentally apply this color on all
mw-ui-CONTEXT classes
.mw-ui-progressive& {
color: @colorProgressive;
--
To view, visit https://gerrit.wikimedia.org/r/261099
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Iad71a5342462af8e07fe3e625ecb00ac1559ba74
Gerrit-PatchSet: 8
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Edokter <[email protected]>
Gerrit-Reviewer: Jack Phoenix <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Krinkle <[email protected]>
Gerrit-Reviewer: VolkerE <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
