From 475376be43f4893d5103db92bd4072a4ad7bcb0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20Checa?= <mariajecheca@gmail.com>
Date: Mon, 22 Feb 2016 18:09:52 +0100
Subject: [PATCH] Option input component: ninja fixes

---
 src/scss/cdb-components/forms/color_bar.scss  | 35 ++++++++++++-------
 .../cdb-components/forms/option_input.scss    | 14 ++++----
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/scss/cdb-components/forms/color_bar.scss b/src/scss/cdb-components/forms/color_bar.scss
index 9e577d3..59672e2 100644
--- a/src/scss/cdb-components/forms/color_bar.scss
+++ b/src/scss/cdb-components/forms/color_bar.scss
@@ -6,21 +6,21 @@
 
 ```
 <ul class="CDB-ColorBarContainer u-bSpace--xl">
-  <li class="CDB-ColorBar u-rSpace" style="background-color: #9DE0AD;"></li>
-  <li class="CDB-ColorBar u-rSpace" style="background-color: #50E3C2;"></li>
-  <li class="CDB-ColorBar u-rSpace" style="background-color: #FFFFC0;"></li>
-  <li class="CDB-ColorBar u-rSpace" style="background-color: #7ED321;"></li>
-  <li class="CDB-ColorBar u-rSpace" style="background-color: #BD10E0;"></li>
-  <li class="CDB-ColorBar u-rSpace" style="background-color: #F15743;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #9DE0AD;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #50E3C2;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #FFFFC0;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #7ED321;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #BD10E0;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--sMargin" style="background-color: #F15743;"></li>
 </ul>
 
 <ul class="CDB-ColorBarContainer u-bSpace--xl">
-  <li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #9DE0AD;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #50E3C2;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #FFFFC0;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #7ED321;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #BD10E0;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #F15743;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #9DE0AD;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #50E3C2;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #FFFFC0;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #7ED321;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #BD10E0;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--sRadius" style="background-color: #F15743;"></li>
 </ul>
 
 <ul class="CDB-ColorBarContainer u-bSpace--xl">
@@ -70,6 +70,13 @@
     margin-right: 0;
   }
 }
+.CDB-ColorBar.CDB-ColorBar--sMargin {
+  margin-right: 4px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
 .CDB-ColorBar.CDB-ColorBar--compacted {
   border-radius: 0;
 
@@ -92,7 +99,8 @@
     }
   }
 }
-.CDB-ColorBar.CDB-ColorBar--uBorder {
+.CDB-ColorBar.CDB-ColorBar--sRadius {
+  margin-right: 2px;
   border-radius: 2px;
 
   &::after {
@@ -105,6 +113,7 @@
     }
   }
   &:last-child {
+    margin-right: 0;
     border-radius: 2px 6px 6px 2px;
     &::after {
       border-radius: 2px 6px 6px 2px;
diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss
index 0e37183..3886b06 100644
--- a/src/scss/cdb-components/forms/option_input.scss
+++ b/src/scss/cdb-components/forms/option_input.scss
@@ -5,23 +5,23 @@
 # Forms/Option input
 
 ```
-<button class="CDB-OptionInput is-active u-rSpace--m CDB-Text">
+<div class="CDB-OptionInput is-active u-rSpace--m CDB-Text u-iBlock">
   <ul class="CDB-OptionInput-container">
     <li class="CDB-OptionInput-option is-active">
-      <a class="CDB-OptionInput-optionContent">8px</a>
+      <button tupe="button" class="CDB-OptionInput-optionContent">8px</button>
     </li>
 
     <li class="CDB-OptionInput-option">
-      <a class="CDB-OptionInput-optionContent">solid</a>
+      <button tupe="button" class="CDB-OptionInput-optionContent">solid</button>
     </li>
 
     <li class="CDB-OptionInput-option">
-      <a class="CDB-ColorBarContainer CDB-OptionInput-optionContent">
+      <button tupe="button" class="CDB-ColorBarContainer CDB-OptionInput-optionContent">
         <span class="CDB-ColorBar" style="background-color: #207EBA;"></span>
-      </a>
+      </button>
     </li>
   </ul>
-</button>
+</div>
 
 <button class="CDB-OptionInput is-active u-rSpace--m CDB-Text">
   <ul class="CDB-OptionInput-container">
@@ -134,6 +134,8 @@
   @include align-items(center);
   height: 100%;
   color: $cMainBg;
+  box-sizing: content-box;
+  white-space: nowrap;
 
   &:hover {
     text-decoration: none;