From 779a59c87e3c2446827b2792e22b93b63d73f529 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Wed, 28 Feb 2018 04:29:28 +0200
Subject: [PATCH] Make colour picker a popout and style it

---
 .../partials/generic/forms/colourpicker.scss  | 50 +++++++++++++++++++
 .../styles/partials/generic/forms/index.scss  |  1 +
 .../src/ui/components/bd/setting/Colour.vue   | 17 -------
 3 files changed, 51 insertions(+), 17 deletions(-)
 create mode 100644 client/src/styles/partials/generic/forms/colourpicker.scss

diff --git a/client/src/styles/partials/generic/forms/colourpicker.scss b/client/src/styles/partials/generic/forms/colourpicker.scss
new file mode 100644
index 00000000..0d937390
--- /dev/null
+++ b/client/src/styles/partials/generic/forms/colourpicker.scss
@@ -0,0 +1,50 @@
+.bd-form-colourpicker .bd-title {
+    display: flex;
+}
+
+.bd-form-colourpicker .bd-title h3 {
+    font-weight: 500;
+    color: #f6f6f7;
+    flex: 1;
+    line-height: 24px;
+    margin-bottom: 0;
+    margin-top: 0;
+}
+
+.bd-colourpicker-swatch {
+    width: 50px;
+    height: 30px;
+    border-radius: 3px;
+    border: 1px solid hsla(0,0%,100%,.1);
+}
+
+.bd-form-colourpicker {
+    position: relative;
+
+    .vc-chrome {
+        position: absolute;
+        right: 10px;
+        top: 35px;
+        border-radius: 3px;
+
+        .vc-chrome-body {
+            background: #36393e;
+
+            .vc-chrome-fields-wrap {
+                .vc-input__input {
+                    background: #1e2124;
+                    color: #FFF;
+                    box-shadow: inset 0 0 0 1px #000;
+                }
+
+                .vc-chrome-toggle-icon-highlight {
+                    background: #1e2124;
+                }
+
+                .vc-chrome-toggle-btn svg path {
+                    fill: #FFF;
+                }
+            }
+        }
+    }
+}
diff --git a/client/src/styles/partials/generic/forms/index.scss b/client/src/styles/partials/generic/forms/index.scss
index 92671d26..e1154656 100644
--- a/client/src/styles/partials/generic/forms/index.scss
+++ b/client/src/styles/partials/generic/forms/index.scss
@@ -6,3 +6,4 @@
 @import './sliders.scss';
 @import './switches.scss';
 @import './arrays.scss';
+@import './colourpicker.scss';
diff --git a/client/src/ui/components/bd/setting/Colour.vue b/client/src/ui/components/bd/setting/Colour.vue
index 8aa801a7..7a7c5abd 100644
--- a/client/src/ui/components/bd/setting/Colour.vue
+++ b/client/src/ui/components/bd/setting/Colour.vue
@@ -67,21 +67,4 @@
     .bd-hidden {
         display: none;
     }
-    .bd-form-colourpicker .bd-title {
-        display: flex;
-    }
-    .bd-form-colourpicker .bd-title h3 {
-        font-weight: 500;
-        color: #f6f6f7;
-        flex: 1;
-        line-height: 24px;
-        margin-bottom: 0;
-        margin-top: 0;
-    }
-    .bd-colourpicker-swatch {
-        width: 50px;
-        height: 30px;
-        border-radius: 3px;
-        border: 1px solid hsla(0,0%,100%,.1);
-    }
 </style>