@cw-devops/bk-magic-vue/lib/ui/slider.min.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;-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column}.bk-slider .bk-slider-runway .bk-slider-labels.horizontal,.bk-slider .bk-slider-runway .bk-slider-labels.vertical{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal;-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;-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row}.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:0 0 0 4px rgba(58,132,255,.3);box-shadow:0 0 0 4px rgba(58,132,255,.3)}.bk-slider-button .slider-button:focus{-webkit-box-shadow:0 0 10px 0 rgba(58,132,255,.9);box-shadow:0 0 10px 0 rgba(58,132,255,.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}
/*# sourceMappingURL=slider.min.css.map */