From: Bartosz Dziewoński <matma.rex@gmail.com>
Date: Wed, 26 Nov 2014 23:30:19 +0000 (+0100)
Subject: mediawiki.ui: Synchronise checkbox and radio code
X-Git-Tag: 1.31.0-rc.0~13147^2
X-Git-Url: https://git.heureux-cyclage.org/?p=lhc%2Fweb%2Fwiklou.git;a=commitdiff_plain;h=a487177ab7ae584428fb1ed72f9d6d846ac585ef

mediawiki.ui: Synchronise checkbox and radio code

Get rid of tiny meaningless differences.

Change-Id: I78b3bf378bae1fce11b6ef4f85f7449421211721
---

diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less
index b479020913..67f8a21377 100644
--- a/resources/src/mediawiki.ui/components/checkbox.less
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -11,16 +11,20 @@
 //
 // Markup:
 // <div class="mw-ui-checkbox">
-//   <input type="checkbox" id="kss-example-5"><label for="kss-example-5">Standard checkbox</label>
+//   <input type="checkbox" id="kss-example-5">
+//   <label for="kss-example-5">Standard checkbox</label>
 // </div>
 // <div class="mw-ui-checkbox">
-//   <input type="checkbox" id="kss-example-5-checked" checked><label for="kss-example-5-checked">Standard checked checkbox</label>
+//   <input type="checkbox" id="kss-example-5-checked" checked>
+//   <label for="kss-example-5-checked">Standard checked checkbox</label>
 // </div>
 // <div class="mw-ui-checkbox">
-//   <input type="checkbox" id="kss-example-5-disabled" disabled><label for="kss-example-5-disabled">Disabled checkbox</label>
+//   <input type="checkbox" id="kss-example-5-disabled" disabled>
+//   <label for="kss-example-5-disabled">Disabled checkbox</label>
 // </div>
 // <div class="mw-ui-checkbox">
-//   <input type="checkbox" id="kss-example-5-disabled-checked" disabled checked><label for="kss-example-5-disabled-checked">Disabled checked checkbox</label>
+//   <input type="checkbox" id="kss-example-5-disabled-checked" disabled checked>
+//   <label for="kss-example-5-disabled-checked">Disabled checked checkbox</label>
 // </div>
 //
 // Styleguide 5.
@@ -52,12 +56,13 @@
 		height: @checkboxSize;
 		// This is needed for Firefox mobile (See bug 71750 to workaround default Firefox stylesheet)
 		max-width: none;
-		margin-right: .4em;
+		margin-right: 0.4em;
 
 		// the pseudo before element of the label after the checkbox now looks like a checkbox
 		& + label::before {
 			content: '';
 			cursor: pointer;
+			.box-sizing(border-box);
 			position: absolute;
 			left: 0;
 			border-radius: @borderRadius;
@@ -65,7 +70,6 @@
 			height: @checkboxSize;
 			background-color: #fff;
 			border: 1px solid @colorGray7;
-			.box-sizing(border-box);
 		}
 
 		// when the input is checked, style the label pseudo before element that followed as a checked checkbox
@@ -86,6 +90,7 @@
 			border-width: 2px;
 		}
 
+		&:focus:hover + label::before,
 		&:hover + label::before {
 			border-bottom-width: 3px;
 		}
diff --git a/resources/src/mediawiki.ui/components/radio.less b/resources/src/mediawiki.ui/components/radio.less
index 6d8978e3e6..3bbbb28c1e 100644
--- a/resources/src/mediawiki.ui/components/radio.less
+++ b/resources/src/mediawiki.ui/components/radio.less
@@ -42,6 +42,7 @@
 	line-height: @radioSize;
 
 	* {
+		// reset font sizes (see bug 72727)
 		font: inherit;
 		vertical-align: middle;
 	}
@@ -59,8 +60,8 @@
 
 		// the pseudo before element of the label after the radio now looks like a radio
 		& + label::before {
-			cursor: pointer;
 			content: '';
+			cursor: pointer;
 			.box-sizing(border-box);
 			position: absolute;
 			left: 0;
@@ -80,6 +81,11 @@
 			background-origin: border-box;
 		}
 
+		&:active + label::before {
+			background-color: @colorGray13;
+			border-color: @colorGray13;
+		}
+
 		&:focus + label::before {
 			border-width: 2px;
 		}
@@ -89,19 +95,14 @@
 			border-bottom-width: 3px;
 		}
 
-		&:active + label::before {
-			background-color: @colorGray13;
-			border-color: @colorGray13;
-		}
-
-		// disabled checked boxes have a gray background
+		// disabled radios have a gray background
 		&:disabled + label::before {
 			cursor: default;
-			border-color: @colorGray14;
 			background-color: @colorGray14;
+			border-color: @colorGray14;
 		}
 
-		// disabled and checked boxes have a white circle
+		// disabled and checked radios have a white circle
 		&:disabled:checked + label::before {
 			.background-image-svg('images/radio_disabled.svg', 'images/radio_disabled.png');
 		}