From: jdlrobson <jdlrobson@gmail.com>
Date: Thu, 14 Aug 2014 20:01:00 +0000 (-0700)
Subject: Tweak checkbox sizes to be relative depending on where used.
X-Git-Tag: 1.31.0-rc.0~13857^2
X-Git-Url: http://git.cyclocoop.org/%28?a=commitdiff_plain;h=95de453dc9f21634dda763481ec44eaa874219e2;p=lhc%2Fweb%2Fwiklou.git

Tweak checkbox sizes to be relative depending on where used.

Use ems rather than pixels.
Add margins

Bug: 70133
Change-Id: Ia6adc4bda000508f14acf4214e778118efa35be0
---

diff --git a/resources/src/mediawiki.less/mediawiki.mixins.less b/resources/src/mediawiki.less/mediawiki.mixins.less
index c360e1f4a0..4a87b74826 100644
--- a/resources/src/mediawiki.less/mediawiki.mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.mixins.less
@@ -14,6 +14,15 @@
 	background-image: e('/* @embed */') url(@url);
 }
 
+.background-size(@width, @height) {
+	// Vendor prefix for certain older opera browsers e.g. nintendo ds
+	-o-background-size: @width @height;
+	// Vendor prefix is added to support Android 2
+	-webkit-background-size: @width @height;
+	background-size: @width @height;
+}
+
+
 .vertical-gradient(@startColor: gray, @endColor: white, @startPos: 0, @endPos: 100%) {
 	background-color: @endColor;
 	background-image: -moz-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Firefox 3.6+
diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less
index e39646bcf6..1997c1b5d1 100644
--- a/resources/src/mediawiki.ui/components/checkbox.less
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -23,7 +23,7 @@
 	vertical-align: middle;
 }
 
-@checkboxSize: 24px;
+@checkboxSize: 1.6em;
 
 // We use the not selector to cancel out styling on IE 8 and below
 .mw-ui-checkbox:not(#noop) {
@@ -46,6 +46,7 @@
 		// the pseudo before element of the label after the checkbox now looks like a checkbox
 		& + label {
 			cursor: pointer;
+			margin: 0 .4em;
 
 			&::before {
 						content: '';
@@ -66,6 +67,7 @@
 			+ label {
 				&::before {
 					.background-image-svg('images/checked.svg', 'images/checked.png');
+					.background-size( @checkboxSize, @checkboxSize );
 					background-repeat: no-repeat;
 					background-position: center top;
 				}