comic-plus

Version:

1 lines • 3.01 kB

CSS

.cu-slider{display:inline-flex;width:100%;min-height:var(--cu-slider-button-size);align-items:center;padding:0 calc(var(--cu-slider-button-size)/ 2);--cu-slider-color:var(--cu-color-primary);--cu-slider-size:6px;--cu-slider-button-size:20px;--cu-slider-input-width:130px}.cu-slider.large{--cu-slider-size:8px;--cu-slider-button-size:26px;--cu-slider-input-width:180px}.cu-slider.small{--cu-slider-size:4px;--cu-slider-button-size:14px;--cu-slider-input-width:100px}.cu-slider--primary{--cu-slider-color:var(--cu-color-primary)}.cu-slider--danger{--cu-slider-color:var(--cu-color-danger)}.cu-slider--warning{--cu-slider-color:var(--cu-color-warning)}.cu-slider--success{--cu-slider-color:var(--cu-color-success)}.cu-slider--info{--cu-slider-color:var(--cu-color-info)}.cu-slider.is-disabled{--cu-slider-color:var(--cu-border-color-disabled)}.cu-slider.is-disabled .cu-slider__container{background-color:var(--cu-background-color-disabled)}.cu-slider__container{width:100%;height:var(--cu-slider-size);border-radius:calc(var(--cu-slider-size)/ 2);background-color:var(--cu-background-color);cursor:pointer;position:relative}.cu-slider__input{margin-left:20px;width:var(--cu-slider-input-width);min-width:var(--cu-slider-input-width)}.cu-slider__tooltip{position:absolute;top:-10px;left:50%;transform:translate(-50%,-100%);background-color:#303133;color:#fff;padding:8px 12px;border-radius:var(--cu-border-radius);white-space:nowrap}.cu-slider__tooltip::after{content:'';position:absolute;display:block;width:8px;height:8px;background:inherit;rotate:45deg;border-left-color:transparent;border-top-color:transparent;bottom:-4px;left:50%;translate:-50% 0}.cu-slider__bar{position:absolute;left:0;top:0;background-color:var(--cu-slider-color);height:100%;border-radius:calc(var(--cu-slider-size)/ 2)}.cu-slider__marks,.cu-slider__steps{position:absolute;top:0;left:0;width:100%;height:0;border-radius:calc(var(--cu-slider-size)/ 2);padding:0;margin:0;justify-content:space-evenly;list-style:none}.cu-slider__mark,.cu-slider__step{position:absolute;width:var(--cu-slider-size);height:var(--cu-slider-size);background-color:#fff;border-radius:50%;transform:translateX(-50%)}.cu-slider__mark-label{position:absolute;display:block;left:50%;top:0;cursor:default;transform:translate(-50%);margin-top:12px}.cu-slider__mark-label.top{top:auto;bottom:0;margin-top:0;margin-bottom:12px}.cu-slider__mark-label>span{white-space:nowrap}.cu-slider__button-wrapper{position:absolute;left:0;top:50%;translate:-50% -50%;width:var(--cu-slider-button-size);height:var(--cu-slider-button-size)}.cu-slider__button{width:100%;height:100%;border:2px solid var(--cu-slider-color);background-color:#fff;border-radius:50%;cursor:grab;transition:scale .2s}.cu-slider__button:hover{scale:1.1}.cu-slider__button:active,.cu-slider__container:active .cu-slider__button{cursor:grabbing}.cu-slider.is-disabled .cu-slider__button,.cu-slider.is-disabled .cu-slider__container{cursor:no-drop}.cu-slider.is-disabled .cu-slider__button:hover{scale:1}