Use ems instead of pixels for checkbox

Mixing pixels and ems results in a negative height, which is invalid.
Use ems instead of pixels for @focusBottomBorderSize.

Follow up: Ia6adc4bda000508f14acf4214e778118efa35be0

Bug: 71506
Change-Id: Ia619916a172a501365e0104e9927c7fae9de8a3f

diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less
index 1997c1b..826c82f 100644 (file)
--- a/resources/src/mediawiki.ui/components/checkbox.less
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -74,7 +74,7 @@
                        }
                }
 
-               @focusBottomBorderSize: 3px;
+               @focusBottomBorderSize: 0.2em;
                &:active,
                &:focus {
                        + label {
@@ -82,7 +82,7 @@
                                        content: '';
                                        position: absolute;
                                        width: @checkboxSize;
-                                       height: @checkboxSize - @focusBottomBorderSize + 1; // offset by bottom border
+                                       height: @checkboxSize - @focusBottomBorderSize + 0.08; // offset by bottom border
                                        // offset from the checkbox by 1px to account for left border
                                        left: 1px;
                                        border-bottom: solid @focusBottomBorderSize lightgrey;