tt-mp/core/slider/index.less

一套组件化、可复用、易扩展的头条小程序 UI 组件库

@import '../styles/mixins/index.less';
@import '../styles/themes/index.less';

.@{wux-prefix}-slider {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;

  &__rail {
    width: 100%;
    height: @slider-rail-size;
    margin: @slider-rail-margin;
    background-color: @slider-rail-bg;
    border-radius: @slider-radius;
    vertical-align: middle;
    position: relative;
  }

  &__track {
    position: absolute;
    left: 0;
    height: @slider-rail-size;
    border-radius: @slider-radius;
    background-color: @slider-track-bg;
  }

  &__handle {
    background-color: @slider-handle-bg;
    border-radius: 50%;
    height: @slider-handle-size;
    left: 0;
    top: 50%;
    position: absolute;
    width: @slider-handle-size;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    transform: translate3d(-50%, -50%, 0);
    transition: transform 0.2s;

    &::after {
      content: attr(data-meta);
      color: #fff;
      position: absolute;
      pointer-events: none;
      display: none;
      opacity: 0;
      visibility: hidden;
      z-index: 15;
      font-size: @slider-font-size;
      line-height: 1.25;
      padding: 4px 8px;
      border-radius: @slider-radius;
      background-color: rgba(0, 0, 0, 0.7);
      white-space: nowrap;
      text-align: center;
      left: 50%;
      bottom: 100%;
      margin-bottom: 10px;
      transform: translateX(-50%);
    }

    &--last {
      z-index: 2;
    }

    &--is-touched {
      transform: translate3d(-50%, -50%, 0) scale(1.3);
    }
  }

  &--has-tip &__handle--is-touched::after {
    display: block;
    opacity: 1;
    visibility: visible;
  }

  &__mark {
    .square(@slider-rail-size);

    position: absolute;
    border-radius: 50%;
    background-color: @slider-mark-bg;
    transform: translateX(-50%);
  }

  &__min,
  &__max {
    font-size: @slider-font-size;
    color: @text-color-secondary;
  }

  &__min {
    margin-right: @slider-margin;
  }

  &__max {
    margin-left: @slider-margin;
  }

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