ten-design-vue/lib/theme/components/slider.less

ten-vue

/* 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;
      }
    }

  }
}