bk-magic-vue/lib/ui/color-picker.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.bk-color-picker{
    position:relative;
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -ms-flex-line-pack:center;
        align-content:center;
    height:32px;
    border-radius:2px;
    border:1px solid #c4c6cc;
    -webkit-transition:border .2s, -webkit-box-shadow .2s;
    transition:border .2s, -webkit-box-shadow .2s;
    transition:border .2s, box-shadow .2s;
    transition:border .2s, box-shadow .2s, -webkit-box-shadow .2s;
    color:#63656e;
    cursor:pointer;
    outline:none
}

.bk-color-picker.bk-color-picker-show-value{
        width:150px;
    }

.bk-color-picker.bk-color-picker-large{
        height:36px
    }

.bk-color-picker.bk-color-picker-large.bk-color-picker-show-value{
            width:170px;
        }

.bk-color-picker.bk-color-picker-large.bk-color-picker-show-value .bk-color-picker-text{
                width:calc(100% - 62px);
                font-size:16px;
            }

.bk-color-picker.bk-color-picker-large .bk-color-picker-color .bk-color-picker-color-square{
            width:22px;
            height:22px;
            font-size:22px;
        }

.bk-color-picker.bk-color-picker-small{
        height:28px
    }

.bk-color-picker.bk-color-picker-small.bk-color-picker-show-value{
            width:132px;
        }

.bk-color-picker.bk-color-picker-small.bk-color-picker-show-value .bk-color-picker-text{
                width:calc(100% - 56px);
                font-size:12px;
            }

.bk-color-picker.bk-color-picker-small .bk-color-picker-color .bk-color-picker-color-square{
            width:16px;
            height:16px;
            font-size:16px;
        }

.bk-color-picker:hover, .bk-color-picker:focus{
        border-color:#3a84ff;
        -webkit-transition:border .2s;
        transition:border .2s;
    }

.bk-color-picker.bk-color-picker-show-dropdown{
        border-color:#3a84ff;
        -webkit-box-shadow:0 0 0 2px rgba(45, 140, 240, .2);
                box-shadow:0 0 0 2px rgba(45, 140, 240, .2);
        -webkit-transition:border .2s, -webkit-box-shadow .2s;
        transition:border .2s, -webkit-box-shadow .2s;
        transition:border .2s, box-shadow .2s;
        transition:border .2s, box-shadow .2s, -webkit-box-shadow .2s;
    }

.bk-color-picker.bk-color-picker-show-dropdown .icon-angle-down{
            -webkit-transform:rotate(-180deg);
                    transform:rotate(-180deg);
            -webkit-transition:-webkit-transform .3s;
            transition:-webkit-transform .3s;
            transition:transform .3s;
            transition:transform .3s, -webkit-transform .3s;
        }

.bk-color-picker.bk-color-picker-disabled{
        border-color:#dcdee5;
        background-color:#fafbfd;
        cursor:not-allowed;
    }

.bk-color-picker.bk-color-picker-disabled .bk-color-picker-text{
            color:#c4c6cc;
        }

.bk-color-picker.bk-color-picker-disabled .bk-color-picker-icon .icon-angle-down{
            color:#c4c6cc;
        }

.bk-color-picker .bk-color-picker-color{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        margin-left:6px;
    }

.bk-color-picker .bk-color-picker-color .bk-color-picker-color-square{
            width:18px;
            height:18px;
            font-size:18px;
            color:#c4c6cc;
            -webkit-box-shadow:inset 0 0 0 1px rgba(0, 0, 0, .15);
                    box-shadow:inset 0 0 0 1px rgba(0, 0, 0, .15);
        }

.bk-color-picker .bk-color-picker-text{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        width:calc(100% - 58px);
        margin-left:6px;
        line-height:20px;
        font-size:14px;
        color:#63656e;
    }

.bk-color-picker .bk-color-picker-text span{
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }

.bk-color-picker .bk-color-picker-icon{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        width:20px;
        margin:0 4px;
    }

.bk-color-picker .bk-color-picker-icon .icon-angle-down{
            position:absolute;
            right:4px;
            font-size:20px;
            color:#979ba5;
            -webkit-transition:-webkit-transform .3s;
            transition:-webkit-transform .3s;
            transition:transform .3s;
            transition:transform .3s, -webkit-transform .3s;
        }

.bk-color-picker-dropdown{
    width:272px;
}

.bk-color-picker-saturation{
    margin:6px;
    position:relative;
    height:180px;
}

