From 8a101f0ea6a6453c768e5f156372dd9fb60c865c Mon Sep 17 00:00:00 2001
From: rubenmoya <ruben@carto.com>
Date: Mon, 27 Nov 2017 15:12:30 +0100
Subject: [PATCH] Fix problems with option-input component

---
 src/scss/cdb-components/forms/_inputs.scss    |  7 ++--
 .../cdb-components/forms/_option-input.scss   | 35 +++++++++++++------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/scss/cdb-components/forms/_inputs.scss b/src/scss/cdb-components/forms/_inputs.scss
index 7436359..5f222ba 100644
--- a/src/scss/cdb-components/forms/_inputs.scss
+++ b/src/scss/cdb-components/forms/_inputs.scss
@@ -38,9 +38,12 @@
     font-style: italic;
   }
 
-  &:hover,
-  &:focus {
+  &:hover {
     border: 1px solid $cBlueHover;
+  }
+
+  &:focus {
+    border: 1px solid $cBlackHover;
     outline: none;
   }
 
diff --git a/src/scss/cdb-components/forms/_option-input.scss b/src/scss/cdb-components/forms/_option-input.scss
index 9056872..1312deb 100644
--- a/src/scss/cdb-components/forms/_option-input.scss
+++ b/src/scss/cdb-components/forms/_option-input.scss
@@ -147,15 +147,24 @@
   border: 1px solid $cMainLine;
 
   &.is-active,
-  &:hover,
   &:focus {
-    border: 1px solid $cBlue;
+    border: 1px solid $cBlackHover;
+  }
+
+  &:hover {
+    border: 1px solid $cBlueHover;
   }
 
   &:first-child {
     margin-right: 0;
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
+
+    &:hover {
+      + .CDB-OptionInput-item::after {
+        content: none;
+      }
+    }
   }
 
   &:last-child {
@@ -167,14 +176,24 @@
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 
+    &.is-active::after,
+    &:focus::after,
     &:hover::after {
       position: absolute;
-      left: 0;
+      left: -1px;
       width: 1px;
-      height: 100%;
-      background-color: $cBlue;
+      height: calc(100% + 2px);
       content: '';
     }
+
+    &.is-active::after,
+    &:focus::after {
+      background-color: $cBlackHover;
+    }
+
+    &:hover::after {
+      background-color: $cBlueHover;
+    }
   }
 }
 
@@ -191,9 +210,3 @@
     text-decoration: none;
   }
 }
-.CDB-OptionInput-item:first-child .CDB-OptionInput-content {
-  border-bottom-left-radius: 4px;
-}
-.CDB-OptionInput-item.is-active > .CDB-OptionInput-content {
-  border-bottom: 1px solid $cMainBg;
-}