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

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;

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 @@ Styleguide 6.2.1.
 	&:hover {
 		color: @mainColor;
 	}
-	&:focus, &:active {
+	&:focus,
+	&:active {
 		color: darken( @mainColor, @colorDarkenPercentage );
 	}
 }

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
+	// IE 6 & 7 hack
-	// http://stackoverflow.com/a/5838575/365238
+	// 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 @@ a.mw-ui-button {
 		border-bottom-left-radius: @borderRadius;
 	}
 
-	&:not(:first-child) {
+	&:not( :first-child ) {
-		border-left: none;
+		border-left: 0;
 	}
 
 	&:last-child{

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;
+// 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.
+// 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: 0 0.4em 0 0;
-		margin-right: 0.4em;
 		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;
+			.background-image-svg( 'images/checked.svg', 'images/checked.png' );
-			// 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-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' );
 		}
 	}
 }

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;

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: '';
 	}

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 );
-	.box-sizing(border-box);
-	width: 100%;
-	padding: .3em .3em .3em .6em;
 	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

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;
+// 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.
+// 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;
+			background-color: #fff;
-			.box-sizing(border-box);
+			.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');
+			border-radius: 100%;
-			.background-size( @radioSize, @radioSize );
+			cursor: pointer;
-			background-repeat: no-repeat;
-			background-position: center center;
-			background-origin: border-box;
-			background-size: 0 0;
 		}
 
 		// 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' );
 		}
 	}
 }

resources/src/mediawiki.ui/components/text.less

@@ -26,7 +26,7 @@ Styleguide 6.1.
 */
 
 .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;