.bk-color-picker-saturation .bk-color-picker-saturation-white{
        background:-webkit-gradient(linear, left top, right top, from(#fff), to(hsla(0, 0%, 100%, 0)));
        background:linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
    }

.bk-color-picker-saturation .bk-color-picker-saturation-black{
        background:-webkit-gradient(linear, left bottom, left top, from(#000), to(transparent));
        background:linear-gradient(0deg, #000, transparent);
    }

.bk-color-picker-saturation .bk-color-picker-saturation-white, .bk-color-picker-saturation .bk-color-picker-saturation-black{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        cursor:pointer;
    }

.bk-color-picker-hue{
    margin:0 6px 6px;
    position:relative;
    height:10px;
    cursor:pointer;
    background:-webkit-gradient(linear, left top, right top, color-stop(0, red), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(red));
    background:linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
}

.bk-color-picker-hue .bk-color-picker-hue-pointer{
        position:absolute;
        top:0;
    }

.bk-color-picker-hue .bk-color-picker-hue-pointer .bk-color-picker-hue-rectangle{
            width:4px;
            height:8px;
            margin-top:1px;
            border-radius:1px;
            -webkit-box-shadow:0 0 2px rgba(0, 0, 0, .6);
                    box-shadow:0 0 2px rgba(0, 0, 0, .6);
            background:#fff;
            cursor:pointer;
            -webkit-transform:translateX(-2px);
                    transform:translateX(-2px);
        }

.bk-color-picker-input{
    margin:0 6px 1px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
        -ms-flex-pack:justify;
            justify-content:space-between;
    font-size:12px;
    color:#63656e;
}

.bk-color-picker-input .bk-color-picker-input-hex .bk-color-picker-input-part .bk-color-picker-input-value{
        width:70px;
    }

.bk-color-picker-input .bk-color-picker-input-rgba{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-pack:justify;
            -ms-flex-pack:justify;
                justify-content:space-between;
        width:160px;
    }

.bk-color-picker-input .bk-color-picker-input-part{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
            -ms-flex-flow:column;
                flex-flow:column;
    }

.bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value{
            width:32px;
            height:22px;
            border:1px solid #c4c6cc;
            border-radius:2px;
            padding:0 4px;
            line-height:16px;
            -webkit-transition:border .2s;
            transition:border .2s;
            outline:none
        }

.bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value:focus{
                border-color:#3a84ff;
                -webkit-transition:border .2s;
                transition:border .2s;
            }

.bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value.error{
                border-color:#ea3636;
            }

.bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value::-webkit-outer-spin-button,
            .bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value::-webkit-inner-spin-button{
                -webkit-appearance:none;
                margin:0;
            }

.bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-text{
            height:18px;
            line-height:18px;
            text-align:center;
        }

.bk-color-picker-recommend-container{
    padding:6px;
    border-top:1px solid #f0f1f5;
}

.bk-color-picker-recommend-container .bk-color-picker-recommend{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -ms-flex-wrap:wrap;
            flex-wrap:wrap;
    }

.bk-color-picker-recommend-container .bk-color-picker-recommend .bk-color-picker-recommend-color{
            width:20px;
            height:20px;
            margin:3px;
            border-radius:3px;
            -webkit-box-shadow:inset 0 0 0 1px rgba(0, 0, 0, .15);
                    box-shadow:inset 0 0 0 1px rgba(0, 0, 0, .15);
            cursor:pointer
        }

.bk-color-picker-recommend-container .bk-color-picker-recommend .bk-color-picker-recommend-color.bk-color-picker-recommend-selected-color{
                -webkit-box-shadow:0 0 3px 2px #3a84ff;
                        box-shadow:0 0 3px 2px #3a84ff;
            }

.bk-color-picker-saturation, .bk-color-picker-hue, .bk-color-picker-recommend{
    outline:none;
    -webkit-transition:-webkit-box-shadow .2s;
    transition:-webkit-box-shadow .2s;
    transition:box-shadow .2s;
    transition:box-shadow .2s, -webkit-box-shadow .2s
}

.bk-color-picker-saturation:focus, .bk-color-picker-hue:focus, .bk-color-picker-recommend:focus{
        -webkit-box-shadow:0 0 0 2px rgba(45, 140, 240, .5);
                box-shadow:0 0 0 2px rgba(45, 140, 240, .5);
        -webkit-transition:-webkit-box-shadow .2s;
        transition:-webkit-box-shadow .2s;
        transition:box-shadow .2s;
        transition:box-shadow .2s, -webkit-box-shadow .2s;
    }

.bk-color-picker-pointer{
    position:absolute;
    left:50%;
    top:50%;
    width:4px;
    height:4px;
    cursor:pointer;
}

.bk-color-picker-pointer .bk-color-picker-circle{
        position:absolute;
        left:0;
        top:0;
        width:4px;
        height:4px;
        -webkit-box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
                box-shadow:0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
        border-radius:50%;
        -webkit-transform:translate(-2px, -2px);
                transform:translate(-2px, -2px);
        cursor:pointer;
    }

.bk-color-picker-empty{
    position:relative
}

.bk-color-picker-empty::after{
        position:absolute;
        left:calc(50% - 1px);
        top:1px;
        content:'';
        width:2px;
        height:calc(100% - 2px);
        border-radius:1px;
        background:#ea3536;
        -webkit-transform:rotate(45deg);
                transform:rotate(45deg);
    }