From 533dd3b167e50e8c96185f88d9b6a50832649732 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20Checa?= <mariajecheca@gmail.com>
Date: Mon, 22 Feb 2016 15:43:26 +0100
Subject: [PATCH] Input option component: minor changes

---
 .../cdb-components/forms/option_input.scss    | 52 +++++++++++++------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss
index 1709d26..1d41e53 100644
--- a/src/scss/cdb-components/forms/option_input.scss
+++ b/src/scss/cdb-components/forms/option_input.scss
@@ -5,25 +5,39 @@
 # Forms/Option input
 
 ```
-<div class="CDB-OptionInput is-active u-bSpace--xl CDB-Text">
+<button class="CDB-OptionInput is-active u-rSpace--m CDB-Text">
   <ul class="CDB-OptionInput-container">
     <li class="CDB-OptionInput-option is-active">
-      <span class="CDB-OptionInput-optionContent">8px</span>
+      <a class="CDB-OptionInput-optionContent">8px</a>
     </li>
 
     <li class="CDB-OptionInput-option">
-      <span class="CDB-OptionInput-optionContent">solid</span>
+      <a class="CDB-OptionInput-optionContent">solid</a>
     </li>
 
     <li class="CDB-OptionInput-option">
-      <ul class="CDB-ColorBarContainer CDB-OptionInput-optionContent">
-        <li class="CDB-ColorBar" style="background-color: #207EBA;"></li>
-      </ul>
+      <a class="CDB-ColorBarContainer CDB-OptionInput-optionContent">
+        <span class="CDB-ColorBar" style="background-color: #207EBA;"></span>
+      </a>
     </li>
   </ul>
-</div>
+</button>
 
-<div class="CDB-OptionInput u-bSpace--xl">
+<button class="CDB-OptionInput is-active u-rSpace--m CDB-Text">
+  <ul class="CDB-OptionInput-container">
+    <li class="CDB-OptionInput-option">
+      <a class="CDB-OptionInput-optionContent">8...12</a>
+    </li>
+
+    <li class="CDB-OptionInput-option is-active">
+      <a class="CDB-ColorBarContainer CDB-OptionInput-optionContent">
+        <span class="CDB-ColorBar" style="background-color: #FFFFC0;"></span>
+      </a>
+    </li>
+  </ul>
+</button>
+
+<button type="button" class="CDB-OptionInput u-rSpace--m">
   <ul class="CDB-OptionInput-container">
     <li class="CDB-OptionInput-option">
       <ul class="CDB-ColorBarContainer">
@@ -31,9 +45,9 @@
       </ul>
     </li>
   </ul>
-</div>
+</button>
 
-<div class="CDB-OptionInput u-bSpace--xl">
+<button class="CDB-OptionInput u-rSpace--m">
   <ul class="CDB-OptionInput-container">
     <li class="CDB-OptionInput-option">
       <ul class="CDB-ColorBarContainer">
@@ -46,9 +60,9 @@
       </ul>
     </li>
   </ul>
-</div>
+</button>
 
-<div class="CDB-OptionInput u-bSpace--xl">
+<button type="button" class="CDB-OptionInput">
   <ul class="CDB-OptionInput-container">
     <li class="CDB-OptionInput-option">
       <ul class="CDB-ColorBarContainer">
@@ -59,7 +73,7 @@
       </ul>
     </li>
   </ul>
-</div>
+</button>
 ```
 */
 
@@ -95,9 +109,8 @@
   @include display-flex();
   @include align-items(center);
   @include align-content(center);
-  width: 100%;
+  width: auto;
   height: 100%;
-  color: $cMainBg;
   font-size: $sFontSize-medium;
   box-sizing: content-box;
 
@@ -107,12 +120,21 @@
     content: '·';
   }
   &:last-child {
+    width: 100%;
+
     &::after {
       padding: 0;
       content: '';
     }
   }
 }
+.CDB-OptionInput-optionContent {
+  color: $cMainBg;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
 .CDB-OptionInput-option.is-active > .CDB-OptionInput-optionContent {
   padding: 9px 0;
   border-bottom: 1px solid $cMainBg;