bk-magic-vue/lib/ui/slider.css

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

.bk-slider{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
        -ms-flex-direction:row;
            flex-direction:row;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}

.bk-slider .bk-slider-runway{
        width:100%;
        height:4px;
        background:#dcdee5;
        position:relative;
        cursor:pointer;
        vertical-align:middle;
        opacity:1;
        border-radius:2px;
    }

.bk-slider .bk-slider-runway .bk-slider-bar{
            height:4px;
            border-top-left-radius:3px;
            border-bottom-left-radius:3px;
            position:absolute;
            background:#3a84ff
        }

.bk-slider .bk-slider-runway .bk-slider-bar.vertical{
                width:4px;
            }

.bk-slider .bk-slider-runway .bk-slider-bar.horizontal{
                height:4px;
            }

.bk-slider .bk-slider-runway .disable{
            background:#979ba5;
        }

.bk-slider .bk-slider-runway .bk-slider-labels{
            position:relative;
            font-size:12px
        }

.bk-slider .bk-slider-runway .bk-slider-labels.vertical{
                left:18px;
                height:100%;
                width:10px;
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
                -webkit-box-orient:vertical;
                -webkit-box-direction:normal;
                    -ms-flex-direction:column;
                        flex-direction:column;
                -webkit-box-pack:justify;
                    -ms-flex-pack:justify;
                        justify-content:space-between;
            }

.bk-slider .bk-slider-runway .bk-slider-labels.horizontal{
                top:10px;
                width:100%;
                height:10px;
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
                -webkit-box-orient:horizontal;
                -webkit-box-direction:normal;
                    -ms-flex-direction:row;
                        flex-direction:row;
                -webkit-box-pack:justify;
                    -ms-flex-pack:justify;
                        justify-content:space-between;
            }

.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label{
                position:absolute;
                width:10px;
                height:10px;
                text-align:center;
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
                -webkit-box-align:center;
                    -ms-flex-align:center;
                        align-items:center;
                -webkit-box-pack:center;
                    -ms-flex-pack:center;
                        justify-content:center;
                white-space:nowrap
            }

.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.vertical{
                    left:10px;
                    -webkit-transform:translateY(50%);
                            transform:translateY(50%);
                }

.bk-slider .bk-slider-runway .bk-slider-labels .bk-slider-label.horizontal{
                    top:10px;
                    -webkit-transform:translateX(-50%);
                            transform:translateX(-50%);
                }

.bk-slider .bk-slider-interval{
        position:absolute;
        height:4px;
        width:4px;
        border-radius:100%;
        background-color:#fff;
        -webkit-transform:translateX(-50%);
                transform:translateX(-50%)
    }

.bk-slider .bk-slider-interval.vertical{
            left:2px;
        }

.bk-slider-input{
        margin:0 0 0 28px;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
            -ms-flex-direction:row;
                flex-direction:row;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
    }

.bk-slider-input .input-item{
            width:56px;
        }

.bk-slider-input .input-center{
            margin:0 7px;
        }

.bk-slider-button{
    height:24px;
    width:24px;
    position:absolute;
    z-index:1001;
    background-color:transparent;
    text-align:center;
    -webkit-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
            user-select:none;
    line-height:normal;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center
}

.bk-slider-button:hover{
        cursor:-webkit-grab;
        cursor:grab;
    }

.bk-slider-button.grabbing{
        cursor:-webkit-grabbing;
        cursor:grabbing;
    }

.bk-slider-button.vertical{
        left:-10px;
        -webkit-transform:translateY(50%);
                transform:translateY(50%);
    }

.bk-slider-button.horizontal{
        top:-10px;
        -webkit-transform:translateX(-50%);
                transform:translateX(-50%);
    }

.bk-slider-button .slider-button{
        width:12px;
        height:12px;
        border:2px solid #3a84ff;
        border-radius:50%;
        background-color:#fff;
        -webkit-transition:.2s;
        transition:.2s;
        -webkit-user-select:none;
           -moz-user-select:none;
            -ms-user-select:none;
                user-select:none;
    }

.bk-slider-button .slider-button-disable{
            border:2px solid #979ba5;
        }

.bk-slider-button .slider-button:hover{
            -webkit-box-shadow:0px 0px 0px 4px rgba(58, 132, 255, 0.30);
                    box-shadow:0px 0px 0px 4px rgba(58, 132, 255, 0.30);
        }

.bk-slider-button .slider-button:focus{
            -webkit-box-shadow:0px 0px 10px 0px rgba(58, 132, 255, 0.9);
                    box-shadow:0px 0px 10px 0px rgba(58, 132, 255, 0.9);
        }

.bk-slider-button .slider-button-label{
        position:absolute;
        text-align:center;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
            -ms-flex-align:center;
                align-items:center;
        -webkit-box-pack:center;
            -ms-flex-pack:center;
                justify-content:center;
        font-size:12px
    }

.bk-slider-button .slider-button-label.vertical{
            left:28px;
        }

.bk-slider-button .slider-button-label.horizontal{
            top:20px;
        }