From e365455833a02a8d53cc9086d46d52fe9fa60f90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20Checa?= <mariajecheca@gmail.com>
Date: Fri, 29 Jan 2016 16:52:58 +0100
Subject: [PATCH] Checkbox, radio & legends fully optimized for Firefox

---
 src/scss/cdb-components/forms/checkbox.scss | 112 +++++++++---------
 src/scss/cdb-components/forms/legends.scss  |  50 ++++----
 src/scss/cdb-components/forms/radio.scss    | 120 ++++++++++----------
 3 files changed, 141 insertions(+), 141 deletions(-)

diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss
index 4789bd5..9278f47 100644
--- a/src/scss/cdb-components/forms/checkbox.scss
+++ b/src/scss/cdb-components/forms/checkbox.scss
@@ -5,16 +5,19 @@
 # Forms/Checkbox
 
 ```
-<div class="u-iBlock CDB-CheckboxContainer">
+<div class="u-iBlock">
   <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked>
+  <span class="u-iBlock CDB-CheckboxFace"></span>
   <label class="CDB-CheckboxLabel"></label>
 </div>
-<div class="u-iBlock CDB-CheckboxContainer">
+<div class="u-iBlock">
   <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bus">
+  <span class="u-iBlock CDB-CheckboxFace"></span>
   <label class="CDB-CheckboxLabel"></label>
 </div>
-<div class="u-iBlock CDB-CheckboxContainer">
+<div class="u-iBlock">
   <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Car" disabled>
+  <span class="u-iBlock CDB-CheckboxFace"></span>
   <label class="CDB-CheckboxLabel"></label>
 </div>
 ```
@@ -23,64 +26,19 @@
 @import '../../cdb-variables/sizes';
 @import '../../cdb-variables/colors';
 
