morning-ui/src/lib/components/colorpicker/index.less

modern efficient user interface, using human-friendly HTML

.setup-alpha-bg() {
    .alpha-bg-1,
    .alpha-bg-2,
    .alpha-bg-3,
    .alpha-bg-4{
        background-size: 16px;
        height: 8px;
        background-color: #DDD;
    }

    .alpha-bg-1,
    .alpha-bg-3{
        background-image: ~'-webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #0000), color-stop(0.5, #fff), to(#fff))';
    }

    .alpha-bg-2,
    .alpha-bg-4{
        background-image: ~'-webkit-gradient(linear,  0 0, 100% 0, color-stop(0.5, #fff), color-stop(0.5, #0000), to(#0000))';
    }
}

.setup-color() {
    .color{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        box-shadow: 0 0 4px inset rgba(0, 0, 0, 0.25);
    }
}

mor-colorpicker{
    display: inline-block;
    position: relative;
    vertical-align: top;
    box-sizing: border-box;
    user-select: none;

    .setup-form-without-form-width();
    .setup-alpha-bg();
    .setup-color();

    .cleanbtn{
        left: 0;
    }

    .preview-wrap{
        border: 1px @colorFormBorder solid;
        border-radius: @borderRadius;
        box-sizing: border-box;
        margin-bottom: 5px;

        &.focus{
            .setup-form-focus();
        }
    }

    .preview{
        box-sizing: border-box;
        border-radius: @borderRadius;
        cursor: pointer;
        overflow: hidden;
        position: relative;
    }

    &.si-m{
        .preview-wrap{
            width: @formHeight;
            padding: 3px;
        }

        .preview{
            width: @formHeight - 8px;
            height: @formHeight - 8px;
        }
    }

    &.si-s{
        .preview-wrap{
            width: @formHeightS;
            padding: 2px;
        }

        .preview{
            width: @formHeightS - 6px;
            height: @formHeightS - 6px;
        }
    }

    &.si-xs{
        .preview-wrap{
            width: @formHeightXs;
            padding: 1px;
        }

        .preview{
            width: @formHeightXs - 4px;
            height: @formHeightXs - 4px;
        }
    }

    &.st-normal{}

    &.st-disabled,
    &.st-readonly{
        .preview-wrap{
            border-color: @colorFormBorderDisable;
        }

        .preview{
            .color{
                box-shadow: 0 0 6px inset #000;
                cursor: default;
            }
        }
    }

    // default status
    &{
        .si-m;
        .st-normal;
    }
}

