formstone/src/less/themes/light/range.less

Library of modular front end components.

/**
 * @theme
 * @name Light
 * @component Range
 */

.fs-range {

  @import "_config.less";

  @theme_name: fs-light;

  // Config

  @fs-range-track-height: 20px;

  @fs-range-track-background-color: @fs-light-white;
  @fs-range-track-border-color: @fs-light-primary_600;
  @fs-range-track-border-width: 1px;
  @fs-range-track-border-radius: 2px;

  @fs-range-track-margin: 10px 0;

  @fs-range-hover-track-border-color: @fs-light-primary_900;

  // Fill

  @fs-range-fill-color: @fs-light-primary_300;

  // Track

  @fs-range-marker-size: 30px;
  @fs-range-marker-margin: -6px;

  @fs-range-marker-background-color: @fs-light-primary_600;
  @fs-range-marker-border-radius: 2px;

  @fs-range-hover-marker-background-color: @fs-light-primary_900;

  // Icon

  @fs-range-marker-icon-color: @fs-light-white;
  @fs-range-marker-icon-width: 2px;
  @fs-range-marker-icon-height: 10px;
  @fs-range-marker-icon-gap: 1px;

  // Labels

  @fs-range-label-text-color: @fs-light-primary_900;
  @fs-range-label-font-size: 14px;
  @fs-range-label-line-height: 38px;

  // Vertical

  @fs-range-vertical-height: 300px;
  @fs-range-vertical-label-line-height: 38px;
  @fs-range-vertical-track-width: 20px;

  // Disabled

  @fs-range-disabled-opacity: 0.5;


  &.@{theme_name}  &-track {
    height: @fs-range-track-height;

    background: @fs-range-track-background-color;
    border: @fs-range-track-border-width solid @fs-range-track-border-color;
    border-radius: @fs-range-track-border-radius;
    margin: @fs-range-track-margin;
  }

  &.@{theme_name}  &-fill {
    background: @fs-range-fill-color;
  }

  &.@{theme_name} &-marker {
    width: @fs-range-marker-size;
    height: @fs-range-marker-size;

    position: relative;

    background: @fs-range-marker-background-color;
    border-radius: @fs-range-marker-border-radius;
    margin: @fs-range-marker-margin 0 0 -(@fs-range-marker-size / 2);

    &:after {
      width: @fs-range-marker-icon-width;
      height: @fs-range-marker-icon-height;

      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      background: @fs-range-marker-icon-color;
      box-shadow:
        (@fs-range-marker-icon-width + @fs-range-marker-icon-gap) 0 0 @fs-range-marker-icon-color,
        -(@fs-range-marker-icon-width + @fs-range-marker-icon-gap) 0 0 @fs-range-marker-icon-color;
      content: '';
      margin: auto;
    }
  }

  // Focus

  .@{theme_name}&-focus &-track,
  .no-touchevents .@{theme_name}:hover &-track {
    border-color: @fs-range-hover-track-border-color;
  }

  .@{theme_name}&-focus &-marker,
  .no-touchevents .@{theme_name}:hover &-marker {
    background: @fs-range-hover-marker-background-color;
  }

  // Labels

  .@{theme_name}&-labels &-track {
  }

  &.@{theme_name} &-label {
    color: @fs-range-label-text-color;
    font-size: @fs-range-label-font-size;
    line-height: @fs-range-label-line-height;
  }

  &.@{theme_name} &-label_min {
  }

  &.@{theme_name} &-label_max {
  }

  // Vertical

  .@{theme_name}&-vertical {
    width: (@fs-range-marker-size * 2);
    height: @fs-range-vertical-height;
  }

  .@{theme_name}&-vertical &-track {
    width: @fs-range-vertical-track-width;
    height: 75%;

    margin: 0 auto;
  }

  .@{theme_name}&-vertical &-fill {
  }

  .@{theme_name}&-vertical &-handle {
  }

  .@{theme_name}&-vertical &-marker {
    margin: -(@fs-range-marker-size / 2) 0 0 @fs-range-marker-margin;
  }

  .@{theme_name}&-vertical &-label {
    line-height: @fs-range-vertical-label-line-height;
  }

  .@{theme_name}&-vertical &-label_min {
  }

  .@{theme_name}&-vertical &-label_max {
  }

  // Disabled

  .@{theme_name}&-disabled {
    opacity: @fs-range-disabled-opacity;
  }

  .@{theme_name}&-disabled &-marker {
    cursor: default;
  }

  .@{theme_name}&-disabled&-focus &-track,
  .no-touchevents .@{theme_name}&-disabled:hover &-track {
    border-color: @fs-range-track-border-color;
  }

  .@{theme_name}&-disabled&-focus &-marker,
  .no-touchevents .@{theme_name}&-disabled:hover &-marker {
    background: @fs-range-marker-background-color;
  }
}