From: Prateek Saxena <prtksxna@gmail.com>
Date: Wed, 5 Nov 2014 11:49:04 +0000 (+0530)
Subject: mediawiki.ui: checkbox: Fix gap between bevel and border
X-Git-Tag: 1.31.0-rc.0~13349^2
X-Git-Url: http://git.cyclocoop.org/%22%20.%20generer_url_aide%28?a=commitdiff_plain;h=bc2d6ca07161b6f9457d3eeb02f597ebe4903940;p=lhc%2Fweb%2Fwiklou.git

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 35a44cb54b..913f90178b 100644
--- 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;
 				}
 			}
 		}