From a779369185546dc57fa303317aa206e6d48e5a6b Mon Sep 17 00:00:00 2001
From: elhombretecla <delacruzgarciajuan@gmail.com>
Date: Sat, 23 Apr 2016 11:42:17 +0200
Subject: [PATCH] add color th to options

---
 resources/styles/dependencies/helpers.scss  |  2 +-
 resources/styles/partials/colorpicker.scss  | 25 +++++++++++++++++++++
 src/uxbox/ui/workspace/sidebar/options.cljs |  7 ++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/resources/styles/dependencies/helpers.scss b/resources/styles/dependencies/helpers.scss
index 5f050a678a..26a81fc4fe 100644
--- a/resources/styles/dependencies/helpers.scss
+++ b/resources/styles/dependencies/helpers.scss
@@ -29,7 +29,7 @@ $br-big: 8px;
 .row-flex {
   align-items: center;
   display: flex;
-  margin-bottom: $x-small;
+  margin-bottom: $small;
 
   &.column {
     flex-direction: column;
diff --git a/resources/styles/partials/colorpicker.scss b/resources/styles/partials/colorpicker.scss
index 5d6be9d3eb..19fafa09c0 100644
--- a/resources/styles/partials/colorpicker.scss
+++ b/resources/styles/partials/colorpicker.scss
@@ -98,3 +98,28 @@
     background-color: white;
   }
 }
+
+/* NEW COLOR PICKER */
+/* color th */
+.color-data {
+  align-items: center;
+  display: flex;
+  margin-bottom: $x-small;
+  position: relative;
+
+  .color-info {
+    border: 1px solid $soft-ui-border;
+    border-radius: $br-small;
+    margin: 3px 0 0 $x-small;
+    padding: 0 $x-small;
+  }
+
+  .type {
+    color: $soft-ui-text;
+    margin-right: $x-small;
+  }
+
+  .number {
+    color: $intense-ui-text;
+  }
+}
diff --git a/src/uxbox/ui/workspace/sidebar/options.cljs b/src/uxbox/ui/workspace/sidebar/options.cljs
index c884864689..be90050c35 100644
--- a/src/uxbox/ui/workspace/sidebar/options.cljs
+++ b/src/uxbox/ui/workspace/sidebar/options.cljs
@@ -132,6 +132,13 @@
           :value (:stroke shape "")
           :on-change on-color-change}]]
 
+       ;; NEW COLOR PICKER
+       [:div.row-flex.color-data
+        [:span.color-th]
+        [:div.color-info
+         [:span.type "#"]
+         [:span.number "F1F1F1"]]]
+
        (recent-colors shape #(change-stroke {:color %}))
 
        ;; SLIDEBAR FOR ROTATION AND OPACITY