ten-design-vue
Version:
ten-vue
124 lines (121 loc) • 2.56 kB
text/less
/* 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;
}
}
}
}