Manually merge (and update) 28954b5e10

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

@@ -137,24 +137,27 @@ textarea {
     margin-bottom: 5px;
 }
 
-input[type="text"]:focus,
-input[type="email"]:focus,
-input[type="search"]:focus,
-input[type="tel"]:focus,
-input[type="url"]:focus,
-input[type="password"]:focus,
-input[type="number"]:focus,
-input[type="date"]:focus,
-input[type="month"]:focus,
-input[type="week"]:focus,
-input[type="time"]:focus,
-input[type="datetime"]:focus,
-input[type="datetime-local"]:focus,
-textarea:focus {
-    border: $brown 1px solid;
-    background: #fff;
-    outline: none;
-    outline-width: 0;
+input[type="text"],
+input[type="email"],
+input[type="search"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+input[type="number"],
+input[type="date"],
+input[type="month"],
+input[type="week"],
+input[type="time"],
+input[type="datetime"],
+input[type="datetime-local"],
+textarea,
+select {
+    &:focus {
+        border: $brown 1px solid;
+        background: #fff;
+        outline: none;
+        outline-width: 0;
+    }
 }
 
 select {
@@ -180,27 +183,17 @@ select {
 
 // Hide the default checkbox
 input[type="checkbox"] {
-    display: none;
+    @include position(absolute, 0 0 0 -9999px);
 }
 
 // Turn the label element into a fake checkbox
 .checkbox {
     position: relative;
-    top: auto;
-    margin-top: 0.5em;
-    display: inline-block;
-    width: 18px;
-    height: 18px;
-    cursor: pointer;
-    border-radius: $rounded;
-    background: lighten($lightbrown, 5%);
-    border: darken($lightbrown, 5%) 1px solid;
-    @include transition(all 0.2s ease);
+    width: auto;
 
     // Create a checkmark, hidden by default
-    &:after {
-        opacity: 0;
-        content: "";
+    &:before {
+        content: '';
         position: absolute;
         width: 10px;
         height: 6px;
@@ -210,15 +203,57 @@ input[type="checkbox"] {
         border-top: none;
         border-right: none;
         @include transform(rotate(-45deg));
+        opacity: 0;
+    }
+
+    // The background for the faux checkbox
+    &:after {
+        content: "";
+        display: inline-block;
+        width: 18px;
+        height: 18px;
+        margin-right: 5px;
+        background: lighten($lightbrown, 5%);
+        border-radius: $rounded;
+        border: darken($lightbrown, 5%) 1px solid;
         @include transition(all 0.2s ease);
     }
+
+    // The paragraph after the .checkbox
+    & + p {
+        display: inline-block;
+        line-height: 28px;
+        position: relative;
+        bottom: -2px;
+    }
 }
 
-// If the checkbox is checked, show the the :after element
-input[type=checkbox]:checked + .checkbox {
-    background: $green;
-    border: lighten($green, 10%);
+// If the checkbox is checked, show :before and :after elements correctly
+input[type='checkbox'] {
+    &:checked + .checkbox {
+        &:after {
+            background: $green;
+            border-color: lighten($green, 10%);
+        }
+    }
+
 }
-input[type=checkbox]:checked + .checkbox:after {
-    opacity: 1;
+input[type='checkbox'] {
+    &:checked + .checkbox:before {
+        opacity: 1;
+    }
+    &:focus {
+        & + .checkbox {
+            &:after {
+                border: $brown 1px solid;
+            }
+        }
+    }
+    &:active {
+        & + .checkbox {
+            &:after {
+                background: $lightbrown;
+            }
+        }
+    }
 }