mediawiki.ui: checkbox: Fix gap between bevel and border

Use an inset box-shadow instead of adding another pseudo
element. This removes the gap and also keeps the look
consistent on different zoom levels.

Change-Id: Ibf75a09ef9955a5d1cb9d80bff2cce001b60d7c6

diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less
index 35a44cb..913f901 100644 (file)
--- a/resources/src/mediawiki.ui/components/checkbox.less
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -84,14 +84,8 @@
                &:active,
                &:focus {
                        + label {
-                               &::after {
-                                       content: '';
-                                       position: absolute;
-                                       width: @checkboxSize;
-                                       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;
+                               &::before {
+                                       box-shadow: inset 0 -@focusBottomBorderSize 0 0 lightgrey;
                                }
                        }
                }