From: Bartosz Dziewoński <matma.rex@gmail.com>
Date: Tue, 23 Dec 2014 20:50:03 +0000 (+0100)
Subject: mediawiki.ui: checkbox: Correct alignment of long labels
X-Git-Tag: 1.31.0-rc.0~12638^2
X-Git-Url: http://git.cyclocoop.org/ecrire?a=commitdiff_plain;h=5a9350483313cd7ade79a725ab3e71c86b2c0f21;p=lhc%2Fweb%2Fwiklou.git

mediawiki.ui: checkbox: Correct alignment of long labels

Use display: table-cell; to display the checkbox and the label
side-by-side. I am honestly surprised that this works here. Not sure
if it's a good idea to use… although we successfully did it for
OOjs UI in 2498265b, but we have more control over everything there.

Bug: T85241
Change-Id: I381d05360ad3e7ab153f56772fffb650dab5cda9
---

diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less
index 089504a399..4829f5f6b5 100644
--- a/resources/src/mediawiki.ui/components/checkbox.less
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -42,7 +42,7 @@
 .client-js .mw-ui-checkbox:not(#noop) {
 	// Position relatively so we can make use of absolute pseudo elements
 	position: relative;
-	line-height: @checkboxSize;
+	display: table;
 
 	* {
 		// reset font sizes (see bug 72727)
@@ -61,6 +61,11 @@
 		max-width: none;
 		margin: 0;
 		margin-right: 0.4em;
+		display: table-cell;
+
+		& + label {
+			display: table-cell;
+		}
 
 		// the pseudo before element of the label after the checkbox now looks like a checkbox
 		& + label::before {
@@ -73,8 +78,12 @@
 			border-radius: @borderRadius;
 			width: @checkboxSize;
 			height: @checkboxSize;
+			line-height: @checkboxSize;
 			background-color: #fff;
 			border: 1px solid @colorGray7;
+			// align the checkbox to middle of the text
+			top: 50%;
+			margin-top: -1em;
 			.background-image-svg('images/checked.svg', 'images/checked.png');
 			.background-size( @checkboxSize - 0.2em, @checkboxSize - 0.2em );
 			background-repeat: no-repeat;