ding-image-editor 3.15.3

package/src/css/gridtable.styl

@@ -0,0 +1,45 @@
+/* GRID VISUAL OF FLIP AND ROTATE MENU  */
+.{prefix}-container
+    .{prefix}-grid-visual
+        display: none;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border: 1px solid rgba(255,255,255,0.7);
+    .{prefix}-main.{prefix}-menu-flip,
+    .{prefix}-main.{prefix}-menu-rotate
+        .tui-image-editor
+            transition: none;
+    .{prefix}-main.{prefix}-menu-flip .{prefix}-grid-visual,
+    .{prefix}-main.{prefix}-menu-rotate .{prefix}-grid-visual,
+    .{prefix}-main.{prefix}-menu-resize .{prefix}-grid-visual
+        display: block;
+    .{prefix}-grid-visual 
+        table
+            width: 100%;
+            height: 100%;
+            border-collapse: collapse;
+            td
+                border: 1px solid rgba(255,255,255,0.3);
+            td.dot:before
+                content: '';
+                position: absolute;
+                box-sizing: border-box;
+                width: 10px;
+                height: 10px;
+                border: 0;
+                box-shadow: 0 0 1px 0 rgba(0,0,0,0.3);
+                border-radius: 100%;
+                background-color: #fff;
+            td.dot.left-top:before
+                top: -5px;
+                left: -5px;
+            td.dot.right-top:before
+                top: -5px;
+                right: -5px;
+            td.dot.left-bottom:before
+                bottom: -5px;
+                left: -5px;
+            td.dot.right-bottom:before
+                bottom: -5px;
+                right: -5px;

package/src/css/icon.styl

@@ -0,0 +1,44 @@
+/* ICON */
+.{prefix}-container
+    .tie-icon-add-button .{prefix}-button
+        min-width: 42px;
+    .svg_ic-menu
+    .svg_ic-helpmenu
+        width: 24px;
+        height: 24px;
+    .svg_ic-submenu
+        width: 32px;
+        height: 32px;
+    .svg_img-bi
+        width: 257px;
+        height: 26px;
+
+    .{prefix}-help-menu
+    .{prefix}-controls
+        svg > use
+            display: none;
+        .enabled svg:hover > use.hover
+        .normal svg:hover > use.hover
+            display: block;
+        .active svg:hover > use.hover
+            display: none;
+        .on svg > use.hover,
+        .opened svg > use.hover
+            display: block;
+        svg > use.normal
+            display: block;
+        .active svg > use.active
+            display: block;
+        .enabled svg > use.enabled
+            display: block;
+        .active svg > use.normal,
+        .enabled svg > use.normal
+            display: none;
+        .help svg > use.disabled,
+        .help.enabled svg > use.normal
+            display: block;
+        .help.enabled svg > use.disabled
+            display: none;
+
+    .{prefix}-controls:hover
+        z-index: 3;

package/src/css/index.styl

@@ -0,0 +1,17 @@
+prefix = 'tui-image-editor'
+
+@import 'main.styl'
+@import 'gridtable.styl'
+@import 'submenu.styl'
+@import 'checkbox.styl'
+@import 'range.styl'
+@import 'position.styl'
+@import 'icon.styl'
+@import 'colorpicker.styl'
+@import 'buttons.styl'
+.{prefix}-container.top
+    &.{prefix}-top-optimization
+      .{prefix}-controls ul
+          text-align: right;
+      .{prefix}-controls-logo
+          display: none;

package/src/css/main.styl

