antd-mobile/lib/slider/style/index.less

基于 React 的移动设计规范实现

@import '../../style/themes/default';
@import '../../style/mixins';

@sliderPrefixCls: am-slider;

// tooltip
@tooltip-color: @color-text-base-inverse;
@tooltip-bg: @fill-mask;
@tooltip-arrow-width: 8px;
@tooltip-distance: @tooltip-arrow-width + @v-spacing-sm;
@tooltip-arrow-color: @tooltip-bg;

.borderBox() {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
}

@import './tooltip.less';

.@{sliderPrefixCls} {
  position: relative;
  margin: 32px 0px;
  height: 4px;
  background-color: @border-color-base;
  box-sizing: border-box;

  &-wrapper {
    padding: 0 32px;
  }

  &-track {
    position: absolute;
    left: 0;
    height: 4px;
    border-radius: @radius-xs;
    background-color: @brand-primary;
  }

  &-handle {
    position: absolute;
    margin-left: -24px;
    margin-top: -24px;
    width: 48px;
    height: 48px;
    cursor: pointer;
    border-radius: 50%;
    border: @border-width-lg solid @brand-primary;
    background-color: @fill-base;

    &:focus {
      background-color: tint(@brand-primary, 20%);
      background: #000;
    }

    &-active {
      &:active {
        background-color: tint(@brand-primary, 20%);
        box-shadow: 0 0 5px tint(@brand-primary, 20%);
      }
    }
  }

  &-mark {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    font-size: @font-size-caption-sm;
  }

  &-mark-text {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    color: @color-text-base;

    &-active {
      opacity: @opacity-disabled;
    }
  }

  &-step {
    position: absolute;
    width: 100%;
    height: 8px;
    background: transparent;
  }

  &-dot {
    position: absolute;
    bottom: -10px;
    margin-left: -8px;
    width: 24px;
    height: 24px;
    border: @border-width-lg solid @border-color-base;
    background-color: @fill-base;
    cursor: pointer;
    border-radius: 50%;
    vertical-align: middle;
    &:first-child {
      margin-left: -8px;
    }
    &:last-child {
      margin-left: -8px;
    }
    &-active {
      border-color: @brand-primary;
    }
  }

  &-disabled {
    opacity: @opacity-disabled;
    .@{sliderPrefixCls}-track {
      height: 4px;
    }

    .@{sliderPrefixCls}-handle,
    .@{sliderPrefixCls}-mark-text,
    .@{sliderPrefixCls}-dot {
      cursor: not-allowed;
    }
  }
}