.mor-colorpicker-popover{
    width: @fontSize*16;
    user-select: none;

    .popover-con .popover-body{
        padding: 0;
    }

    .picker{
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        border-radius: @borderRadius;
        overflow: hidden;
        background: @colorWhite;
        position: relative;
    }

    .panel{
        position: relative;
        height: @fontSize*8;
        cursor: crosshair;
        overflow: hidden;

        .mask-white{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            background: ~'-webkit-linear-gradient(left, #FFF, #FFF0)';
        }

        .mask-black{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: ~'-webkit-linear-gradient(#0000, #000)';
            z-index: 2;
        }

        .straw{
            position: absolute;
            left: 100px;
            top: 30px;
            width: 14px;
            height: 14px;
            box-sizing: border-box;
            border-radius: 5em;
            border: 1px solid @colorWhite;
            box-shadow: 0 0 1px #000;
            z-index: 3;
        }

        &.not-allow{
            cursor: not-allowed;

            .straw{
                cursor: not-allowed;
            }
        }
    }

    .tools{
        height: @fontSize*4;
        font-size: 0;

        .color-copy{
            height: @fontSize*2;
            width: @fontSize*2;
            margin: @fontSize;
            display: inline-block;
            border-radius: 10em;
            font-size: @fontSize;
            position: relative;
            overflow: hidden;

            .copy-mask{
                position: absolute;
                display: none;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: @fontSize;
                z-index: 2;
                color: #FFF;
                text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
            }

            &:hover{
                cursor: pointer;

                .copy-mask{
                    display: block;
                }
            }
        }

        .setup-alpha-bg();
        .setup-color();

        .slider-tool{
            display: inline-block;
            width: calc(100% - @fontSize*4);
            vertical-align: top;
            height: 100%;

            .hsb{
                padding-top: 8px;
            }

            .alpha{
                padding-bottom: 8px;
            }

            .hsb,
            .alpha{
                height: 50%;
                box-sizing: border-box;

                mor-slider{
                    .form-name{
                        display: none;
                    }

                    .wrap{
                        padding: 6px 12px;
                    }

                    .track{
                        background: linear-gradient(to left, #F00, #F0F, #00F, #0FF, #0F0, #FF0, #F00);
                        height: 10px;
                    }

                    .selected-line{
                        display: none;
                    }

                    .main-slider{
                        top: -4px;
                        border-color: @colorWhite;
                        border-width: 0;
                        box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
                    }
                }
            }

            .alpha{
                mor-slider{
                    .wrap{
                        &::before{
                            background-image: ~'-webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #0000), color-stop(0.5, #fff), to(#fff))';
                            background-color: #DDD;
                            background-size: 10px;
                            content: ' ';
                            display: block;
                            height: 10px;
                            position: absolute;
                            z-index: 0;
                            top: 6px;
                            left: 12px;
                            right: 12px;
                            border-radius: 10em;
                            font-size: @fontSize;
                            overflow: hidden;
                        }
                    }
                }
            }
        }
    }

    .values{
        height: @fontSize*3.5;
        font-size: 0;
        border-top: 1px @colorFormBorder solid;

        .input{
            width: 90%;
            height: 100%;
            display: inline-block;
            padding: @fontSize*0.5 0;
            box-sizing: border-box;

            .rgba,
            .hex,
            .hsla{
                width: 100%;

                mor-textinput{
                    display: inline-block;
                    box-sizing: border-box;

                    input{
                        height: @fontSize*1.5;
                        text-align: center;
                        padding: 0 0.5em;
                        font-size: @fontSize*0.75;
                    }
                }

                .name{
                    height: 40%;
                    font-size: @fontSize*0.75;
                    text-align: center;
                    padding-top: 0.3em;
                }
            }

            .rgba,
            .hsla{
                mor-textinput{
                    width: 20%;
                    margin-right: 4%;

                    &:first-child{
                        margin-left: 4%;
                    }
                }

                .name{
                    width: 22.5%;
                    margin-right: 2%;
                    display: inline-block;

                    &:nth-child(5){
                        margin-left: 2%;
                    }
                }
            }

            .hex{
                mor-textinput{
                    width: 80%;
                    margin: 0 10%;
                }

                .name{
                    width: 100%;
                }
            }
        }
    }

    .palettes{
        padding: @fontSize;
        border-top: 1px @colorFormBorder solid;
        margin: 0;
        list-style: none;
        display: flex;
        justify-content: space-around;
        position: relative;

        &.multi-palettes{
            padding-right: @fontSize*2.5;
        }

        .palettes-color-item {
            width: @fontSize*0.75;
            height: @fontSize*0.75;
            cursor: pointer;

            &:hover{
                box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
            }
        }

        .palettes-picker{
            position: absolute;
            bottom: -170px;
            left: 0;
            width: 100%;
            max-height: 170px;
            align-items: stretch;
            display: flex;
            flex-direction: column;
            background: @colorWhite;
            box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
            z-index: 2;
            transition: bottom 0.2s;

            &.show{
                bottom: 0;
            }

            .palette-item-list{
                overflow-y: auto;
                max-height: 120px;

                .setup-hover-scrollbar();
            }

            .palette-title{
                padding: 1em;
                position: relative;

                > span{
                    font-size: @fontSize;
                    color: #333;
                }

                > .mo-icon{
                    position: absolute;
                    top: 0;
                    right: 0.5em;
                    line-height: @fontSize*2.625;
                    font-size: 14px;
                    color: @colorFormItemColor;

                    &:hover{
                        cursor: pointer;
                        color: @colorFormItemColorHover;
                    }
                }
            }

            .palette-item{
                display: flex;
                width: 100%;
                padding: 0.5em;
                justify-content: space-between;
                box-sizing: border-box;
                border-top: 1px @colorFormBorder solid;

                &:hover{
                    background: @colorFormBackgroundHover;
                    cursor: pointer;
                }

                .palette-name{
                    font-size: @fontSize*0.8125;
                    padding: 0 0.5em;
                    width: 40%;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }

                .palette-color-preview{
                    display: flex;
                    justify-content: space-around;
                    width: 60%;
                }
            }
        }
    }

    .toggle-type,
    .toggle-palette{
        width: 8%;
        display: inline-block;
        vertical-align: top;
        line-height: @fontSize*2;
        height: @fontSize*2;
        margin: @fontSize*0.75 0;
        text-align: center;
        color: @colorFormItemColor;
        cursor: pointer;
        border-radius: @borderRadius;

        &:hover{
            color: @colorFormItemColorHover;
            background: @colorFromItemBackgroundHover;
        }
    }

    .toggle-palette{
        position: absolute;
        top: @fontSize*0.375;
        right: @fontSize*0.375;
        color: @colorFormItemColor;
        margin: 0;

        .mo-icon{
            font-size: @fontSize*0.875;
        }
    }

    // &.show{
    //     pointer-events: auto;
    // }

    // &.show .picker{
    //     animation-name: popup;
    //     animation-duration: 0.2s;
    //     animation-fill-mode: forwards;
    // }

    // &.hide{
    //     pointer-events: none;
    // }

    // &.hide .picker{
    //     animation-name: popin;
    //     animation-duration: 0.18s;
    //     animation-fill-mode: forwards;
    // }

    // &.not-allow{
    //     .panel{
    //         cursor: not-allowed;
    //     }
    // }
}