ace-colorpicker-rpk 0.0.12

package/src/scss/component/colorsets.scss

@@ -0,0 +1,89 @@
+
+.colorsets {
+    border-top: 1px solid #e2e2e2;
+
+    > .menu {
+        float: right;
+        padding: 10px 5px;
+        padding-right: 15px;
+
+        button {
+            border:0px;
+            font-size: 14px;
+            font-weight: 300;
+            font-family: serif, sans-serif;
+            outline:none;
+            cursor: pointer;
+        }
+    }
+
+    > .color-list {
+        margin-right: 30px;
+        display: block;
+        padding: 12px 0px 0px 12px;
+        box-sizing:border-box;
+        line-height: 0;
+
+        .color-item {
+            width: 13px;
+            height: 13px;
+            border-radius:2px;
+            display:inline-block;
+            margin-right:12px;
+            margin-bottom:12px;
+            position:relative;
+            background-size: contain;
+            overflow:hidden; 
+            box-sizing:border-box;
+            cursor: pointer;
+            vertical-align: middle;
+
+            &:hover {
+                transform: scale(1.2);
+            }
+
+            .empty {
+                position: absolute;
+                left:0px;
+                top:0px;
+                @include transparent-background();
+                width: 100%;
+                height: 100%;
+                padding: 0px;
+                margin: 0px;
+                pointer-events: none;
+            }
+
+            .color-view {
+                position: absolute;
+                left:0px;
+                top:0px;                
+                width: 100%;
+                height: 100%;
+                padding:0px;
+                margin:0px;
+                pointer-events: none;
+                border: 1px solid rgba(0, 0, 0, 0.1);
+                box-sizing: border-box;                
+            }
+        }
+
+        .add-color-item {
+            width: 13px;
+            height: 13px;
+            display:inline-block;
+            margin-right:12px;
+            margin-bottom:12px;
+            cursor: pointer;
+            line-height: 1;
+            text-align: center;
+            font-size: 16px;
+            font-weight: 400;
+            font-family: serif,sans-serif;
+            color: rgb(142, 142, 142);
+            vertical-align: middle;
+        }
+    }
+
+    
+}

package/src/scss/component/control.scss

@@ -0,0 +1,93 @@
+.control {
+    position: relative;
+    padding: 10px 0px 10px 0px;
+    user-select: none;
+
+    > .color, > .empty {
+      position: absolute;
+      left: 12px;
+      top: 14px;
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      box-sizing: border-box;
+    }
+
+    > .color {
+      border: 1px solid rgba(0, 0, 0, 0.1);
+    }
+
+    > .hue {
+      position: relative;
+      padding: 6px 16px;
+      margin: 0px 0px 0px 42px;
+      box-sizing: border-box;
+      cursor: pointer;
+
+      > .hue-container {
+        position: relative;
+        width: 100%;
+        height: 10px;
+        border-radius: 3px;
+      }
+    }
+
+
+    > .opacity {
+      position: relative;
+      padding: 3px 16px;
+      margin: 0px 0px 0px 42px;
+      box-sizing: border-box;
+      cursor: pointer;
+
+      > .opacity-container {
+        position: relative;
+        width: 100%;
+        height: 10px;
+        border-radius: 3px;
+      }
+    }
+
+    .drag-bar, .drag-bar2 {
+      position: absolute;
+      cursor: pointer;
+      top: 50%;
+      left: 0px;
+      transform: translateX(-50%) translateY(-50%);
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+    }  
+    
+    > .hue > .hue-container {
+        background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+    }
+
+    > .opacity > .opacity-container {
+        @include transparent-background();
+    
+        > .color-bar {
+            position:absolute;
+            display:block;
+            content:"";
+            left:0px;
+            right:0px;
+            bottom:0px;
+            top:0px;
+        }
+    }
+
+    > .empty {
+      @include transparent-background();
+    }
+
+    .drag-bar,
+    .drag-bar2 {
+        border: 1px solid rgba(0, 0, 0, 0.05);
+        box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
+        background-color: #fefefe;
+    
+    }
+    
+}
+

