ace-colorpicker-rpk 0.0.12

package/src/scss/component/information.scss

@@ -0,0 +1,141 @@
+.information {
+    /*border-top: 1px solid #e8e8e8;*/
+    position: relative;
+    box-sizing: padding-box;
+
+    > input {
+      position: absolute;
+      font-size: 10px;
+      height: 20px;
+      bottom: 20px;
+      padding: 0 0 0 2px;
+      box-sizing: border-box;
+      user-select: text;
+
+      &[type=number] {
+        appearance: none;
+      }
+
+      &[type=number]::-webkit-inner-spin-button,
+      &[type=number]::-webkit-outer-spin-button
+      {
+        appearance: none;
+        margin: 0;
+      }
+    }
+
+    &.hex > .information-item.hex {
+      display: flex;
+    }
+    
+    &.rgb > .information-item.rgb {
+      display: flex;
+    }
+    
+    &.hsl > .information-item.hsl {
+      display: flex;
+    }
+    
+    > .information-item {
+      display:none;
+      position: relative;
+      padding: 0px 5px;
+      padding-left: 9px;
+      box-sizing: border-box;
+      margin-right:40px;
+
+      > .input-field {
+        display:block;
+        flex:1;
+        padding: 3px;
+        box-sizing: border-box;
+        position: relative;
+ 
+        > .title {
+          text-align:center;
+          font-size:12px;
+          color:#a9a9a9;
+          padding-top:2px;
+          cursor: pointer;
+          user-select: none;
+        }
+
+        input {
+          text-align: center;
+          width:100%;
+          padding:3px;
+          height: 21px;
+          font-size:11px;
+          color: #333;
+          box-sizing: border-box;
+          user-select: text;
+          border: 1px solid #cbcbcb;
+          border-radius:2px;
+
+          &[type=number] {
+            appearance: none;
+          }
+
+          &[type=number]::-webkit-inner-spin-button,
+          &[type=number]::-webkit-outer-spin-button
+          {
+            appearance: none;
+            margin: 0;
+          }
+        }
+
+        &.hsl-l,
+        &.hsl-s {
+          
+          input[type=number] {
+            padding-left: 1px;
+            padding-right: 10px;
+
+          }
+          
+        }
+
+        .postfix {
+          display:inline-block;
+          position: absolute;
+          right:3px;
+          top:2px;
+          height: 21px;
+          line-height: 2;
+          padding: 2px;
+          box-sizing: border-box;
+          text-align:center;
+          font-size: 11px;
+        }
+      }
+    }
+    
+    > .information-change {
+      position:absolute;
+      display:block;
+      width:40px;
+      top:0px;
+      right:0px;
+      bottom:0px;
+      text-align: center;
+      box-sizing: border-box;
+      padding-top:5px;
+
+      > .format-change-button {
+        box-sizing: border-box;
+        background:transparent;
+        border:0px;
+        cursor:pointer;
+        outline:none;
+      }
+    }
+
+    > .title {
+        color: #a3a3a3;
+    }
+
+    > .input {
+        color: #333;
+    }
+    
+}

package/src/scss/component/palette.scss

