From eba0af51fa99206dc47db0ace9a9b050c39f46fe Mon Sep 17 00:00:00 2001
From: Prateek Saxena <prtksxna@gmail.com>
Date: Wed, 5 Nov 2014 17:32:52 +0530
Subject: [PATCH] mediawiki.ui: checkbox: Remove unnecessary nesting and group
 variables

Change-Id: I4caeaf52d5c38391d88f4e6218d9f3ee26346981
---
 .../src/mediawiki.ui/components/checkbox.less | 54 +++++++------------
 1 file changed, 20 insertions(+), 34 deletions(-)

diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less
index 913f90178b..0735a80df4 100644
--- a/resources/src/mediawiki.ui/components/checkbox.less
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -30,6 +30,7 @@
 }
 
 @checkboxSize: 1.6em;
+@focusBottomBorderSize: 0.2em;
 
 // We use the not selector to cancel out styling on IE 8 and below
 .mw-ui-checkbox:not(#noop) {
@@ -53,50 +54,35 @@
 		margin-right: .4em;
 
 		// the pseudo before element of the label after the checkbox now looks like a checkbox
-		& + label {
+		& + label::before {
+			content: '';
 			cursor: pointer;
-
-			&::before {
-				content: '';
-				position: absolute;
-				left: 0;
-				border-radius: @borderRadius;
-				width: @checkboxSize;
-				height: @checkboxSize;
-				background-color: #fff;
-				border: 1px solid grey;
-			}
+			position: absolute;
+			left: 0;
+			border-radius: @borderRadius;
+			width: @checkboxSize;
+			height: @checkboxSize;
+			background-color: #fff;
+			border: 1px solid grey;
 		}
 
 		// when the input is checked, style the label pseudo before element that followed as a checked checkbox
-		&:checked {
-			+ label {
-				&::before {
-					.background-image-svg('images/checked.svg', 'images/checked.png');
-					.background-size( @checkboxSize, @checkboxSize );
-					background-repeat: no-repeat;
-					background-position: center top;
-				}
-			}
+		&:checked + label::before {
+			.background-image-svg('images/checked.svg', 'images/checked.png');
+			.background-size( @checkboxSize, @checkboxSize );
+			background-repeat: no-repeat;
+			background-position: center top;
 		}
 
-		@focusBottomBorderSize: 0.2em;
-		&:active,
-		&:focus {
-			+ label {
-				&::before {
-					box-shadow: inset 0 -@focusBottomBorderSize 0 0 lightgrey;
-				}
-			}
+		&:active + label::before,
+		&:focus + label::before {
+			box-shadow: inset 0 -@focusBottomBorderSize 0 0 lightgrey;
 		}
 
 		// disabled checked boxes have a gray background
-		&:disabled + label {
+		&:disabled + label::before {
 			cursor: default;
-
-			&::before {
-				background-color: lightgrey;
-			}
+			background-color: lightgrey;
 		}
 	}
 }
-- 
2.20.1