From 55fae253d2aba958dc18ce5d3aeae2a420001216 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20Checa?= <mariajecheca@gmail.com>
Date: Thu, 18 Feb 2016 12:14:54 +0100
Subject: [PATCH] Color bar component: several improvements

---
 src/scss/cdb-components/forms/color_bar.scss  | 91 +++++++++++++------
 .../cdb-components/forms/option_input.scss    |  2 +-
 2 files changed, 65 insertions(+), 28 deletions(-)

diff --git a/src/scss/cdb-components/forms/color_bar.scss b/src/scss/cdb-components/forms/color_bar.scss
index 1604fdd..13f556b 100644
--- a/src/scss/cdb-components/forms/color_bar.scss
+++ b/src/scss/cdb-components/forms/color_bar.scss
@@ -5,26 +5,48 @@
 # Forms/Color bar
 
 ```
-<span class="CDB-ColorBar CDB-ColorBar--mBorderRadius u-rSpace u-iBlock u-bSpace--xl" style="background-color: #9DE0AD;"></span>
-<span class="CDB-ColorBar CDB-ColorBar--mBorderRadius u-rSpace u-iBlock u-bSpace--xl" style="background-color: #50E3C2;"></span>
-<span class="CDB-ColorBar CDB-ColorBar--mBorderRadius u-rSpace u-iBlock u-bSpace--xl" style="background-color: #FFFFC0;"></span>
-
 <div class="CDB-ColorBarContainer u-bSpace--xl">
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--msBorderRadius u-rSpace--s" style="background-color: #9DE0AD;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--sBorderRadius u-rSpace--s" style="background-color: #50E3C2;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--sBorderRadius u-rSpace--s" style="background-color: #FFFFC0;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--sBorderRadius u-rSpace--s" style="background-color: #7ED321;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--sBorderRadius u-rSpace--s" style="background-color: #BD10E0;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--smBorderRadius u-rSpace--s" style="background-color: #F15743;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #9DE0AD;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #50E3C2;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #FFFFC0;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #7ED321;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #BD10E0;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--med u-rSpace" style="background-color: #F15743;"></span>
 </div>
 
 <div class="CDB-ColorBarContainer u-bSpace--xl">
-  <span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #9DE0AD;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #50E3C2;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #FFFFC0;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #7ED321;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #BD10E0;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--small CDB-ColorBar--mBorderRadius u-rSpace" style="background-color: #F15743;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #9DE0AD;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #50E3C2;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #FFFFC0;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #7ED321;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #BD10E0;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #F15743;"></span>
+</div>
+
+<div class="CDB-ColorBarContainer u-bSpace--xl">
+  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #9DE0AD;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #50E3C2;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #FFFFC0;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #7ED321;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #BD10E0;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--med CDB-ColorBar--compacted" style="background-color: #F15743;"></span>
+</div>
+
+<div class="CDB-ColorBarContainer u-bSpace--xl">
+  <span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #9DE0AD;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #50E3C2;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #FFFFC0;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #7ED321;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #BD10E0;"></span>
+  <span class="CDB-ColorBar CDB-ColorBar--small u-rSpace" style="background-color: #F15743;"></span>
+</div>
+
+<div class="CDB-ColorBarContainer u-bSpace--xl">
+  <span class="CDB-ColorBar CDB-ColorBar--long" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></span>
+</div>
+
+<div class="CDB-ColorBarContainer u-bSpace--xl">
+  <span class="CDB-ColorBar CDB-ColorBar--med" style="background-color: #9DE0AD;"></span>
 </div>
  ```
 */
@@ -41,6 +63,7 @@
   width: 100%;
   height: $baseSize / 2;
   border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
 
   &:last-child {
     margin-right: 0;
@@ -52,16 +75,30 @@
 .CDB-ColorBar.CDB-ColorBar--med {
   width: 29px;
 }
-.CDB-ColorBar.CDB-ColorBar--sBorderRadius {
-  border-radius: 2px;
-}
-.CDB-ColorBar.CDB-ColorBar--mBorderRadius {
-  border-radius: 6px;
-}
-.CDB-ColorBar.CDB-ColorBar--msBorderRadius {
-  border-radius: 6px 2px 2px 6px;
-}
-.CDB-ColorBar.CDB-ColorBar--smBorderRadius {
-  border-radius: 2px 6px 6px 2px;
+.CDB-ColorBar.CDB-ColorBar--long {
+  width: $baseSize * 12;
 }
+.CDB-ColorBar.CDB-ColorBar--compacted {
+  border-right: 0;
+  border-left: 0;
+  border-radius: 0;
 
+  &:first-child {
+    border-left: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 6px 0 0 6px;
+  }
+  &:last-child {
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 0 6px 6px 0;
+  }
+}
+.CDB-ColorBar.CDB-ColorBar--uBorder {
+  border-radius: 2px;
+
+  &:first-child {
+    border-radius: 6px 2px 2px 6px;
+  }
+  &:last-child {
+    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 3a99b21..47e34cd 100644
--- a/src/scss/cdb-components/forms/option_input.scss
+++ b/src/scss/cdb-components/forms/option_input.scss
@@ -9,7 +9,7 @@
   <label class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">OPTION</label>
   <div class="u-iBlock">
     <div class="CDB-OptionInput">
-      <span class="CDB-ColorBar CDB-ColorBar--mBorderRadius" style="background-color: #9DE0AD;"></span>
+      <span class="CDB-ColorBar" style="background-color: #9DE0AD;"></span>
     </div>
   </div>
 </fieldset>