From a2b2fd55817d8b1613adc2fc52f89ee9bba84d3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20Checa?= <mariajecheca@gmail.com>
Date: Mon, 22 Feb 2016 19:35:42 +0100
Subject: [PATCH] Color bar & option input components: fixes

---
 src/scss/cdb-components/forms/color_bar.scss  | 126 ++++++++----------
 .../cdb-components/forms/option_input.scss    | 102 +++++++-------
 2 files changed, 111 insertions(+), 117 deletions(-)

diff --git a/src/scss/cdb-components/forms/color_bar.scss b/src/scss/cdb-components/forms/color_bar.scss
index 59672e2..9e41642 100644
--- a/src/scss/cdb-components/forms/color_bar.scss
+++ b/src/scss/cdb-components/forms/color_bar.scss
@@ -5,39 +5,47 @@
 # Forms/Color bar
 
 ```
-<ul class="CDB-ColorBarContainer u-bSpace--xl">
-  <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 class="CDB-ColorBarContainer">
+  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #9DE0AD;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #50E3C2;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #FFFFC0;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #7ED321;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #BD10E0;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--spaceMedium" style="background-color: #F15743;"></li>
 </ul>
 
-<ul class="CDB-ColorBarContainer u-bSpace--xl">
-  <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>
+<br/>
+
+<ul class="CDB-ColorBarContainer">
+  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #9DE0AD;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #50E3C2;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #FFFFC0;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #7ED321;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #BD10E0;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #F15743;"></li>
 </ul>
 
-<ul class="CDB-ColorBarContainer u-bSpace--xl">
-  <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #9DE0AD;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #50E3C2;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #FFFFC0;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #7ED321;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #BD10E0;"></li>
-  <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #F15743;"></li>
+<br/>
+
+<ul class="CDB-ColorBarContainer">
+  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #9DE0AD;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #50E3C2;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #FFFFC0;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #7ED321;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #BD10E0;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #F15743;"></li>
 </ul>
 
-<ul class="CDB-ColorBarContainer u-bSpace--xl">
+<br/>
+
+<ul class="CDB-ColorBarContainer">
   <li class="CDB-ColorBar" style="background-color: #9DE0AD;"></li>
 </ul>
 
-<ul class="CDB-ColorBarContainer u-bSpace--xl">
-  <li class="CDB-ColorBar" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></li>
+<br/>
+
+<ul class="CDB-ColorBarContainer">
+  <li class="CDB-ColorBar CDB-ColorBar-gradient" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></li>
 </ul>
  ```
 */
@@ -48,14 +56,21 @@
   @include display-flex();
   @include flex-direction(row);
   width: 100%;
-  max-width: 215px;
 }
 .CDB-ColorBar {
   position: relative;
   width: 100%;
   height: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 6px;
 
+  &:last-child {
+    margin-right: 0;
+  }
+}
+.CDB-ColorBar-gradient {
+  border: 0;
+
   &::after {
     position: absolute;
     top: 0;
@@ -66,57 +81,34 @@
     border-radius: 6px;
     content: '';
   }
-  &:last-child {
-    margin-right: 0;
-  }
 }
