material-ui/src/less/components/slider.less

Material Design UI components built with React

@import (inline) "../../../node_modules/react-draggable2/lib/styles.css";

.mui-slider {
  @fill-gutter: @slider-handle-size-disabled - @slider-track-size;

  -webkit-touch-callout: none;
  cursor: default;
  height: @slider-handle-size-active;
  position: relative;

  .handle-size(@size) {
    width: @size;
    height: @size;
  }

  .mui-slider-track {
    position: absolute;
    top: (@slider-handle-size-active - @slider-track-size) / 2;
    left: 0;
    width: 100%;
    height: @slider-track-size;
  }

  .mui-slider-selection {
    position: absolute;
    top: 0;
    height: 100%;

    .mui-slider-selection-fill {
      height: 100%;
      .ease-out(@property: margin);
    }
  }

  .mui-slider-selection-low {
    left: 0;

    .mui-slider-selection-fill {
      background-color: @slider-selection-color;
      margin-right: @fill-gutter;
    }
  }

  .mui-slider-selection-high {
    right: 0;

    .mui-slider-selection-fill {
      background-color: @slider-track-color;
      margin-left: @fill-gutter;
    }
  }

  .mui-slider-handle {
    cursor: ew-resize;
    position: absolute;
    top: 0;
    left: 0%;
    z-index: 1;
    margin: (@slider-track-size / 2) 0 0 0;
    .lh-border-radius(50%);
    .lh-translate(-50%, -50%);
    .lh-transition(border 450ms @ease-out-function, width 450ms @ease-out-function, height 450ms @ease-out-function);
    .handle-size(@slider-handle-size);

    &:focus {
      outline: none;
    }
  }

  &:not(.mui-disabled) {
    .mui-slider-handle {
      border: 0px solid transparent;
      background-color: @slider-selection-color;
      &:active {
        .handle-size(@slider-handle-size-active);
      }
    }

    &:hover, &:focus {
      .mui-slider-selection-high {
        .mui-slider-selection-fill {
          background: @slider-track-color-selected;
        }
      }

      &:not(.mui-slider-zero) {
        .mui-slider-handle:not(:active) {
          border: @slider-handle-size solid fade(@slider-selection-color, 20%);
          .handle-size(@slider-handle-size-active + @slider-handle-size);
        }
      }
    }

    &.mui-slider-zero {
      .mui-slider-handle {
        border: @slider-track-size solid @slider-track-color;
        background-color: transparent;
        .lh-box-shadow(none);

        &:active {
          border-color: @slider-track-color-selected;
          width: @slider-handle-size-active !important;
          height: @slider-handle-size-active !important;
          .lh-transition(background-color 450ms @ease-out-function, width 450ms @ease-out-function, height 450ms @ease-out-function);

          & ~ .mui-slider-selection-high .mui-slider-selection-fill {
            margin-left: @slider-handle-size !important;
            .ease-out(@property: margin);
          }
        }
      }

      &:hover, &:focus {
        .mui-slider-handle {
          @size: @slider-handle-size + @slider-track-size;
          border: @slider-track-size solid @slider-handle-color-zero;
          width: @size;
          height: @size;
        }
      }
    }
  }

  &.mui-disabled {
    @gutter: (@slider-handle-size-disabled + @slider-track-size) / 2;

    cursor: not-allowed;

    .mui-slider-selection-fill {
      background-color: @slider-track-color;
    }

    .mui-slider-handle {
      cursor: not-allowed;
      background-color: @slider-track-color;
      .handle-size(@slider-handle-size-disabled);
    }

    &.mui-slider-zero {
      .mui-slider-selection-low .mui-slider-selection-fill {
        margin-right: @gutter;
      }
      .mui-slider-selection-high .mui-slider-selection-fill {
        margin-left: @gutter;
      }
      .mui-slider-handle {
        border: @slider-track-size solid @slider-track-color;
        background-color: transparent;
      }
    }
  }
}