From d81979530d8694cf79c0600e73ec59bedc997e85 Mon Sep 17 00:00:00 2001
From: rubenmoya <ruben@carto.com>
Date: Tue, 21 Nov 2017 09:42:54 +0100
Subject: [PATCH] Refactor _option-input to allow independent borders

---
 .../cdb-components/forms/_option-input.scss   | 115 +++++++++++-------
 1 file changed, 69 insertions(+), 46 deletions(-)

diff --git a/src/scss/cdb-components/forms/_option-input.scss b/src/scss/cdb-components/forms/_option-input.scss
index ff4987e..c751a7f 100644
--- a/src/scss/cdb-components/forms/_option-input.scss
+++ b/src/scss/cdb-components/forms/_option-input.scss
@@ -99,67 +99,90 @@
 */
 
 .CDB-OptionInput {
-  width: 100%;
-  height: $baseSize * 4;
-  border: 1px solid $cMainLine;
-  border-radius: $baseSize / 2;
   box-sizing: border-box;
+  width: 100%;
+  height: $baseSize * 4 - 2px;
+  border-radius: $baseSize / 2;
   vertical-align: middle;
+}
 
-  &:hover {
-    border: 1px solid $cHoverLine;
+.CDB-OptionInput-container {
+  display: flex;
+  align-content: center;
+  align-items: center;
+
+  &--noMargin {
+    margin: 0;
   }
+}
+
+.CDB-OptionInput-item {
+  display: flex;
+  position: relative;
+  box-sizing: content-box;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: $sFontSize-medium;
+
+  &.is-active,
+  &:hover,
+  &:focus {
+    cursor: pointer;
+  }
+
+  &:first-child {
+    width: auto;
+    margin-right: $baseSize;
+  }
+
+  &:last-child {
+    width: 100%;
+  }
+}
+
+.CDB-OptionInput-container:not(.CDB-OptionInput-container--noBorder) .CDB-OptionInput-item {
+  padding: 0 $baseSize;
+  border: 1px solid $cMainLine;
+
+  &.is-active,
+  &:hover,
   &:focus {
     border: 1px solid $cBlue;
   }
-}
-.CDB-OptionInput.is-active {
-  border: 1px solid $cBlue;
-}
-.CDB-OptionInput-container {
-  @include display-flex();
-  @include align-content(center);
-  @include align-items(center);
-  margin: 0 $baseSize;
-}
-.CDB-OptionInput-container--noMargin {
-  margin: 0;
-}
-.CDB-OptionInput-item {
-  @include display-flex();
-  @include align-items(center);
-  @include align-content(center);
-  width: auto;
-  height: 100%;
-  font-size: $sFontSize-medium;
-  box-sizing: content-box;
 
-  &::after {
-    width: 1px;
-    height: 100%;
-    margin-right: $baseSize;
-    background-color: $cSecondaryLine;
-    content: '';
+  &:first-child {
+    margin-right: 0;
+    border-radius: 4px 0 0 4px;
   }
-  &:last-child {
-    width: 100%;
 
-    &::after {
-      display: none;
+  &:last-child {
+    border-radius: 4px;
+  }
+
+  + .CDB-OptionInput-item {
+    border-left: none;
+    border-radius: 0 4px 4px 0;
+
+    &:hover::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      width: 1px;
+      height: 100%;
+      background-color: $cBlue;
     }
   }
 }
-.CDB-OptionInput-item--noSeparator::after {
-  content: '';
-}
+
 .CDB-OptionInput-content {
-  @include display-flex();
-  @include align-items(center);
-  height: 100%;
-  margin-left: -$baseSize;
-  padding: 0 $baseSize + 2;
-  color: $cMainBg;
+  display: flex;
   box-sizing: content-box;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: $cMainBg;
   white-space: nowrap;
 
   &:hover {