-.CDB-ColorBar.CDB-ColorBar--sMargin {
+.CDB-ColorBar.CDB-ColorBar--spaceMedium {
   margin-right: 4px;
 
   &:last-child {
     margin-right: 0;
   }
 }
-.CDB-ColorBar.CDB-ColorBar--compacted {
+.CDB-ColorBar.CDB-ColorBar--spaceless {
+  border-width: 1px 0;
   border-radius: 0;
-
-  &::after {
-    border-width: 1px 0;
-    border-radius: 0;
-  }
-  &:first-child {
-    border-radius: 6px 0 0 6px;
-    &::after {
-      border-width: 1px 0 1px 1px;
-      border-radius: 6px 0 0 6px;
-    }
-  }
-  &:last-child {
-    border-radius: 0 6px 6px 0;
-    &::after {
-      border-width: 1px 1px 1px 0;
-      border-radius: 0 6px 6px 0;
-    }
-  }
 }
-.CDB-ColorBar.CDB-ColorBar--sRadius {
+.CDB-ColorBar.CDB-ColorBar--spaceless:first-child {
+  border-width: 1px 0 1px 1px;
+  border-radius: 6px 0 0 6px;
+}
+.CDB-ColorBar.CDB-ColorBar--spaceless:last-child {
+  border-width: 1px 1px 1px 0;
+  border-radius: 0 6px 6px 0;
+}
+.CDB-ColorBar.CDB-ColorBar--spaceSmall {
   margin-right: 2px;
   border-radius: 2px;
-
-  &::after {
-    border-radius: 2px;
-  }
-  &:first-child {
-    border-radius: 6px 2px 2px 6px;
-    &::after {
-      border-radius: 6px 2px 2px 6px;
-    }
-  }
-  &:last-child {
-    margin-right: 0;
-    border-radius: 2px 6px 6px 2px;
-    &::after {
-      border-radius: 2px 6px 6px 2px;
-    }
-  }
 }
+.CDB-ColorBar.CDB-ColorBar--spaceSmall:first-child {
+  border-radius: 6px 3px 3px 6px;
+}
+.CDB-ColorBar.CDB-ColorBar--spaceSmall:last-child {
+  margin-right: 0;
+  border-radius: 3px 6px 6px 3px;
+}
\ No newline at end of file
diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss
index fc96993..b609508 100644
--- a/src/scss/cdb-components/forms/option_input.scss
+++ b/src/scss/cdb-components/forms/option_input.scss
@@ -5,74 +5,76 @@
 # Forms/Option input
 
 ```
-<div class="CDB-OptionInput is-active u-rSpace--m CDB-Text u-iBlock">
+<div class="CDB-OptionInput is-active CDB-Text">
   <ul class="CDB-OptionInput-container">
-    <li class="CDB-OptionInput-option is-active">
-      <button tupe="button" class="CDB-OptionInput-optionContent">8px</button>
+    <li class="CDB-OptionInput-item is-active">
+      <button type="button" class="CDB-OptionInput-content">8px</button>
     </li>
 
-    <li class="CDB-OptionInput-option">
-      <button tupe="button" class="CDB-OptionInput-optionContent">solid</button>
+    <li class="CDB-OptionInput-item">
+      <button type="button" class="CDB-OptionInput-content">solid</button>
     </li>
 
-    <li class="CDB-OptionInput-option">
-      <button tupe="button" class="CDB-ColorBarContainer CDB-OptionInput-optionContent">
+    <li class="CDB-OptionInput-item">
+      <button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
         <span class="CDB-ColorBar" style="background-color: #207EBA;"></span>
       </button>
     </li>
   </ul>
 </div>
 
-<div class="CDB-OptionInput is-active u-rSpace--m CDB-Text u-iBlock">
+<br/>
+
+<div class="CDB-OptionInput is-active CDB-Text">
   <ul class="CDB-OptionInput-container">
-    <li class="CDB-OptionInput-option">
-      <button class="CDB-OptionInput-optionContent">8...12</button>
+    <li class="CDB-OptionInput-item">
+      <button type="button" class="CDB-OptionInput-content">8...12</button>
     </li>
 
-    <li class="CDB-OptionInput-option is-active">
-      <button class="CDB-ColorBarContainer CDB-OptionInput-optionContent">
+    <li class="CDB-OptionInput-item is-active">
+      <button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
         <span class="CDB-ColorBar" style="background-color: #FFFFC0;"></span>
       </button>
     </li>
   </ul>
 </div>
 
-<button type="button" class="CDB-OptionInput u-rSpace--m">
-  <ul class="CDB-OptionInput-container">
-    <li class="CDB-OptionInput-option">
-      <ul class="CDB-ColorBarContainer">
-        <li class="CDB-ColorBar" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></li>
-      </ul>
-    </li>
-  </ul>
-</button>
-
-<button class="CDB-OptionInput u-rSpace--m">
-  <ul class="CDB-OptionInput-container">
-    <li class="CDB-OptionInput-option">
-      <ul class="CDB-ColorBarContainer">
-        <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>
-      </ul>
-    </li>
-  </ul>
-</button>
+<br/>
 
 <button type="button" class="CDB-OptionInput">
-  <ul class="CDB-OptionInput-container">
-    <li class="CDB-OptionInput-option">
-      <ul class="CDB-ColorBarContainer">
-        <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #9DE0AD;"></li>
-        <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #50E3C2;"></li>
-        <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #FFFFC0;"></li>
-        <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #7ED321;"></li>
-      </ul>
-    </li>
-  </ul>
+  <div class="CDB-OptionInput-container">
+    <span class="CDB-ColorBar CDB-ColorBar-gradient" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></span>
+  </div>
+</button>
+
+<br/>
+<br/>
+
+<button type="button" class="CDB-OptionInput">
+  <div class="CDB-OptionInput-container">
+    <ul class="CDB-ColorBarContainer">
+      <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>
+    </ul>
+  </div>
+</button>
+
+<br/>
+<br/>
+
+<button type="button" class="CDB-OptionInput">
+  <div class="CDB-OptionInput-container">
+    <ul class="CDB-ColorBarContainer">
+      <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #9DE0AD;"></li>
+      <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #50E3C2;"></li>
+      <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #FFFFC0;"></li>
+      <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #7ED321;"></li>
+    </ul>
+  </div>
 </button>
 ```
 */
@@ -82,7 +84,7 @@
 @import '../../cdb-utilities/mixins';
 
 .CDB-OptionInput {
-  width: $baseSize * 20;
+  width: 100%;
   height: $baseSize * 4;
   border: 1px solid $cMainLine;
   border-radius: $baseSize / 2;
@@ -106,7 +108,7 @@
   @include align-items(center);
   margin: 0 $baseSize;
 }
-.CDB-OptionInput-option {
+.CDB-OptionInput-item {
   @include display-flex();
   @include align-items(center);
   @include align-content(center);
@@ -129,7 +131,7 @@
     }
   }
 }
-.CDB-OptionInput-optionContent {
+.CDB-OptionInput-content {
   @include display-flex();
   @include align-items(center);
   height: 100%;
@@ -141,6 +143,6 @@
     text-decoration: none;
   }
 }
-.CDB-OptionInput-option.is-active > .CDB-OptionInput-optionContent {
+.CDB-OptionInput-item.is-active > .CDB-OptionInput-content {
   border-bottom: 1px solid $cMainBg;
 }