@@ -0,0 +1,163 @@
+body > textarea
+    position: fixed !important;
+
++prefix-classes(prefix)
+  .-container
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    min-height: 300px;
+    height: 100%;
+    position: relative;
+    background-color: #282828;
+    overflow: hidden;
+    letter-spacing: 0.3px;
+  
+    div, ul, label, input, li
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      -ms-user-select: none; 
+      -moz-user-select: -moz-none;
+      -khtml-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+  
+    .-header
+        /* BUTTON AND LOGO */
+        min-width: 533px;
+        position: absolute;
+        background-color: #151515;
+        top: 0;
+        width: 100%;
+    .-header-buttons,
+    .-controls-buttons
+        float: right;
+        margin: 8px;
+
+    .-header-logo,
+    .-controls-logo
+        float: left;
+        width: 30%;
+        padding: 17px;
+
+    .-controls-logo,
+    .-controls-buttons
+        width: 270px;
+        height: 100%;
+        display: none;
+
+    .-header-buttons button,
+    .-header-buttons div,
+    .-controls-buttons button,
+    .-controls-buttons div
+        display: inline-block;
+        position: relative;
+        width: 120px;
+        height: 40px;
+        padding: 0;
+        line-height: 40px;
+        outline: none;
+        border-radius: 20px;
+        border: 1px solid #ddd;
+        font-family: 'Noto Sans', sans-serif;
+        font-size: 12px;
+        font-weight: bold;
+        cursor: pointer;
+        vertical-align: middle;
+        letter-spacing: 0.3px;
+        text-align: center;
+
+    .-download-btn
+        background-color: #fdba3b;
+        border-color: #fdba3b;
+        color: #fff;
+    .-load-btn
+        position: absolute;
+        left: 0;
+        right: 0;
+        display: inline-block;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        cursor: pointer;
+        opacity: 0;
+    .-main-container
+        position: absolute;
+        width: 100%;
+        top: 0;
+        bottom: 64px;
+    .-main
+        position: absolute;
+        text-align: center;
+        top: 64px;
+        bottom: 0;
+        right: 0;
+        left: 0;
+    .-wrap
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        overflow: auto;
+        .-size-wrap
+            display: table;
+            width: 100%;
+            height: 100%
+            .-align-wrap
+                display: table-cell;
+                vertical-align: middle;
+    .
+        position: relative;
+        display: inline-block;
+
+
+/* BIG MENU */
+.{prefix}-container
+    .{prefix}-menu, .{prefix}-help-menu
+        width: auto;
+        list-style: none;
+        padding: 0;
+        margin: 0 auto;
+        display: table-cell;
+        text-align: center;
+        vertical-align: middle;
+        white-space: nowrap;
+        > .{prefix}-item
+            position: relative;
+            display: inline-block;
+            border-radius: 2px;
+            padding: 7px 8px 3px 8px;
+            cursor: pointer;
+            margin: 0 4px;
+        > .{prefix}-item[tooltip-content]:hover
+            &:before
+                content: '';
+                position: absolute;
+                display: inline-block;
+                margin: 0 auto 0;
+                width: 0;
+                height: 0;
+                border-right: 7px solid transparent;
+                border-top: 7px solid #2f2f2f;
+                border-left: 7px solid transparent;
+                left: 13px;
+                top: -2px;
+            &:after
+                content: attr(tooltip-content);
+                position: absolute;
+                display: inline-block;
+                background-color: #2f2f2f;
+                color: #fff;
+                padding: 5px 8px;
+                font-size: 11px;
+                font-weight: lighter;
+                border-radius: 3px;
+                max-height: 23px;
+                top: -25px;
+                left: 0;
+                min-width: 24px;
+        > .{prefix}-item.active
+            background-color: #fff;
+            transition: all .3s ease;
+    .{prefix}-wrap
+        position: absolute;

package/src/css/position.styl

