Correct styling of checkboxes in the post settings menu

core/client/assets/sass/modules/dropdowns.scss

@@ -5,6 +5,7 @@
  *
  * Dropdowns
  * Menu
+ * Menu Positioning Options
  * Post Settings
  */
 
@@ -23,7 +24,8 @@
         color: $darkgrey;
         @include icon-after($i-chevron-down, 8px);
     }
-}
+
+} // .dropdown
 
 
  /* ==========================================================================
@@ -58,7 +60,7 @@
         border-color: $darkgrey transparent;
         display: block;
         width: 0;
-    }
+    } // &:before
 
     // Stop :hover shadow from overflowing
     li {
@@ -78,7 +80,7 @@
             background: $blue;
             box-shadow: rgba(255,255,255,0.2) 0 1px 0 inset;
         }
-    }
+    } // a, p
 
     // Add a check mark to the currently active menu item
     .active a {
@@ -89,7 +91,14 @@
         }
     }
 
-}
+} // .menu
+
+
+/* ==========================================================================
+   Menu Positioning Options
+   ---
+   Combine above classes into one usable class
+   ========================================================================== */
 
 // This extend moves the chiclet to the top, for menus which drop down.
 .menu-drop {
@@ -137,6 +146,8 @@
 
 /* ==========================================================================
    Post Settings
+   ---
+   There classes are used on conjunction with the above classes
    ========================================================================== */
 
 .post-settings {
@@ -153,7 +164,7 @@
     &.active {
         color: $darkgrey;
     }
-}
+} // .post-settings
 
 .post-settings-menu {
     padding-top: 0;
@@ -203,7 +214,7 @@
                 border: none;
             }
         }
-    }
+    } // input
 
     .post-setting-item {
         padding: 5px 0 0 10px;
@@ -212,10 +223,24 @@
     .checkbox {
         position: relative;
         margin-top: 0;
-        width: 18px;
+        top: 0; // Resets a global `form label` style
-        border: lighten($grey, 10%) 1px solid;
+        border: 0;
+        &:after {
+            border-color: lighten($grey, 10%);
             background: $grey;
         }
+    } // .checkbox
+
+    // Colour the checkbox border correctly for a dark background
+    input[type='checkbox'] {
+        &:focus {
+            & + .checkbox {
+                &:after {
+                    border-color: lighten($grey, 10%);
+                }
+            }
+        }
+    } // input[type='checkbox']
 
     .delete {
         display: block;
@@ -227,6 +252,9 @@
             margin-right: 10px
         };
 
-        &:hover { background: $red; }
+        &:hover {
+            background: $red;
         }
-}
+    } // .delete
+
+} // .post-settings-menu

core/client/assets/sass/modules/forms.scss

@@ -191,7 +191,7 @@ input[type="checkbox"] {
     position: relative;
     width: auto;
 
-    // Create a checkmark, hidden by default
+    // Create a tick, hidden by default
     &:before {
         content: '';
         position: absolute;
@@ -208,7 +208,7 @@ input[type="checkbox"] {
 
     // The background for the faux checkbox
     &:after {
-        content: "";
+        content: '';
         display: inline-block;
         width: 18px;
         height: 18px;
@@ -228,7 +228,7 @@ input[type="checkbox"] {
     }
 }
 
-// If the checkbox is checked, show :before and :after elements correctly
+// Colour the checkbox correctly when checked
 input[type='checkbox'] {
     &:checked + .checkbox {
         &:after {
@@ -236,24 +236,29 @@ input[type='checkbox'] {
             border-color: lighten($green, 10%);
         }
     }
-
 }
+
 input[type='checkbox'] {
+
+    // When checkbox is checked, show the tick
     &:checked + .checkbox:before {
         opacity: 1;
     }
+
     &:focus {
         & + .checkbox {
             &:after {
                 border: $brown 1px solid;
             }
         }
-    }
+    } // &:focus
+
     &:active {
         & + .checkbox {
             &:after {
                 background: $lightbrown;
             }
         }
-    }
+    } // &:active
-}
+
+} // input[type='checkbox']