@@ -0,0 +1,45 @@
+ 
+
+  .color {
+    position: relative;
+    height: 120px;
+    overflow: hidden;
+    cursor: pointer;
+
+    > .saturation {
+      position: relative;
+      width: 100%;
+      height: 100%;
+
+      > .value {
+        position: relative;
+        width: 100%;
+        height: 100%;
+
+        > .drag-pointer {
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          border-radius: 50%;
+          transform: translateX(-50%) translateY(-50%);
+        }
+      } 
+
+    }
+
+    > .saturation {
+        background-color: rgba(204, 154, 129, 0);
+        background-image: linear-gradient(to right, #FFF, rgba(204, 154, 129, 0));
+        background-repeat: repeat-x; 
+    
+        > .value {
+            background-image: linear-gradient(to top, #000000, rgba(204, 154, 129, 0));
+    
+            > .drag-pointer {
+                border: 1px solid #fff;
+                box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05);
+            }
+        }
+    }
+    
+}

package/src/scss/index.scss

@@ -0,0 +1,5 @@
+@import './mixins';
+
+@import './colorview';    
+@import './colorpicker';
+              

package/src/scss/mixins.scss

@@ -0,0 +1,21 @@
+@mixin transparent-background () {
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC") repeat;    
+}
+
+@mixin arrow_top ($pixel, $color) {
+    width: 0; 
+    height: 0; 
+    border-left: $pixel solid transparent;
+    border-right: $pixel solid transparent;    
+    border-bottom: $pixel solid $color;
+    pointer-events: none;
+}
+
+@mixin arrow_bottom ($pixel, $color) {
+    width: 0; 
+    height: 0; 
+    border-left: $pixel solid transparent;
+    border-right: $pixel solid transparent;    
+    border-top: $pixel solid $color;
+    pointer-events: none;
+}

package/src/scss/themes/macos.scss

@@ -0,0 +1,71 @@
+&.macos {
+    .colorpicker-body {
+        .wheel {
+            width: 224px;
+            height: 224px;
+            position: relative;
+            box-sizing: border-box;
+
+            .wheel-canvas {
+                width: 214px;
+                height: 214px;
+                border-radius: 50%;
+                position: absolute;
+                left:5px;
+                top:5px;
+            }
+
+            .drag-pointer {
+                display:inline-block;
+                position: absolute;
+                width: 10px;
+                height: 10px;
+                left:50%;
+                top:50%;
+                border:1px solid white;
+                border-radius: 50%;
+                transform: translateX(-50%) translateY(-50%);
+                z-index:2;
+            }
+        }
+
+    }
+
+    .control {
+        padding-top: 0px;
+
+        > .color, > .empty {
+            top: 4px;
+        }
+    }
+
+
+    .value {
+        position: relative;
+        padding: 6px 16px;
+        margin: 0px 0px 0px 42px;
+        box-sizing: border-box;
+        cursor: pointer;
+
+        > .value-container {
+            position: relative;
+            width: 100%;
+            height: 10px;
+            border-radius: 3px;
+            background-image: linear-gradient(to right, #000000 0%, rgba(255, 255, 255, 0) 100%);    
+            box-sizing: border-box;
+            
+            .drag-bar {
+                position: absolute;
+                cursor: pointer;
+                top: 50%;
+                left: 0px;
+                transform: translateX(-50%) translateY(-50%);
+                width: 12px;
+                height: 12px;
+                border-radius: 50%;
+            }  
+              
+        }
+    }
+}

package/src/scss/themes/mini-vertical.scss

@@ -0,0 +1,94 @@
+&.mini-vertical {
+    width: 180px;
+    display: inline-block;
+
+    .color {
+        display:inline-block;
+        width: 140px;
+        height: 160px;
+        vertical-align: middle;
+    }
+
+    .control {
+        height: 160px;
+        padding: 0px;
+        vertical-align: middle;
+        display:inline-block;
+
+        .hue, .opacity {
+            margin: 0px;
+            padding:0px;
+            width: 20px;
+            display:inline-block;
+            vertical-align: middle;
+            height: 100%;
+            position: relative;
+        }
+
+        .hue > .hue-container {
+            border-radius:0px;
+            overflow:hidden;
+            height: 100%;
+            background: linear-gradient(to top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);            
+        }
+      
+
+        .opacity > .opacity-container {
+            border-radius: 0px;
+            overflow: hidden;
+            height: 100%;            
+            width: 20px;
+        }
+        
+
+        .drag-bar, .drag-bar2 {
+            border:0px;
+            background-color: transparent;
+            height:2px;
+            width:100%;
+            box-sizing: border-box;
+            box-shadow: none;
+            transform: none;
+
+            &.last {
+                &:before, &:after {
+                    top: 2px;
+                }
+            }
+
+            &.first {
+                &:before, &:after {
+                    top: -1px;
+                }
+            }
+
+            &:before {
+                content: "";
+                position: absolute;
+                left: 0px;
+                top: 2px;
+                width: 0; 
+                height: 0;
+                transform: translateY(-50%); 
+                border-top: 4px solid transparent;
+                border-bottom: 4px solid transparent;
+                border-left: 4px solid black;
+            }
+
+            &:after {
+                content: "";
+                position: absolute;
+                top: 2px;
+                right: 0px;
+                width: 0; 
+                height: 0; 
+                transform: translateY(-50%);                
+                border-top: 4px solid transparent;
+                border-bottom: 4px solid transparent;
+                border-right: 4px solid black;
+            }            
+        }
+
+    }
+
+}

package/src/scss/themes/mini.scss

@@ -0,0 +1,76 @@
+&.mini {
+    width: 180px;
+    display: inline-block;
+
+    .control {
+        padding: 0px;
+
+
+        .hue, .opacity {
+            margin: 0px;
+            padding:0px;
+        }
+
+        .hue > .hue-container {
+            border-radius:0px;
+            overflow:hidden;
+            height: 20px;
+        }
+
+        .opacity > .opacity-container {
+            border-radius: 0px;
+            overflow: hidden;
+            height: 20px;            
+        }
+        
+
+        .drag-bar, .drag-bar2 {
+            border:0px;
+            background-color: transparent;
+            height:100%;
+            width:5px;
+            box-sizing: border-box;
+            box-shadow: none;
+
+            &.last {
+                &:before, &after {
+                    left: 1px;
+                }
+            }
+
+            &.first {
+                &:before, &:after {
+                    left: 3px;
+                }
+            }
+
+            &:before {
+                content: "";
+                position: absolute;
+                left: 2px;
+                top: 0px;
+                width: 0; 
+                height: 0;
+                transform: translateX(-50%); 
+                border-left: 4px solid transparent;
+                border-right: 4px solid transparent;
+                border-top: 4px solid black;
+            }
+
+            &:after {
+                content: "";
+                position: absolute;
+                left: 2px;
+                bottom: 0px;
+                width: 0; 
+                height: 0; 
+                transform: translateX(-50%);                
+                border-left: 4px solid transparent;
+                border-right: 4px solid transparent;
+                border-bottom: 4px solid black;
+            }            
+        }
+
+    }
+
+}

package/src/scss/themes/palette.scss

@@ -0,0 +1,85 @@
+&.palette {
+  border-radius: 3px;
+  box-shadow: none;
+
+  > .colorpicker-body {
+      
+    > .color {
+      display: none;
+    }
+
+    > .control { 
+      display: none;
+    }
+
+    > .information {
+      display: none;
+    }
+
+    > .colorsets {
+      box-sizing: border-box;
+      border-top:0px;
+
+      > .color-list {
+        .color-item {
+          width: 15px;
+          height: 15px;
+          margin-right: 10px;
+          margin-bottom: 10px;
+        }
+      }
+    }
+
+    > .color-chooser {
+      display: none;
+      box-sizing: border-box;
+      &.open {
+        display: block;
+        top:-1px;
+        left:-1px;
+        right:-1px;
+        bottom: auto;
+        border-radius: 3px;
+        border: 1px solid #d8d8d8;
+        box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.12);      
+        .color-chooser-container {
+          position: relative;
+          top: auto;
+          left: auto;
+          right: auto;
+          bottom: auto;
+          background-color: white;
+          box-sizing: border-box;
+          border-radius: 2px;
+
+          .colorsets-item-header {
+            position: relative;
+            left:auto;
+            top:auto;
+            right:auto;
+            bottom:auto;
+            border-top-left-radius: 3px;
+            border-top-right-radius: 3px;
+          }
+
+          .colorsets-list {
+            position: relative;
+            top: auto;
+            left: auto;
+            right: auto;
+            bottom: auto;
+            overflow: auto;
+
+            .colorsets-item:last-child {
+              border-bottom-left-radius: 3px;
+              border-bottom-right-radius: 3px;
+            }
+          }
+        } 
+      }
+    }
+
+
+  }
+
+}

package/src/scss/themes/ring.scss

@@ -0,0 +1,57 @@
+&.ring {
+    .colorpicker-body {
+
+        > .color {
+            position: absolute;
+            width: 120px;
+            height: 120px;
+            left: 52px;
+            top: 52px;
+        }
+
+        .wheel {
+            width: 224px;
+            height: 224px;
+            position: relative;
+            box-sizing: border-box;
+
+            .wheel-canvas {
+                width: 214px;
+                height: 214px;
+                border-radius: 50%;
+                position: absolute;
+                left:5px;
+                top:5px;
+            }
+
+            .drag-pointer {
+                display:inline-block;
+                position: absolute;
+                width: 10px;
+                height: 10px;
+                left:50%;
+                top:50%;
+                border:1px solid white;
+                border-radius: 50%;
+                transform: translateX(-50%) translateY(-50%);
+                z-index:2;
+            }
+        }
+
+    }
+
+    .control {
+        padding-top: 0px;
+
+        .value {
+            display: none;
+        }
+
+        > .color, > .empty {
+            top: -17px;
+            width: 30px;
+            height: 30px;
+            border-radius: 2px;
+        }
+    }
+}