Support sketch style

Support color palette for image
kode-team · Mar 15, 2018 · bec3345 · bec3345
1 parent 1f0351d
commit bec3345
Show file tree

Hide file tree

Showing 26 changed files with 624 additions and 4,622 deletions.
diff --git a/ChangeLogs.md b/ChangeLogs.md
@@ -1,7 +1,8 @@
 
 # Change Logs 
 
-## 1.6.2 
+## 1.6.3 
+* Support Sketch Style 
 * support color palette for image 
 * support parsing for number color code (ex: 0xffffff ->  {hex, r, g, b, a})
 

diff --git a/README.md b/README.md
@@ -139,6 +139,21 @@ You can set custom color paletts (ex : material, ...).
 
 <img width="235px"  src="https://easylogic.github.com/codemirror-colorpicker/resources/image/scalecolors.png" align="absmiddle" />
 
+## Support Sketch Style 
+
+```javascript
+{
+  colorpicker : {
+      mode : 'edit',
+      type: 'sketch'
+  }
+}
+
+```
+
+
+<img width="235px"  src="https://easylogic.github.com/codemirror-colorpicker/resources/image/sketch-type.png" align="absmiddle" />
+
 # Developments 
 
 ## local dev 

diff --git a/addon/codemirror-colorpicker.css b/addon/codemirror-colorpicker.css
@@ -31,7 +31,8 @@
   background-color: #fff;
   border-radius: 3px;
   -webkit-box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.12);
-          box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.12); }
+          box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.12);
+  /* theme */ }
   .codemirror-colorpicker > .arrow {
     position: absolute;
     top: -10px;
@@ -513,6 +514,85 @@
                 padding: 0px;
                 margin: 0px;
                 pointer-events: none; }
+  .codemirror-colorpicker.sketch {
+    border-radius: 5px; }
+    .codemirror-colorpicker.sketch > .color {
+      margin: 10px 10px 2px 10px;
+      -webkit-box-sizing: border-box;
+              box-sizing: border-box;
+      height: 150px; }
+    .codemirror-colorpicker.sketch > .control {
+      padding: 0px; }
+      .codemirror-colorpicker.sketch > .control > .color, .codemirror-colorpicker.sketch > .control > .empty {
+        position: absolute;
+        right: 10px;
+        left: auto;
+        top: 1px;
+        width: 26px;
+        height: 26px;
+        border-radius: 2px;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box; }
+      .codemirror-colorpicker.sketch > .control > .color {
+        -webkit-box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.5);
+                box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.5); }
+      .codemirror-colorpicker.sketch > .control > .hue {
+        position: relative;
+        padding: 2px 2px 2px 10px;
+        margin: 0px 38px 0px 0px; }
+        .codemirror-colorpicker.sketch > .control > .hue > .hue-container {
+          border-radius: 0px; }
+      .codemirror-colorpicker.sketch > .control > .opacity {
+        position: relative;
+        padding: 2px 2px 2px 10px;
+        margin: 0px 38px 0px 0px; }
+        .codemirror-colorpicker.sketch > .control > .opacity > .opacity-container {
+          border-radius: 0px; }
+      .codemirror-colorpicker.sketch > .control .drag-bar, .codemirror-colorpicker.sketch > .control .drag-bar2 {
+        border-radius: 0px;
+        top: 0px !important;
+        left: -2px;
+        margin-top: 1px !important;
+        width: 2px;
+        height: auto;
+        border-radius: 1px;
+        bottom: 1px !important; }
+    .codemirror-colorpicker.sketch > .information .information-change {
+      display: none; }
+    .codemirror-colorpicker.sketch > .information.rgb .information-item.rgb {
+      display: inherit; }
+    .codemirror-colorpicker.sketch > .information.hex .information-item.hex {
+      display: inherit; }
+    .codemirror-colorpicker.sketch > .information .information-item {
+      display: -webkit-inline-box !important;
+      display: -ms-inline-flexbox !important;
+      display: inline-flex !important;
+      margin-right: 0px; }
+      .codemirror-colorpicker.sketch > .information .information-item > .input-field > .title {
+        color: black;
+        font-size: 11px; }
+      .codemirror-colorpicker.sketch > .information .information-item > .input-field:last-child:not(:first-child) {
+        padding-right: 0px; }
+    .codemirror-colorpicker.sketch > .information .information-item.hsl {
+      display: none !important; }
+    .codemirror-colorpicker.sketch > .information .information-item.hex {
+      width: 80px;
+      padding-right: 0px;
+      padding-left: 5px; }
+    .codemirror-colorpicker.sketch > .information .information-item.rgb {
+      width: 140px;
+      padding-left: 0px; }
+    .codemirror-colorpicker.sketch > .colorsets > .menu {
+      display: none; }
+    .codemirror-colorpicker.sketch > .colorsets > .color-list {
+      margin-right: 0px;
+      padding-right: 12px; }
+      .codemirror-colorpicker.sketch > .colorsets > .color-list .color-item {
+        width: 16px;
+        height: 16px;
+        border-radius: 3px;
+        margin-right: 9px;
+        margin-bottom: 10px; }
 
 .colorsets-contextmenu {
   position: fixed;