@@ -0,0 +1,309 @@
+/* POSITION LEFT */
+.{prefix}-container
+  &.left
+    .{prefix}-menu
+        > .{prefix}-item[tooltip-content]
+            &:before
+                left: 28px;
+                top: 11px;
+                border-right: 7px solid #2f2f2f;
+                border-top: 7px solid transparent;
+                border-bottom: 7px solid transparent;
+            &:after
+                top: 7px;
+                left: 42px;
+                white-space: nowrap;
+    .{prefix}-submenu
+        left: 0;
+        height: 100%;
+        width: 248px;
+    .{prefix}-main-container
+        left: 64px;
+        width: calc(100% - 64px);
+        height: 100%;
+    .{prefix}-controls
+        width: 64px;
+        height: 100%;
+        display: table;
+
+/* POSITION LEFT & RIGHT */
+.{prefix}-container
+  &.left, &.right
+    .{prefix}-menu
+        white-space: inherit;
+    .{prefix}-submenu
+        white-space: normal;
+        > div
+            vertical-align: middle;
+    .{prefix}-controls li
+        display: inline-block;
+        margin: 4px auto;
+    .{prefix}-icpartition
+        position: relative;
+        top: -7px;
+        width: 24px;
+        height: 1px;
+    .{prefix}-submenu
+        .{prefix}-partition
+            display: block;
+            width: 75%;
+            margin: auto;
+            > div
+                border-left: 0;
+                height:10px;
+                border-bottom: 1px solid #3c3c3c;
+                width: 100%;
+                margin: 0;
+        .{prefix}-submenu-align
+            margin-right: 0;
+        .{prefix}-submenu-item
+            li
+                margin-top: 15px;
+            .tui-colorpicker-clearfix li
+                margin-top: 0;
+
+    .{prefix}-checkbox-wrap.fixed-width
+        width: 182px;
+        white-space: normal;
+    .{prefix}-range-wrap.{prefix}-newline label.range
+        display: block;
+        text-align: left;
+        width: 75%;
+        margin: auto;
+    .{prefix}-range
+        width: 136px;
+
+
+/* POSITION RIGHT */
+.{prefix}-container
+  &.right
+    .{prefix}-menu
+        > .{prefix}-item[tooltip-content]
+            &:before
+                left: -3px;
+                top: 11px;
+                border-left: 7px solid #2f2f2f;
+                border-top: 7px solid transparent;
+                border-bottom: 7px solid transparent;
+            &:after
+                top: 7px;
+                left: unset;
+                right: 43px;
+                white-space: nowrap;
+    .{prefix}-submenu
+        right: 0;
+        height: 100%;
+        width: 248px;
+    .{prefix}-main-container 
+        right: 64px;
+        width: calc(100% - 64px);
+        height: 100%;
+    .{prefix}-controls
+        right: 0;
+        width: 64px;
+        height: 100%;
+        display: table;
+
+
+/* POSITION TOP & BOTTOM */
+.{prefix}-container
+  &.top, &.bottom
+    .{prefix}-submenu
+        .{prefix}-partition.only-left-right
+            display: none;
+
+
+/* POSITION BOTTOM */
+.{prefix}-container
+    &.bottom .tui-image-editor-submenu > div
+        padding-bottom: 24px;
+
+/* POSITION TOP */
+.{prefix}-container
+  &.top
+    .color-picker-control .triangle
+        top: -8px;
+        border-right: 7px solid transparent;
+        border-top: 0px;
+        border-left: 7px solid transparent;
+        border-bottom: 8px solid #fff;
+    .{prefix}-size-wrap
+        height: 100%;
+    .{prefix}-main-container
+        bottom: 0;
+    .{prefix}-menu
+        > .{prefix}-item[tooltip-content]
+            &:before
+                left: 13px;
+                border-top: 0;
+                border-bottom: 7px solid #2f2f2f;
+                top: 33px;
+            &:after
+                top: 38px;
+    .{prefix}-submenu
+        top: 0;
+        bottom: auto;
+        > div
+            padding-top: 24px;
+            vertical-align: top;
+    .{prefix}-controls-logo
+        display: table-cell;
+    .{prefix}-controls-buttons
+        display: table-cell;
+    .{prefix}-main
+        top: 64px;
+        height: calc(100% - 64px);
+    .{prefix}-controls
+        top: 0;
+        bottom: inherit;
+
+/* HELP MENUBAR POSITION TOP */
+.{prefix}-container
+    .{prefix}-help-menu
+        &.top
+            white-space: nowrap;
+            width: 506px;
+            height: 40px;
+            top: 8px;
+            left: 50%;
+            transform: translateX(-50%);
+            .tie-panel-history
+                top: 45px;
+            .opened .tie-panel-history:before
+                border-right: 8px solid transparent;
+                border-left: 8px solid transparent;
+                border-bottom: 8px solid #fff;
+                left: 90px;
+                top: -8px;
+            > .{prefix}-item[tooltip-content]
+                &:before
+                    left: 13px;
+                    top: 35px;
+                    border: none;
+                    border-bottom: 7px solid #2f2f2f;
+                    border-left: 7px solid transparent;
+                    border-right: 7px solid transparent;
+                &:after
+                    top: 41px;
+                    left: -4px;
+                    white-space: nowrap;
+            > .{prefix}-item[tooltip-content].opened
+                &:before,
+                &:after
+                    content: none;
+
+/* HELP MENUBAR POSITION BOTTOM */
+.{prefix}-container
+    .{prefix}-help-menu
+        &.bottom
+            white-space: nowrap;
+            width: 506px;
+            height: 40px;
+            bottom: 8px;
+            left: 50%;
+            transform: translateX(-50%);
+            .tie-panel-history
+                bottom: 45px;
+            .opened .tie-panel-history:before
+                border-right: 8px solid transparent;
+                border-left: 8px solid transparent;
+                border-top: 8px solid #fff;
+                left: 90px;
+                bottom: -8px;
+            > .{prefix}-item[tooltip-content]
+                &:before
+                    left: 13px;
+                    top: auto;
+                    bottom: 36px;
+                    border: none;
+                    border-top: 7px solid #2f2f2f;
+                    border-left: 7px solid transparent;
+                    border-right: 7px solid transparent;
+                &:after
+                    top: auto;
+                    left: -4px;
+                    bottom: 41px;
+                    white-space: nowrap;
+            > .{prefix}-item[tooltip-content].opened
+                &:before,
+                &:after
+                    content: none;
+
+/* HELP MENUBAR POSITION LEFT */
+.{prefix}-container
+    .{prefix}-help-menu
+        &.left
+            white-space: inherit;
+            width: 40px;
+            height: 506px;
+            left: 8px;
+            top: 50%;
+            transform: translateY(-50%);
+            .tie-panel-history
+                left: 140px;
+                top: -4px;
+            .opened .tie-panel-history:before
+                border-top: 8px solid transparent;
+                border-bottom: 8px solid transparent;
+                border-right: 8px solid #fff;
+                left: -8px;
+                top: 14px;
+            .{prefix}-item
+                margin: 4px auto;
+                padding: 6px 8px;
+            > .{prefix}-item[tooltip-content]
+                &:before
+                    left: 27px;
+                    top: 11px;
+                    border: none;
+                    border-right: 7px solid #2f2f2f;
+                    border-top: 7px solid transparent;
+                    border-bottom: 7px solid transparent;
+                &:after
+                    top: 7px;
+                    left: 40px;
+                    white-space: nowrap;
+            > .{prefix}-item[tooltip-content].opened
+                &:before,
+                &:after
+                    content: none;
+
+/* HELP MENUBAR POSITION RIGHT */
+.{prefix}-container
+    .{prefix}-help-menu
+        &.right
+            white-space: inherit;
+            width: 40px;
+            height: 506px;
+            right: 8px;
+            top: 50%;
+            transform: translateY(-50%);
+            .tie-panel-history
+                right: -30px;
+                top: -4px;
+            .opened .tie-panel-history:before
+                border-top: 8px solid transparent;
+                border-bottom: 8px solid transparent;
+                border-left: 8px solid #fff;
+                right: -8px;
+                top: 14px;
+            .{prefix}-item
+                margin: 4px auto;
+                padding: 6px 8px;
+            > .{prefix}-item[tooltip-content]
+                &:before
+                    left: -6px;
+                    top: 11px;
+                    border: none;
+                    border-left: 7px solid #2f2f2f;
+                    border-top: 7px solid transparent;
+                    border-bottom: 7px solid transparent;
+                &:after
+                    top: 7px;
+                    left: auto;
+                    right: 39px;
+                    white-space: nowrap;
+            > .{prefix}-item[tooltip-content].opened
+                &:before,
+                &:after
+                    content: none;

