mdui/src/components/slider/index.less

a CSS Framework based on material design

/**
 * =============================================================================
 * ************   Slider 滑块   ************
 * =============================================================================
 */

@slider-light-color: #bdbdbd; // rgba(0, 0, 0, .26)
@slider-light-color-focus: #9e9e9e; // rgba(0, 0, 0, .38)
@slider-light-color-disabled: #bdbdbd; // rgba(0, 0, 0, .26)

@slider-dark-color: #4c4c4c; // rgba(255, 255, 255, .3)
@slider-dark-color-focus: #4c4c4c; // rgba(255, 255, 255, .3)
@slider-dark-color-disabled: #4c4c4c; // rgba(255, 255, 255, .3)

.mdui-slider {
  position: relative;
  display: block;
  width: 100%;
  height: 36px;

  input[type="range"] {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 20px;
    margin-top: -10px;
    cursor: pointer;
    opacity: 0;
    appearance: none;
  }
}

.mdui-slider-track,
.mdui-slider-fill {
  position: absolute;
  top: 50%;
  box-sizing: border-box;
  height: 2px;
  margin-top: -1px;

  &::before {
    display: block;
    width: 100%;
    height: 100%;
    content: ' ';
  }
}

/* 轨道 */
.mdui-slider-track {
  right: 0;

  &::before {
    background-color: @slider-light-color;
    transition: background-color .3s @animation-curve-default;
  }
}

/* 已滑动部分 */
.mdui-slider-fill {
  left: 0;

  &::before {
    background-color: @color-default-a200;
  }
}

/* 滑块 */
.mdui-slider-thumb {
  position: absolute;
  top: 50%;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background-color: @color-default-a200;
  border: 2px solid @color-default-a200;
  border-radius: 50%;
  transform: translate(-50%);
  transition:
    background .45s @animation-curve-default,
    border-color .45s @animation-curve-default,
    transform .2s @animation-curve-default,
    border-radius .2s @animation-curve-default;
  will-change: background, border-color, transform, border-radius;
}


/**
 * =============================================================================
 * ************   Slider 强调色   ************
 * =============================================================================
 */

& {
  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
    .loop-accent-theme((@counter-color - 1));
    @colorName: extract(@globalAccentColors, @counter-color);

    @color: 'color-@{colorName}-a200';

    .mdui-theme-accent-@{colorName} when not (@colorName = null) {

      .mdui-slider-fill {

        &::before {
          background-color: @@color;
        }
      }

      .mdui-slider-thumb {
        background-color: @@color;
        border: 2px solid @@color;
      }
    }
  }
  .loop-accent-theme(length(@globalAccentColors));
}


/**
 * =============================================================================
 * ============   Slider 的不同状态   ============
 * =============================================================================
 */

/* 鼠标按下状态 */
.mdui-slider-focus {
  .mdui-slider-track {

    &::before {
      background-color: @slider-light-color-focus;
    }
  }

  .mdui-slider-thumb {
    transform: translate(-50%) scale(1.6);
  }
}

/* 滑块值为 0 */
.mdui-slider-zero {
  .mdui-slider-thumb {
    background-color: #fff;
    border-color: @slider-light-color;
  }
}

/* 滑块值为 0，且鼠标按下 */
.mdui-slider-zero.mdui-slider-focus {
  .mdui-slider-thumb {
    border-color: @slider-light-color-focus;
  }
}

/* 禁用状态 */
.mdui-slider-disabled {
  input[type="range"] {
    cursor: default;
  }

  .mdui-slider-track {

    &::before {
      background-color: @slider-light-color-disabled;
    }
  }

  .mdui-slider-fill {

    &::before {
      background-color: @slider-light-color-disabled;
    }
  }

  .mdui-slider-thumb {
    background-color: @slider-light-color-disabled;
    border-color: transparent !important;
    transform: translate(-50%) scale(.72);
  }
}

/**
 * =============================================================================
 * ============   间续型滑块   ============
 * =============================================================================
 */
.mdui-slider-discrete {

  .mdui-slider-thumb {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
    border: none;
    transform: rotate(-45deg) scale(.4);

    // 间续型滑块的值显示
    span {
      position: absolute;
      top: 9px;
      left: -1px;
      width: 100%;
      color: #fff;
      font-size: 12px;
      text-align: center;
      transform: rotate(45deg);
      opacity: 0;
      transition: opacity .25s @animation-curve-default;
    }
  }

  // 鼠标按下状态
  &.mdui-slider-focus {
    .mdui-slider-thumb {
      border-radius: 15px 15px 15px 0;
      transform: rotate(-45deg) scale(1) translate(22px, -22px);

      span {
        opacity: 1;
      }
    }
  }

  // 滑块值为 0
  &.mdui-slider-zero {
    .mdui-slider-thumb {
      background-color: #323232;
    }
  }

  // 滑块值为 0，且鼠标按下
  &.mdui-slider-zero.mdui-slider-focus {
    .mdui-slider-thumb {
      background-color: @slider-light-color;
    }
  }

  // 禁用状态
  &.mdui-slider-disabled {
    .mdui-slider-thumb {
      transform: rotate(-45deg) scale(.288);
    }
  }

  // 滑块值为 0，且禁用
  &.mdui-slider-zero.mdui-slider-disabled {
    .mdui-slider-thumb {
      background-color: @slider-light-color;
    }
  }
}

/**
 * =============================================================================
 * ************   Slider dark   ************
 * =============================================================================
 */
.layout-theme({
  // 轨道
  .mdui-slider-track {

    &::before {
      background-color: @slider-dark-color;
    }
  }

  // 鼠标按下状态
  .mdui-slider-focus {
    .mdui-slider-track {

      &::before {
        background-color: @slider-dark-color-focus;
      }
    }
  }

  // 滑块值为 0
  .mdui-slider-zero {
    .mdui-slider-thumb {
      background-color: @layout-dark-color-3;
      border-color: @slider-dark-color;
    }
  }

  // 滑块值为 0，且鼠标按下
  .mdui-slider-zero.mdui-slider-focus {
    .mdui-slider-thumb {
      border-color: @slider-dark-color-focus;
    }
  }

  // 禁用状态
  .mdui-slider-disabled {
    .mdui-slider-track {

      &::before {
        background-color: @slider-dark-color-disabled;
      }
    }

    .mdui-slider-fill {

      &::before {
        background-color: @slider-dark-color-disabled;
      }
    }

    .mdui-slider-thumb {
      background-color: @slider-dark-color-disabled;
    }
  }

  // 间续型滑块
  .mdui-slider-discrete {

    // 滑块值为 0
    &.mdui-slider-zero {
      .mdui-slider-thumb {
        background-color: #fefefe;
      }
    }

    // 滑块值为 0，且鼠标按下
    &.mdui-slider-zero.mdui-slider-focus {
      .mdui-slider-thumb {
        background-color: #5c5c5c;
      }
    }

    // 滑块值为 0，且禁用
    &.mdui-slider-zero.mdui-slider-disabled {
      .mdui-slider-thumb {
        background-color: @slider-dark-color-disabled;
      }
    }
  }
});