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 1/3] 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

From 2f059874aa32fe7a0ba4f6ae63a00e656bb2ebab Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 7 Mar 2017 12:59:08 +0000
Subject: [PATCH 2/3] Fixed css lint errors.

---
 src/styles/_input.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/_input.scss b/src/styles/_input.scss
index 5c83434..b4b6cf7 100644
--- a/src/styles/_input.scss
+++ b/src/styles/_input.scss
@@ -30,6 +30,7 @@
 
 .maputnik-color-wrapper {
   position: relative;
+
   @include flex-row;
 }
 

From 03af10f850fec8817044320507addbcd0b27b437 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 7 Mar 2017 13:02:09 +0000
Subject: [PATCH 3/3] Fixed maputnik-color-swatch size.

---
 src/styles/_input.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/styles/_input.scss b/src/styles/_input.scss
index b4b6cf7..3f6682c 100644
--- a/src/styles/_input.scss
+++ b/src/styles/_input.scss
@@ -37,6 +37,8 @@
 .maputnik-color-swatch {
   height: 26px;
   width: 3px;
+  flex-shrink: 0;
+  flex-grow: 0;
 }
 
 // ARRAY