package/src/css/range.styl

@@ -0,0 +1,91 @@
+/* VIRTUAL RANGE */
+.{prefix}-container
+
+    .{prefix}-virtual-range-bar
+    .{prefix}-virtual-range-subbar
+    .{prefix}-virtual-range-pointer
+        .{prefix}-disabled
+            background-color: red;
+
+    .{prefix}-range
+        position: relative;
+        top: 5px;
+        width: 166px;
+        height: 17px;
+        display: inline-block;
+    .{prefix}-virtual-range-bar
+        top: 7px;
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        background-color: #666666;
+    .{prefix}-virtual-range-subbar
+        position: absolute;
+        height: 100%;
+        left: 0;
+        right: 0;
+        background-color: #d1d1d1;
+    .{prefix}-virtual-range-pointer
+        position: absolute;
+        cursor: pointer;
+        top: -5px;
+        left: 0;
+        width: 12px;
+        height: 12px;
+        background-color: #fff;
+        border-radius: 100%;
+    .{prefix}-range-wrap
+        display: inline-block;
+        margin-left: 4px;
+        &.short .tui-image-editor-range
+            width: 100px;
+    .color-picker-control
+        .{prefix}-range
+            width: 108px;
+            margin-left: 10px;
+        .{prefix}-virtual-range-pointer
+            background-color: #333;
+        .{prefix}-virtual-range-bar
+            background-color: #ccc;
+        .{prefix}-virtual-range-subbar
+            background-color: #606060;
+    .{prefix}-range-wrap.{prefix}-newline.short
+        margin-top: -2px;
+        margin-left: 19px;
+        label
+            color: #8e8e8e;
+            font-weight: normal;
+    .{prefix}-range-wrap label
+        vertical-align: baseline;
+        font-size: 11px;
+        margin-right: 7px;
+        color: #fff;
+    .{prefix}-range-value
+        cursor: default;
+        width: 40px;
+        height: 24px;
+        outline: none;
+        border-radius: 2px;
+        box-shadow: none;
+        border: 1px solid #d5d5d5;
+        text-align: center;
+        background-color: #1c1c1c;
+        color: #fff;
+        font-weight: lighter;
+        vertical-align: baseline;
+        font-family: 'Noto Sans', sans-serif;
+        margin-top: 15px;
+        margin-left: 4px;
+    .{prefix}-controls
+        position: absolute;
+        background-color: #151515;
+        width: 100%;
+        height: 64px;
+        display: table;
+        bottom: 0;
+        z-index: 2;
+    .{prefix}-icpartition
+        display: inline-block;
+        background-color: #444;
+        width: 1px;
+        height: 24px;