From 4979ba0e8f6039f09b8d716f9c2470912916d543 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20Checa?= <mariajecheca@gmail.com>
Date: Thu, 4 Feb 2016 16:26:54 +0100
Subject: [PATCH] Color input component

---
 .../cdb-components/forms/color_input.scss     | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/scss/cdb-components/forms/color_input.scss

diff --git a/src/scss/cdb-components/forms/color_input.scss b/src/scss/cdb-components/forms/color_input.scss
new file mode 100644
index 0000000..2f74051
--- /dev/null
+++ b/src/scss/cdb-components/forms/color_input.scss
@@ -0,0 +1,48 @@
+// Color input styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Color input
+
+```
+<fieldset>
+  <p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">COLOR</p>
+  <div class="u-iBlock">
+    <div class="CDB-ColorInput">
+      <span class="CDB-ColorInput-colorBar Color-Higlight"></span>
+    </div>
+  </div>
+</fieldset>
+ ```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/mixins';
+
+.CDB-ColorInput {
+  @include display-flex();
+  @include align-items(center);
+  width: $baseSize * 20;
+  height: $baseSize * 4;
+  padding: $baseSize;
+  border: 1px solid $cMainLine;
+  border-radius: $baseSize / 2;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:hover {
+    border: 1px solid $cHoverLine;
+  }
+  &:focus {
+    border: 1px solid $cBlue;
+  }
+}
+
+.CDB-ColorInput-colorBar {
+  @include inline-block();
+  width: 100%;
+  height: $baseSize / 2;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: $baseSize;
+}