From 84a3220042ecf12f0ddc6ed6fd7483cab468fcb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andrej=20Mlinarevi=C4=87?= <andrej@mono.hr>
Date: Tue, 27 May 2014 15:45:00 +0200
Subject: [PATCH] Fix checkboxes accessibility

Fix checkbox baseline
---
 core/client/assets/sass/modules/forms.scss | 111 +++++++++++++--------
 1 file changed, 67 insertions(+), 44 deletions(-)

diff --git a/core/client/assets/sass/modules/forms.scss b/core/client/assets/sass/modules/forms.scss
index 4dcbaef4c9..6700c5d639 100644
--- a/core/client/assets/sass/modules/forms.scss
+++ b/core/client/assets/sass/modules/forms.scss
@@ -2,7 +2,7 @@
 // Forms
 // --------------------------------------------------
 
-.label {
+.label { 
    display: inline-block;
    position: absolute;
    top: 0.5em;
@@ -84,24 +84,27 @@ input, select, 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 {
@@ -133,43 +136,63 @@ select {
    Checkboxes
    ============================================================================= */
 
-// Hide the default checkbox
+// Hide the default checkbox using absolute positioning to retain the focusability of the checkbox
 input[type="checkbox"] {
-    display: none;
+    @include position(absolute, 0 0 0 -9999px);
 }
 
 // Turn the label element into a fake checkbox
 .checkbox {
     @include box-sizing(border-box);
     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: "";
-        position: absolute;
-        width: 7px;
-        height: 3px;
-        top: 5px;
-        left: 4px;
-        border: 3px solid #fff;
-        border-top: none;
-        border-right: none;
-        @include transform(rotate(-45deg));
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        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;
+    }
 }
 
 // If the checkbox is checked, show the the :after element
-input[type=checkbox]:checked + .checkbox { background: $green; border: lighten($green, 10%); }
-input[type=checkbox]:checked + .checkbox:after { opacity: 1; }
\ No newline at end of file
+input[type=checkbox] {
+    &:checked + .checkbox {
+        &:after {
+            background: $green;
+            border-color: lighten($green, 10%);
+        }
+    }
+   
+}
+input[type=checkbox] {
+    &:checked + .checkbox:after {
+        opacity: 1;
+    }
+    &:focus {
+        & + .checkbox {
+            &:after {
+                border: $brown 1px solid;
+            }
+        }
+    }
+    &:active {
+        & + .checkbox {
+            &:after {
+                background: $lightbrown;
+            }
+        }
+    }
+}
\ No newline at end of file