VolkerE has uploaded a new change for review.
https://gerrit.wikimedia.org/r/261099
Change subject: Improve & align components to CSS/Less guidelines
......................................................................
Improve & 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
Improving output by
- order properties where appropriate
- removing leading `0` from subdecimal values
- making use of 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
8 files changed, 61 insertions(+), 59 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/99/261099/1
diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less
b/resources/src/mediawiki.less/mediawiki.ui/variables.less
index 4b6bb48..253e92a 100644
--- a/resources/src/mediawiki.less/mediawiki.ui/variables.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less
@@ -73,3 +73,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..37d9dd6 100644
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -33,7 +33,7 @@
display: inline-block;
padding: .5em 1em;
margin: 0;
- .box-sizing(border-box);
+ .box-sizing( border-box );
// Disable weird iOS styling
-webkit-appearance: none;
@@ -44,7 +44,7 @@
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 {
@@ -270,7 +270,7 @@
}
&:not(:first-child) {
- border-left: none;
+ 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..8466339 100644
--- a/resources/src/mediawiki.ui/components/checkbox.less
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -33,10 +33,8 @@
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) {
@@ -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 .4em 0 0;
display: table-cell;
& + label {
@@ -74,7 +71,7 @@
& + label::before {
content: '';
cursor: pointer;
- .box-sizing(border-box);
+ .box-sizing( border-box );
position: absolute;
left: 0;
border-radius: @borderRadius;
@@ -86,8 +83,8 @@
// 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-image-svg( 'images/checked.svg',
'images/checked.png' );
+ .background-size( @checkboxSize - .2em, @checkboxSize -
.2em );
background-repeat: no-repeat;
background-position: center center;
background-origin: border-box;
@@ -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 dc49e20..f11c4ee 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,23 +52,23 @@
// 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: .35em .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;
+ margin: 0 0 .2em;
padding: 0;
}
// Override input styling just for checkboxes and radio inputs.
input[type="radio"] {
display: inline;
- .box-sizing(content-box);
+ .box-sizing( content-box );
width: auto;
}
@@ -107,16 +107,16 @@
.errorbox,
.warningbox,
.successbox {
- .box-sizing(border-box);
- font-size: 0.9em;
+ .box-sizing( border-box );
+ font-size: .9em;
margin: 0 0 1em 0;
- padding: 0.5em;
+ padding: .5em;
word-wrap: break-word;
}
// 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 d9e8c42..55b8079 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 );
}
}
}
@@ -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..1a04535 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: .3em .3em .3em .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..6199c49 100644
--- a/resources/src/mediawiki.ui/components/radio.less
+++ b/resources/src/mediawiki.ui/components/radio.less
@@ -33,10 +33,8 @@
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) {
@@ -59,26 +57,26 @@
height: @radioSize;
// This is needed for Firefox mobile (See bug 71750 to
workaround default Firefox stylesheet)
max-width: none;
- margin-right: 0.4em;
+ margin-right: .4em;
// the pseudo before element of the label after the radio now
looks like a radio
& + label::before {
- content: '';
- cursor: pointer;
- .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-image-svg( 'images/radio_checked.svg',
'images/radio_checked.png' );
+ .background-size( @radioSize, @radioSize ); //todo
background-repeat: no-repeat;
background-position: center center;
background-origin: border-box;
background-size: 0 0;
+ content: '';
+ .box-sizing( border-box );
+ position: absolute;
+ left: 0;
+ width: @radioSize;
+ height: @radioSize;
+ background-color: #fff;
+ border: 1px solid @colorGray7;
+ 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' );
}
}
}
--
To view, visit https://gerrit.wikimedia.org/r/261099
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Iad71a5342462af8e07fe3e625ecb00ac1559ba74
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
