From 6095f871eddb96179db52adbbf693c0a2e36a85d Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 7 Mar 2017 10:16:58 +0000
Subject: [PATCH] Added color swatch to color field.

---
 src/components/fields/ColorField.jsx | 5 +++++
 src/styles/_input.scss               | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/fields/ColorField.jsx b/src/components/fields/ColorField.jsx
index aaecb16..3f09246 100644
--- a/src/components/fields/ColorField.jsx
+++ b/src/components/fields/ColorField.jsx
@@ -81,8 +81,13 @@ class ColorField extends React.Component {
       />
     </div>
 
+    var swatchStyle = {
+      "background-color": this.props.value
+    };
+
     return <div className="maputnik-color-wrapper">
       {this.state.pickerOpened && picker}
+      <div className="maputnik-color-swatch" style={swatchStyle}></div>
       <input
         className="maputnik-color"
         ref="colorInput"
diff --git a/src/styles/_input.scss b/src/styles/_input.scss
index 49757e9..5c83434 100644
--- a/src/styles/_input.scss
+++ b/src/styles/_input.scss
@@ -30,7 +30,12 @@
 
 .maputnik-color-wrapper {
   position: relative;
-  display: inline;
+  @include flex-row;
+}
+
+.maputnik-color-swatch {
+  height: 26px;
+  width: 3px;
 }
 
 // ARRAY