From b7847b25ab2a9cf7a9e717e4bcf1c03803af29b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20Checa?= <mariajecheca@gmail.com>
Date: Tue, 23 Feb 2016 11:23:49 +0100
Subject: [PATCH] Color bar & option input component: minor improvements

---
 src/scss/cdb-components/forms/color_bar.scss    | 17 +++++++++--------
 src/scss/cdb-components/forms/option_input.scss |  2 +-
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/scss/cdb-components/forms/color_bar.scss b/src/scss/cdb-components/forms/color_bar.scss
index 87c5c15..6c2efc6 100644
--- a/src/scss/cdb-components/forms/color_bar.scss
+++ b/src/scss/cdb-components/forms/color_bar.scss
@@ -50,6 +50,7 @@
  ```
 */
 
+@import '../../cdb-variables/sizes';
 @import '../../cdb-utilities/mixins';
 
 .CDB-ColorBarContainer {
@@ -60,9 +61,9 @@
 .CDB-ColorBar {
   position: relative;
   width: 100%;
-  height: 6px;
+  height: $baseSize - 2;
   border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 6px;
+  border-radius: $baseSize - 2;
   box-sizing: border-box;
 
   &:last-child {
@@ -79,12 +80,12 @@
     bottom: 0;
     left: 0;
     border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: 6px;
+    border-radius: $baseSize - 2;
     content: '';
   }
 }
 .CDB-ColorBar.CDB-ColorBar--spaceMedium {
-  margin-right: 4px;
+  margin-right: $baseSize / 2;
 
   &:last-child {
     margin-right: 0;
@@ -96,20 +97,20 @@
 }
 .CDB-ColorBar.CDB-ColorBar--spaceless:first-child {
   border-width: 1px 0 1px 1px;
-  border-radius: 6px 0 0 6px;
+  border-radius: $baseSize - 2 0 0 $baseSize - 2;
 }
 .CDB-ColorBar.CDB-ColorBar--spaceless:last-child {
   border-width: 1px 1px 1px 0;
-  border-radius: 0 6px 6px 0;
+  border-radius: 0 $baseSize - 2 $baseSize - 2 0;
 }
 .CDB-ColorBar.CDB-ColorBar--spaceSmall {
   margin-right: 2px;
   border-radius: 2px;
 }
 .CDB-ColorBar.CDB-ColorBar--spaceSmall:first-child {
-  border-radius: 6px 3px 3px 6px;
+  border-radius: $baseSize - 2 3px 3px $baseSize - 2;
 }
 .CDB-ColorBar.CDB-ColorBar--spaceSmall:last-child {
   margin-right: 0;
-  border-radius: 3px 6px 6px 3px;
+  border-radius: 3px $baseSize - 2 $baseSize - 2 3px;
 }
diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss
index 2325393..8bcc2c2 100644
--- a/src/scss/cdb-components/forms/option_input.scss
+++ b/src/scss/cdb-components/forms/option_input.scss
@@ -118,7 +118,7 @@
   box-sizing: content-box;
 
   &::after {
-    padding: 0 6px;
+    padding: 0 $baseSize - 2;
     color: $cHintText;
     content: '·';
   }