-.CDB-CheckboxContainer {
+.CDB-Checkbox {
+  width: $baseSize * 2;
+  height: $baseSize * 2;
+  opacity: 0;
+  position: absolute;
+  z-index: 1;
+
+  ~ .CDB-CheckboxFace {
     position: relative;
     width: $baseSize * 2;
     height: $baseSize * 2;
-
-  .CDB-Checkbox {
-    width: $baseSize * 2;
-    height: $baseSize * 2;
-    opacity: 0;
-    position: absolute;
-    z-index: 1;
-
-    &:checked {
-      ~ .CDB-CheckboxLabel {
-        border: 1px solid $cBlue;
-        background: $cBlue;
-
-        &::before,
-        &::after {
-          background: $cWhite;
-        }
-      }
-
-      &:hover ~ .CDB-CheckboxLabel {
-        border: 1px solid $cBlue;
-      }
-    }
-
-    &:focus ~ .CDB-CheckboxLabel {
-      border: 1px solid $cBlue;
-    }
-
-    &:hover ~ .CDB-CheckboxLabel {
-      border: 1px solid $cHoverLine;
-    }
-
-    &:disabled {
-      ~ .CDB-CheckboxLabel {
-        border: 1px solid $cSecondaryLine;
-        background: $cThirdBackground;
-
-        &::before,
-        &::after {
-          background: $cWhite;
-        }
-      }
-
-      &:hover ~ .CDB-CheckboxLabel {
-        border: 1px solid $cSecondaryLine;
-      }
-    }
-  }
-
-  .CDB-CheckboxLabel {
-    position: absolute;
-    width: $baseSize * 2;
-    height: $baseSize * 2;
     border: 1px solid $cMainLine;
+    background: $cWhite;
     border-radius: 3px;
     box-sizing: border-box;
     cursor: pointer;
@@ -108,4 +66,44 @@
       transform: rotate(-45deg);
     }
   }
+
+  &:checked {
+    ~ .CDB-CheckboxFace {
+      border: 1px solid $cBlue;
+      background: $cBlue;
+
+      &::before,
+      &::after {
+        background: $cWhite;
+      }
+    }
+
+    &:hover ~ .CDB-CheckboxFace {
+      border: 1px solid $cBlue;
+    }
+  }
+
+  &:focus ~ .CDB-CheckboxFace {
+    border: 1px solid $cBlue;
+  }
+
+  &:hover ~ .CDB-CheckboxFace {
+    border: 1px solid $cHoverLine;
+  }
+
+  &:disabled {
+    ~ .CDB-CheckboxFace {
+      border: 1px solid $cSecondaryLine;
+      background: $cThirdBackground;
+
+      &::before,
+      &::after {
+        background: $cWhite;
+      }
+    }
+
+    &:hover ~ .CDB-CheckboxFace {
+      border: 1px solid $cSecondaryLine;
+    }
+  }
 }
diff --git a/src/scss/cdb-components/forms/legends.scss b/src/scss/cdb-components/forms/legends.scss
index 2b918e4..f90372b 100644
--- a/src/scss/cdb-components/forms/legends.scss
+++ b/src/scss/cdb-components/forms/legends.scss
@@ -5,26 +5,30 @@
 # Forms/Labels
 
 ```
-<label class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
-  <input class="CDB-Radio u-iBlock u-rSpace--s" type="radio" name="True" value="01" checked>
-  <span class="u-iBlock">True</span>
-</label>
-<label class="u-iblock CDB-Text CDB-Size-medium">
-  <input class="CDB-Radio u-iBlock u-rSpace--s" type="radio" name="True" value="02" checked>
-  <span class="u-iBlock">False</span>
-</label>
+<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
+  <input class="CDB-Radio" type="radio" name="veritas" value="01">
+  <span class="u-iBlock CDB-RadioFace"></span>
+  <label class="u-iBlock">True</label>
+</div>
+<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
+  <input class="CDB-Radio" type="radio" name="veritas" value="02" checked>
+  <span class="u-iBlock CDB-RadioFace"></span>
+  <label class="u-iBlock">False</label>
+</div>
 
 <br/>
 <br/>
 <br/>
 
-<label class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
-  <input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="hobbies" value="Sport" >
-  <span class="u-iBlock">Sport</span>
-</label>
+<div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
+  <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
+  <span class="u-iBlock CDB-CheckboxFace"></span>
+  <label class="u-iBlock">Sport</label>
+</div>
 <label class="u-iblock CDB-Text CDB-Size-medium">
-  <input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="hobbies" value="Travel">
-  <span class="u-iBlock">Travel</span>
+  <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
+  <span class="u-iBlock CDB-CheckboxFace"></span>
+  <label class="u-iBlock">Travel</label>
 </label>
 
 <br/>
@@ -35,16 +39,18 @@
   <p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
   <ul class="CDB-Text CDB-Size-medium u-iBlock">
     <li class="u-iBlock u-rSpace--xl">
-      <label>
-        <input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="Gender" value="Travel">
-        <span class="u-iBlock">Travel</span>
-      </label>
+      <div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
+        <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
+        <span class="u-iBlock CDB-CheckboxFace"></span>
+        <label class="u-iBlock">Sport</label>
+      </div>
     </li>
     <li class="u-iblock">
-      <label>
-        <input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="Gender" value="Travel">
-        <span class="u-iBlock">Travel</span>
-      </label>
+      <label class="u-iblock CDB-Text CDB-Size-medium">
+        <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
+        <span class="u-iBlock CDB-CheckboxFace"></span>
+        <label class="u-iBlock">Travel</label>
+</label>
     </li>
   </ul>
 </fieldset>
diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/radio.scss
index a323b14..6f9d71e 100644
--- a/src/scss/cdb-components/forms/radio.scss
+++ b/src/scss/cdb-components/forms/radio.scss
@@ -1,3 +1,4 @@
+
 // Radios styles
 // ----------------------------------------------
 
@@ -5,17 +6,17 @@
 # Forms/Radio
 
 ```
-<div class="u-iBlock CDB-RadioContainer">
-  <input class="CDB-Radio" type="radio" name="Gender" value="01" checked>
-  <label class="CDB-RadioLabel"></label>
+<div class="u-iBlock">
+  <input class="CDB-Radio" type="radio" name="gender" value="01" checked>
+  <span class="u-iBlock CDB-RadioFace"></span>
 </div>
-<div class="u-iBlock CDB-RadioContainer">
-  <input class="CDB-Radio" type="radio" name="Gender" value="02">
-  <label class="CDB-RadioLabel"></label>
+<div class="u-iBlock">
+  <input class="CDB-Radio" type="radio" name="gender" value="02">
+  <span class="u-iBlock CDB-RadioFace"></span>
 </div>
-<div class="u-iBlock CDB-RadioContainer">
-  <input class="CDB-Radio" type="radio" name="Gender" value="03" disabled>
-  <label class="CDB-RadioLabel"></label>
+<div class="u-iBlock">
+  <input class="CDB-Radio" type="radio" name="gender" value="03" disabled>
+  <span class="u-iBlock CDB-RadioFace"></span>
 </div>
 ```
 */
@@ -23,68 +24,25 @@
 @import '../../cdb-variables/sizes';
 @import '../../cdb-variables/colors';
 
-.CDB-RadioContainer {
+.CDB-Radio {
+  width: $baseSize * 2;
+  height: $baseSize * 2;
+  opacity: 0;
+  position: absolute;
+  z-index: 1;
+
+  ~ .CDB-RadioFace {
     position: relative;
     width: $baseSize * 2;
     height: $baseSize * 2;
-
-  .CDB-Radio {
-    width: $baseSize * 2;
-    height: $baseSize * 2;
-    opacity: 0;
-    position: absolute;
-    z-index: 1;
-
-    &:checked {
-      ~ .CDB-RadioLabel {
-        border: 1px solid $cBlue;
-        background: $cBlue;
-
-        &::before {
-          background: $cWhite;
-        }
-      }
-
-      &:hover ~ .CDB-RadioLabel {
-        border: 1px solid $cBlue;
-      }
-    }
-
-    &:focus ~ .CDB-RadioLabel {
-      border: 1px solid $cBlue;
-    }
-
-    &:hover ~ .CDB-RadioLabel {
-      border: 1px solid $cHoverLine;
-    }
-
-    &:disabled {
-      ~ .CDB-RadioLabel {
-        border: 1px solid $cSecondaryLine;
-        background: $cThirdBackground;
-
-        &::before {
-          background: $cWhite;
-        }
-      }
-
-      &:hover ~ .CDB-RadioLabel {
-        border: 1px solid $cSecondaryLine;
-      }
-    }
-  }
-
-  .CDB-RadioLabel {
-    position: absolute;
-    width: $baseSize * 2;
-    height: $baseSize * 2;
     border: 1px solid $cMainLine;
     border-radius: 50%;
     box-sizing: border-box;
     cursor: pointer;
+    text-indent: 20px;
+    background: $cWhite;
 
     &::before {
-      display: block;
       position: absolute;
       top: 50%;
       left: 50%;
@@ -97,4 +55,42 @@
       content: '';
     }
   }
+
+  &:checked {
+    ~ .CDB-RadioFace {
+      border: 1px solid $cBlue;
+      background: $cBlue;
+
+      &::before {
+        background: $cWhite;
+      }
+    }
+
+    &:hover ~ .CDB-RadioFace {
+      border: 1px solid $cBlue;
+    }
+  }
+
+  &:focus ~ .CDB-RadioFace {
+    border: 1px solid $cBlue;
+  }
+
+  &:hover ~ .CDB-RadioFace {
+    border: 1px solid $cHoverLine;
+  }
+
+  &:disabled {
+    ~ .CDB-RadioFace {
+      border: 1px solid $cSecondaryLine;
+      background: $cThirdBackground;
+
+      &::before {
+        background: $cWhite;
+      }
+    }
+
+    &:hover ~ .CDB-RadioFace {
+      border: 1px solid $cSecondaryLine;
+    }
+  }
 }