From b95da864bc50b37974b99daa45117693396d3ad9 Mon Sep 17 00:00:00 2001
From: piensaenpixel <piensaenpixel@gmail.com>
Date: Tue, 10 Jan 2017 17:23:36 +0100
Subject: [PATCH] fix 156

---
 src/scss/cdb-components/forms/checkbox.scss | 33 +++++++++++++++++----
 src/scss/cdb-components/forms/radio.scss    | 23 ++++++++++++--
 2 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/src/scss/cdb-components/forms/checkbox.scss b/src/scss/cdb-components/forms/checkbox.scss
index 8774a75..2f2b7f2 100644
--- a/src/scss/cdb-components/forms/checkbox.scss
+++ b/src/scss/cdb-components/forms/checkbox.scss
@@ -14,7 +14,7 @@
   <span class="u-iBlock CDB-Checkbox-face"></span>
 </div>
 <div class="u-iBlock">
-  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Car" disabled>
+  <input class="CDB-Checkbox" type="checkbox" name="vehicle2" value="Car" disabled>
   <span class="u-iBlock CDB-Checkbox-face"></span>
 </div>
 ```
@@ -43,6 +43,8 @@
   background: $cWhite;
   cursor: pointer;
   box-sizing: border-box;
+  z-index: 2;
+  pointer-events: none;
 
   &::before,
   &::after {
@@ -53,6 +55,7 @@
     border-radius: 1px;
     background: $cSecondaryLine;
     content: '';
+    opacity: 0;
   }
 
   &::before {
@@ -76,21 +79,28 @@
   &::before,
   &::after {
     background: $cWhite;
+    opacity: 1;
   }
 }
 
-.CDB-Checkbox:disabled + .CDB-Checkbox-face {
-  border: 1px solid $cSecondaryLine;
-  background: $cThirdBackground;
-
+.CDB-Checkbox:checked:hover + .CDB-Checkbox-face {
   &::before,
   &::after {
     background: $cWhite;
   }
 }
 
+.CDB-Checkbox:disabled + .CDB-Checkbox-face {
+  border: 1px solid $cSecondaryLine;
+  background: $cThirdBackground;
+}
+
 .CDB-Checkbox:disabled:hover + .CDB-Checkbox-face {
   border: 1px solid $cSecondaryLine;
+  &::before,
+  &::after {
+    opacity: 0;
+  }
 }
 
 .CDB-Checkbox:checked:hover + .CDB-Checkbox-face,
@@ -98,6 +108,19 @@
   border: 1px solid $cBlue;
 }
 
+.CDB-Checkbox:focus + .CDB-Checkbox-face {
+  &::before,
+  &::after {
+    background: $cBlue;
+    opacity: 1;
+  }
+}
+
 .CDB-Checkbox:hover + .CDB-Checkbox-face {
   border: 1px solid $cHoverLine;
+  &::before,
+  &::after {
+    background: $cHoverLine;
+    opacity: 1;
+  }
 }
diff --git a/src/scss/cdb-components/forms/radio.scss b/src/scss/cdb-components/forms/radio.scss
index badfed2..2ada046 100644
--- a/src/scss/cdb-components/forms/radio.scss
+++ b/src/scss/cdb-components/forms/radio.scss
@@ -55,7 +55,7 @@
     margin-top: -3px;
     margin-left: -3px;
     border-radius: 50%;
-    background: $cSecondaryLine;
+    background: $cWhite;
     content: '';
   }
 }
@@ -75,7 +75,7 @@
   background: $cThirdBackground;
 
   &::before {
-    background: $cWhite;
+    opacity: 0;
   }
 }
 
@@ -85,9 +85,28 @@
 
 .CDB-Radio:hover + .CDB-Radio-face {
   border: 1px solid $cHoverLine;
+  &::before {
+    background: $cHoverLine;
+  }
 }
 
 .CDB-Radio:focus + .CDB-Radio-face,
 .CDB-Radio:checked:hover + .CDB-Radio-face {
   border: 1px solid $cBlue;
 }
+
+.CDB-Radio:checked:hover + .CDB-Radio-face {
+  &::before {
+    background: $cWhite;
+  }
+}
+
+.CDB-Radio:active + .CDB-Radio-face {
+  &::before {
+    background: $cBlue;
+  }
+}
+
+
+
+