refactor(xod-client): replace svg Hue picker with the simplier versio…

…n to optimize performance

packages/xod-client/src/core/styles/components/ColorPicker.scss

@@ -2,36 +2,59 @@
   width: 220px;
 }
 .ColorPicker {
+  &, & * { @include noselect(); }
+
   width: 220px;
   position: relative;
-
   padding: 10px 0;
-  .HueSlider {
-    path.marker {
-      stroke-linecap: round;
+
+  .HueCircle {
+    z-index: 1;
+    margin: 0 20px;
+    position: relative;
+
+    & > * {
+      display: block;
+      position: absolute;
     }
-  }
+    &_area {
+      background: conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red);
+      border-radius: 50%;
+      z-index: 1;
+    }
+    &_inner {
+      border-radius: 50%;
+      left: 50%;
+      top: 50%;
+      background: $sidebar-color-bg;
+      z-index: 2;
+    }
+    &_pointer {
+      z-index: 3;
+      left: 50%;
+      top: 50%;
 
-  svg {
-    margin-bottom: -20px; // Compensate inner paddings
-  }
+      border: 1px solid #fff;
+      border-radius: 50%;
 
-  .ColorSlider_value, .ColorSlider_label,
-  .HueSlider_value, .HueSlider_label {
-    fill: $sidebar-color-text;
+      cursor: grab;
+      box-shadow: inset 0 0 2px 1px rgba(0,0,0,.3), 0 1px 2px 1px rgba(0,0,0,.3);
+    }
   }
 
-  .ColorPicker_preview {
+  &_preview {
+    z-index: 2;
     position: absolute;
     border-radius: 50%;
-    width: 25px;
-    height: 25px;
+    width: 30px;
+    height: 30px;
 
-    right: 20px;
-    margin-top: -20px;
+    top: 10px;
+    left: 10px;
   }
 
   .SatLightBox {
+    z-index: 3;
     position: absolute;
     overflow: hidden;
     border-radius: 5px;
@@ -40,7 +63,7 @@
 
     // position it inside Hue slider
     left: 55px;
-    top: 85px;
+    top: 65px;
 
     .SatLightBox_gradients {
       position: absolute;
@@ -77,17 +100,17 @@
       position: absolute;
       z-index: 2;
 
-      width: 6px;
-      height: 6px;
+      width: 10px;
+      height: 10px;
 
-      margin-left: -3px;
-      margin-top: -3px;
+      margin-left: -5px;
+      margin-top: -5px;
 
       border: 1px solid #fff;
       border-radius: 50%;
 
       cursor: grab;
-      boxShadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);
+      box-shadow: inset 0 0 2px 1px rgba(0,0,0,.3), 0 1px 2px 1px rgba(0,0,0,.3);
     }
   }
 
@@ -97,15 +120,17 @@
 
     & > div {
       clear: both;
+      margin-bottom: 2px;
     }
     span {
       float: right;
       width: 2em;
       text-align: left;
     }
     input {
+      @include select-text();
       float: right;
-      width: 60px;
+      width: 40px;
       border: 1px solid transparent;
       background: none;
       text-align: right;
@@ -116,6 +141,12 @@
         border-radius: 2px;
       }
     }
+    label {
+      float: none;
+      max-width: 120px;
+      width: 120px;
+      padding: 1px 0;
+    }
     label, input, span {
       color: $chalk;
       font-size: $font-size-m;