mediawiki.ui: checkbox: Remove unnecessary nesting and group variables

Change-Id: I4caeaf52d5c38391d88f4e6218d9f3ee26346981

diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less
index 913f901..0735a80 100644 (file)
--- 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;
                }
        }
 }