package/src/scss/component/gradient-editor.scss

@@ -0,0 +1,260 @@
+.gradient-editor {
+    position: relative;
+    user-select: none;
+
+    .tools {
+        padding: 4px 6px;
+    }
+
+    .unit {
+        display: grid;
+        grid-template-columns: 110px 35px 50px;
+        grid-column-gap: 5px;
+        font-size: 11px;
+
+        input,select {
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        input {
+            width: 35px;
+        }
+    }
+
+    [data-editor] {
+        display: none;
+        margin-top: 2px;
+
+        > label {
+            font-size: 11px;
+        }
+
+    }
+
+    &:not([data-selected-editor*='static-gradient']) {
+        [data-editor='gradient'],
+        [data-editor='tools'] {
+            display: block;
+        }
+    }
+
+    &[data-selected-editor='linear-gradient'], 
+    &[data-selected-editor='repeating-linear-gradient'], 
+    &[data-selected-editor='conic-gradient'], 
+    &[data-selected-editor='repeating-conic-gradient']
+    {
+        [data-editor='angle']
+        {
+            display: block;
+        }
+    }        
+
+    &[data-selected-editor='radial-gradient'], 
+    &[data-selected-editor='repeating-radial-gradient'], 
+    &[data-selected-editor='conic-gradient'], 
+    &[data-selected-editor='repeating-conic-gradient']
+    {
+        [data-editor='centerX'],
+        [data-editor='centerY']
+        {
+            display: block;
+        }
+    }             
+    
+    
+    &[data-selected-editor='radial-gradient'], 
+    &[data-selected-editor='repeating-radial-gradient']
+    {
+        [data-editor='radialType']
+        {
+            margin-top: 5px;
+            display: grid;
+            grid-template-columns: 110px 90px; 
+            grid-column-gap: 2px; 
+
+            select {
+                width: 100%;
+            }
+        }        
+    }          
+
+    .sub-editor {
+        padding: 0px 8px;
+    }
+
+    .gradient-steps {
+        position: relative;
+        height: 30px;
+    }
+
+    .hue-container,
+    .hue {
+        position: absolute;
+        left: 10px;
+        right: 10px;
+        top: 4px;
+        height: 14px;
+        border-radius: 10px;
+        border:1px solid $border-color;
+        box-sizing: border-box;
+        @include transparent-background();
+        pointer-events: all;
+    }
+
+    .hue {
+        pointer-events: none;
+        .step-list {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0px;
+            left:0px;
+            border-radius: 10px;
+            pointer-events: none;   
+            
+            @for $selectValue from 0 to 20 {
+                &[data-selected-index="#{$selectValue}"] {
+                    [data-index="#{$selectValue}"] {
+                        border:0px;
+                        transform: translateX(-50%) translateY(calc(100%));
+
+                        .arrow {
+                            display: block; 
+                        }
+                    }
+                }
+            }
+
+
+            .step {
+                pointer-events: all;
+                width: 10px;
+                height: 10px; 
+                border: 1px solid white;
+                box-sizing: border-box;
+                display: inline-block;
+                position: absolute;
+                top: 50%;
+                border-radius: 100%;
+                box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.5);                
+
+                &[data-cut='true'] {
+                    border-radius: 0%;
+
+                    .color-view {
+                        border-radius: 0%;
+                    }
+                }
+
+                transform: translateX(-50%) translateY(-50%);
+                @include transparent-background();
+
+                .color-view {
+                    position: absolute;
+                    left: 0px;
+                    top:0px;
+                    bottom:0px;
+                    right:0px;
+                    border-radius: 100%;
+                    pointer-events: none;                    
+                }
+
+                .arrow {
+                    position: absolute;
+                    left: 50%;
+                    display: none;
+                    top:0%;
+                    width:5px;
+                    height:5px;
+                    transform: translateX(-50%) translateY(-120%);
+                    pointer-events: none;        
+                    clip-path: polygon(40% 0%, 60% 0%, 60% 100%, 40% 100%);                    
+                }
+            }      
+        }
+    }
+
+    $range-thumb-width: 10px;
+    $range-thumb-height: 10px;
+    $range-thumb-color:  #556375;
+
+    input[type=range] {
+        appearance: none;
+        width: 100%;
+        margin: 6.2px 0;
+        background-color: transparent;
+    }
+    input[type=range]:focus {
+        outline: none;
+    }
+    input[type=range]::-webkit-slider-runnable-track {
+        width: 100%;
+        height: 1px;
+        cursor: pointer;
+        background: $range-thumb-color;
+        border-radius: 0px;
+        border: 0px solid #010101;
+    }
+    input[type=range]::-webkit-slider-thumb {
+        height: $range-thumb-width;
+        width: $range-thumb-width;
+        border-radius: 10px;
+        background: $range-thumb-color;
+        cursor: pointer;
+        appearance: none;
+        margin-top: -5px;
+    }
+    input[type=range]:focus::-webkit-slider-runnable-track {
+        background: #3174ad;
+    }
+    input[type=range]::-moz-range-track {
+        width: 100%;
+        height: 1px;
+        cursor: pointer;
+        background: $range-thumb-color;
+        border-radius: 0px;
+        border: 0px solid #010101;
+    }
+    input[type=range]::-moz-range-thumb {
+        border: 1px solid #000000;
+        height: $range-thumb-width;
+        width: $range-thumb-height;
+        border-radius: 9px;
+        background: $range-thumb-color;
+        cursor: pointer;
+    }
+    input[type=range]::-ms-track {
+        width: 100%;
+        height: 1px;
+        cursor: pointer;
+        background: transparent;
+        border-color: transparent;
+        color: transparent;
+    }
+    input[type=range]::-ms-fill-lower {
+        background: $range-thumb-color;
+        border: 0px solid #010101;
+        border-radius: 0px;
+        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+    }
+    input[type=range]::-ms-fill-upper {
+        background: $range-thumb-color;
+        border: 0px solid #010101;
+        border-radius: 0px;
+    }
+    input[type=range]::-ms-thumb {
+        height: $range-thumb-width;
+        width: $range-thumb-height;
+        border-radius: 9px;
+        background: $range-thumb-color;
+        cursor: pointer;
+    }
+    input[type=range]:focus::-ms-fill-lower {
+        background: $range-thumb-color;
+    }
+    input[type=range]:focus::-ms-fill-upper {
+        background: $range-thumb-color;
+    }
+    
+}

