Add hover effects to _toggle.scss

src/scss/cdb-components/forms/_toggle.scss

@@ -30,21 +30,32 @@
 
 .CDB-Toggle {
   position: absolute;
+  z-index: 1;
   width: $baseSize * 4;
   height: $baseSize * 2;
   opacity: 0;
-  z-index: 1;
+
+  &:hover {
+    + .CDB-ToggleFace {
+      background: $cHintTextHover;
+    }
+
+    &:checked + .CDB-ToggleFace {
+      background: $cHighlightHover;
+    }
+  }
 
   + .CDB-ToggleFace {
-    @include transition(background, 300ms);
     position: relative;
     width: $baseSize * 4;
     height: $baseSize * 2;
     margin: 0 2px;
+    transition: background 300ms;
     border-radius: 50px;
     background: $cHintText;
 
     &::before {
+      content: '';
       position: absolute;
       top: 2px;
       left: 2px;
@@ -53,7 +64,6 @@
       border-radius: 50%;
       background: $cWhite;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
-      content: '';
     }
   }
 
@@ -69,4 +79,5 @@
 
 .Toggle .is-disabled {
   opacity: 0.24;
+  pointer-events: none;
 }

src/scss/cdb-variables/_colors.scss

@@ -3,7 +3,7 @@
 
 // General
 $cBlue: #1785FB;
-$cBlueHover: #0f6cd2;
+$cBlueHover: #0F6CD2;
 $cBlack: #000;
 $cWhite: #FFF;
 $cMainBg: #2E3C43;
@@ -23,9 +23,11 @@ $cMainText: #2E3C43;
 $cSecondaryText: #636D72;
 $cAltText: #979EA1;
 $cHintText: #CBCED0;
+$cHintTextHover: #9C9FA1;
 
 //Others
 $cHighlight: #9DE0AD;
+$cHighlightHover: #82BB90;
 $cAlert: #F19243;
 $cPublic: #9BC63B;
 $cLink: #FEB100;