UNPKG

ten-design-vue

Version:

ten-vue

124 lines (121 loc) 2.56 kB
/* dependencies tooltip */ @import "../vars.less"; .ten-slider{ position: relative; padding: 20px 0px; margin: 0 10px; user-select: none; box-sizing: border-box; cursor: pointer; .ten-slider__background{ width: 100%; height: 2px; background: #E9E9E9; } .ten-slider__container{ width: 100%; height: 2px; background: @primary-color; position: absolute; left: 0; top: 20px; .ten-slider__bar{ height: 100%; background: #E9E9E9; position: absolute; top: 0; .ten-slider__indicator{ width: 8px; height: 8px; background: @primary-color; border-radius: 100%; position: absolute; top: 50%; transform: translate(-50%,-50%); z-index: 998; cursor: pointer; &:after,&:before{ display: inline-block; content:""; position: absolute; width: 4px; height: 4px; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 100%; background: #ffffff; } &:before{ width: 20px; height: 20px; background: transparent; } } .ten-slider__indicator--toplevel{ z-index: 10002; } } .ten-slider__leftbar{ left: 0; .ten-slider__indicator{ left: 100%; } } .ten-slider__rightbar{ right: 0; .ten-slider__indicator{ left: 0%; } } } .ten-slider__mark{ position: relative; width: 100%; padding-top: 1px; box-sizing: border-box; .ten-slider__mark_i{ z-index: 997; position: absolute; padding-top: 10px; &:after,&:before{ content:""; display: inline-block; width: 6px; height: 6px; background: #E9E9E9; border-radius: 100%; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); } &:after{ width: 3px; height: 3px; background: #FFFFFF; } transform: translateX(-50%); } .ten-slider__mark_i--focus{ &:before{ background: @primary-color; } } } } .ten-slider--disabled{ cursor: not-allowed; .ten-slider__container{ background: #C0C0C0; .ten-slider__bar .ten-slider__indicator{ background: #C0C0C0; cursor: not-allowed; } .ten-slider__mark_i--focus{ &:before{ background: #C0C0C0; } } } }