From 8a7870e59c9d528f4e4dd465c2c687b93e7a8b38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20Checa?= <mariajecheca@gmail.com>
Date: Thu, 28 Jan 2016 19:05:42 +0100
Subject: [PATCH] Checkbox optimization for Firefox

---
 src/scss/cdb-components/forms/checkbox.scss | 40 +++++++++++++++------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss
index f8b7f06..c4f0aeb 100644
--- a/src/scss/cdb-components/forms/checkbox.scss
+++ b/src/scss/cdb-components/forms/checkbox.scss
@@ -5,9 +5,18 @@
 # Forms/Checkbox
 
 ```
-<input type="checkbox" name="vehicle" value="Bike" class="CDB-Checkbox" checked>
-<input type="checkbox" name="vehicle" value="Bus" class="CDB-Checkbox">
-<input type="checkbox" name="vehicle" value="Car" class="CDB-Checkbox" disabled>
+<div class="CDB-Checkbox">
+  <input type="checkbox" name="vehicle" value="Bike" checked>
+  <label></label>
+</div>
+<div class="CDB-Checkbox">
+  <input type="checkbox" name="vehicle" value="Bus">
+  <label></label>
+</div>
+<div class="CDB-Checkbox">
+  <input type="checkbox" name="vehicle" value="Car" disabled>
+  <label></label>
+</div>
 ```
 */
 
@@ -20,9 +29,18 @@
   height: $baseSize * 2;
   border: 1px solid $cMainLine;
   border-radius: 3px;
+  box-sizing: border-box;
+  display: inline-block;
 
-  &::before,
-  &::after {
+  input[type="checkbox"] {
+    opacity: 0;
+    z-index: -1;
+    width: $baseSize * 2;
+    height: $baseSize * 2;
+  }
+
+  input[type="checkbox"] ~ label::before,
+  input[type="checkbox"] ~ label::after {
     display: block;
     position: absolute;
     bottom: 3px;
@@ -32,13 +50,13 @@
     content: '';
   }
 
-  &::before {
+  input[type="checkbox"] ~ label::before {
     right: $baseSize / 2;
     height: $baseSize;
     transform: rotate(45deg);
   }
 
-  &::after {
+  input[type="checkbox"] ~ label::after {
     left: $baseSize / 2;
     height: $baseSize - 2;
     transform: rotate(-45deg);
@@ -52,8 +70,8 @@
       border: 1px solid $cBlue;
     }
 
-    &::before,
-    &::after {
+    input[type="checkbox"] ~ label::before,
+    input[type="checkbox"] ~ label::after {
       background: $cWhite;
     }
   }
@@ -74,8 +92,8 @@
       border: 1px solid $cSecondaryLine;
     }
 
-    &::before,
-    &::after {
+    input[type="checkbox"] ~ label::before,
+    input[type="checkbox"] ~ label::after {
       background: $cWhite;
     }
   }