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 c360e1f..4a87b74 100644 (file)
--- 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 e39646b..1997c1b 100644 (file)
--- 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;
                                }