package/src/scss/component/gradient-picker.scss

@@ -0,0 +1,241 @@
+&.gradient-picker {
+  
+  width: 460px;
+  box-sizing: border-box;
+
+  .gradient-body {
+    display: grid;
+    grid-template-columns: 1fr 224px; 
+    // grid-column-gap: 4px;
+
+    > div:first-child {
+      padding: 5px;
+      border-right: 1px solid $border-color;
+    }
+  }
+
+  .popup-item {
+    margin-bottom: 5px;
+  }
+
+  .grid-2 {
+    display: grid;
+    grid-template-columns: 60px 1fr;
+
+    label {
+      font-size: 11px;
+      padding-right: 2px;
+      text-align: left;
+    }
+  }
+
+  label {
+    font-size: 11px;
+  }
+
+  .gradient-preview {
+    width: 100%;
+    height: 100px;
+    position: relative;
+    margin-bottom: 5px;
+    border: 1px solid $border-color;
+
+    border-radius: 3px;
+    overflow: hidden;
+    @include transparent-background();
+
+    .gradient-view {
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+    }
+  }
+
+  .picker-tab {
+    user-select: none;
+    .picker-tab-list {
+      text-align: center;
+      padding: 2px 5px;
+
+      @each $imageType in linear-gradient,
+        repeating-linear-gradient, radial-gradient, repeating-radial-gradient,
+        conic-gradient, repeating-conic-gradient
+      {
+        &[data-value="#{$imageType}"]
+          .picker-tab-item[data-selected-value="#{$imageType}"] {
+          // background-color: rgba(0, 0, 255, 0.8);
+          box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
+          .icon {
+            svg {
+              path {
+                fill: rgba(0, 0, 255, 0.5);
+              }
+            }
+          }
+        }
+      }
+
+      .picker-tab-item {
+        display: inline-block;
+        vertical-align: middle;
+        height: 20px;
+        width: 20px;
+        box-sizing: border-box;
+        // border: 1px solid $border-color;
+        cursor: pointer;
+        position: relative;
+        border-radius: 20%;
+
+        .icon {
+          pointer-events: none;
+          border-radius: 100%;
+          display: inline-block;
+          width: 90%;
+          height: 90%;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translateX(-50%) translateY(-50%);
+
+          svg {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        &[data-selected-value="static-gradient"] .icon {
+          background-image: linear-gradient(to right, red, red);
+        }
+
+        &[data-selected-value="linear-gradient"] .icon {
+          background-image: linear-gradient(to right, black, gray);
+        }
+
+        &[data-selected-value="radial-gradient"] .icon {
+          background-image: radial-gradient(closest-side, black, #ebf8e1, gray);
+        }
+
+        &[data-selected-value="conic-gradient"] .icon {
+          background-image: conic-gradient(black, #ebf8e1);
+        }
+
+        &[data-selected-value="repeating-linear-gradient"] .icon {
+          background-image: repeating-linear-gradient(
+            45deg,
+            #3f87a6,
+            #ebf8e1 15%,
+            #f69d3c 20%
+          );
+        }
+
+        &[data-selected-value="repeating-radial-gradient"] .icon {
+          background-image: repeating-radial-gradient(
+            circle,
+            #3f87a6,
+            #ebf8e1 15%,
+            #f69d3c 20%
+          );
+        }
+
+        &[data-selected-value="repeating-conic-gradient"] .icon {
+          background-image: repeating-conic-gradient(
+            #3f87a6,
+            #ebf8e1 5%,
+            #f69d3c 10%
+          );
+        }
+      }
+    }
+
+    .picker-gradient-selector {
+      padding: 2px 10px;
+      .gradient-steps {
+        position: relative;
+        display: block;
+        height: 30px;
+
+        .hue-container {
+          width: 100%;
+          height: 14px;
+          position: absolute;
+          z-index: 0;
+          @include transparent-background();
+          box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
+        }
+
+        .hue {
+          position: relative;
+          padding: 0px;
+          margin: 0px;
+          cursor: pointer;
+
+          > .step-list {
+            position: relative;
+            width: 100%;
+            cursor: copy;
+            height: 14px;
+            z-index: 1;
+
+            &.mode-drag {
+              cursor: pointer;
+            }
+          }
+
+          .drag-bar {
+            border: 0px;
+            background-color: transparent;
+            border: 2px solid white;
+            box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.6);
+            width: 10px;
+            height: 10px;
+            transform: none;
+            border-radius: 50%;
+            display: inline-block;
+            left: 0px;
+            top: 17px;
+            transform: translateX(-50%);
+            position: absolute;
+            background-color: rgba(white, 0.8);
+            cursor: pointer;
+            transition: top 0.3s ease-out;
+
+            .guide-line {
+              pointer-events: none;
+              position: absolute;
+              width: 1px;
+              height: 0px;
+              bottom: 8px;
+              left: 3px;
+              transform: translateX(-1px);
+              transition: all 0.3s ease-out;
+            }
+
+            &.selected {
+              z-index: 1;
+              top: 30px;
+              .guide-line {
+                height: 17px;
+              }
+
+              .guide-change {
+                opacity: 1;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+   
+  .easylogic-colorpicker {
+    width: 223px;
+    border-radius: 0px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    border: 0px;
+    // border-left: 1px solid $border-color;
+    box-shadow: none;
+  }
+}