org.eclipse.osbp.themes/valo/components/_slider.scss

/**
 *
 * @group slider
 */
$v-slider-track-size: round($v-unit-size/8) !default;

/**
 *
 * @group slider
 */
$v-slider-track-border-radius: null !default;

/**
 *
 * @group slider
 */
$v-slider-handle-width: round($v-unit-size/1.8) !default;

/**
 *
 * @group slider
 */
$v-slider-handle-height: round($v-unit-size/1.8) !default;

/**
 *
 * @group slider
 */
$v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default;

/**
 *
 * @group slider
 */
$_valo-slider-base-margin-vertical: round(($v-unit-size - $v-slider-track-size)/2);

/**
 *
 * @group slider
 */
$_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);


/**
 *
 *
 * @param {string} $primary-stylename (v-slider) - 
 * @param {bool} $include-additional-styles - 
 *
 * @group slider
 */
@mixin valo-slider ($primary-stylename: v-slider, $include-additional-styles: contains($v-included-additional-styles, slider)) {

  // Round to an even number
  $v-slider-track-size: $v-slider-track-size + $v-slider-track-size%2;
  $v-slider-handle-width: $v-slider-handle-width + $v-slider-handle-width%2;
  $v-slider-handle-height: $v-slider-handle-height + $v-slider-handle-height%2;

  .#{$primary-stylename} {
    position: relative;

    &:focus {
      outline: none;

      .#{$primary-stylename}-handle:after {
        opacity: 1;

        .v-ie8 & {
          visibility: visible;
        }
      }
    }

    &.v-disabled {
      @include opacity($v-disabled-opacity);
    }
  }

  .#{$primary-stylename}-base {
    @include valo-progressbar-track-style;
    min-width: $v-unit-size * 2;
    height: $v-slider-track-size;
    margin: $_valo-slider-base-margin-vertical $_valo-slider-base-margin-horizontal;
    white-space: nowrap;
    overflow: hidden;
    border-radius: $v-slider-track-border-radius;

    &:before {
      content: "";
      position: absolute;
      top: $_valo-slider-base-margin-vertical;
      bottom: $_valo-slider-base-margin-vertical;
      left: $_valo-slider-base-margin-horizontal;
      width: $v-border-radius * 2;
      border-radius: $v-border-radius;
      border-left: valo-border($color: $v-selection-color, $context: $v-app-background-color);
    }

    &:after {
      @include valo-progressbar-indicator-style;
      content: "";
      display: inline-block;
      margin-left: -100%;
      width: 100%;
      vertical-align: top;

      .v-ie8 & {
        position: relative;
        left: round(-$v-slider-handle-width/2);
      }
    }
  }

  .v-has-width > .#{$primary-stylename}-base {
    min-width: 0;
  }

  .#{$primary-stylename}-handle {
    margin-top: round(($v-unit-size - $v-slider-track-size)/-2);
    width: .1px; // Firefox needs a non-zero value
    display: inline-block;
    vertical-align: top;

    &:before {
      @include valo-button-style;
    }

    &:after {
      border: valo-border();
      @include valo-button-focus-style($border-fallback: null);
      opacity: 0;
      @if $v-animations-enabled {
        @include transition(opacity 200ms);
      }

      .v-ie8 & {
        visibility: hidden;
      }
    }

    &:before,
    &:after {
      content: "";
      @include box-sizing(border-box);
      padding: 0;
      width: $v-slider-handle-width;
      height: $v-slider-handle-height;
      border-radius: $v-slider-handle-border-radius;
      position: absolute;
      z-index: 1;
      margin-top: round(($v-unit-size - $v-slider-handle-height)/2);
      margin-left: round($v-slider-handle-width/-2);
    }
  }

  .#{$primary-stylename}-feedback {
    @include valo-tooltip-style;
  }



  // Vertical



  .#{$primary-stylename}-vertical {
    padding: round($v-slider-handle-width/2) 0;
    height: $v-unit-size * 2 + $v-slider-handle-width; // Effectively min-height

    .#{$primary-stylename}-base {
      $bg-lightness: if(color-luminance($v-background-color) < 10, min($v-bevel-depth/2, 10%), min($v-bevel-depth/-2, -10%));
      @include valo-gradient($color: scale-color($v-background-color, $lightness: $bg-lightness, $saturation: $v-bevel-depth/-2), $direction: to left);
      width: $v-slider-track-size;
      height: 100% !important;
      min-width: 0;
      margin: 0 round(($v-unit-size - $v-slider-track-size)/2);

      &:before {
        top: auto;
        bottom: $_valo-slider-base-margin-horizontal;
        left: $_valo-slider-base-margin-vertical;
        right: $_valo-slider-base-margin-vertical;
        width: auto;
        height: $v-border-radius * 2;
        border-left: none;
        border-bottom: valo-border($color: $v-selection-color, $context: $v-app-background-color);
      }

      &:after {
        height: 101%;
        margin-left: 0;
        @include valo-gradient($color: $v-selection-color, $direction: to right);

        .v-ie8 & {
          top: round($v-slider-handle-width/2);
          left: 0;
          height: 130%;
        }
      }
    }

    .#{$primary-stylename}-handle {
      width: 0;
      height: .1px;
      width: $v-unit-size;
      display: block;

      &:before,
      &:after {
        width: $v-slider-handle-height;
        height: $v-slider-handle-width;
        margin-top: round($v-slider-handle-width/-2);
        margin-left: round(($v-slider-handle-height - $v-slider-track-size)/-2);
      }
    }
  }


  @if $include-additional-styles {
    .#{$primary-stylename}-no-indicator {
      @include valo-slider-no-indicator;
    }
  }

}



/**
 *
 *
 * @param {string} $primary-stylename (v-slider) - 
 * @param {color} $background-color ($v-background-color) - 
 *
 * @group slider
 */
@mixin valo-slider-track-style ($primary-stylename: v-slider, $background-color: $v-background-color) {
  .#{$primary-stylename}-base {
    @include valo-progressbar-track-style($background-color: $background-color);
    height: $v-slider-track-size;
  }

  &.#{$primary-stylename}-vertical {
    .#{$primary-stylename}-base {
      $bg-lightness: if(color-luminance($background-color) < 10, min($v-bevel-depth/2, 10%), min($v-bevel-depth/-2, -10%));
      @include valo-gradient($color: scale-color($background-color, $lightness: $bg-lightness, $saturation: $v-bevel-depth/-2), $direction: to left);
    }
  }
}

/**
 *
 *
 * @param {string} $primary-stylename (v-slider) - 
 * @param {color} $background-color ($v-selection-color) - 
 * @param {list} $border ($v-border) - 
 *
 * @group slider
 */
@mixin valo-slider-indicator-style ($primary-stylename: v-slider, $background-color: $v-selection-color, $border: $v-border) {
  .#{$primary-stylename}-base {
    &:before {
        border-color: first-color(valo-border($border: $border, $color: $background-color, $context: $v-app-background-color));
    }

    &:after {
      @include valo-progressbar-indicator-style($background-color: $background-color, $border: $border);
    }
  }

  &.#{$primary-stylename}-vertical {
    .#{$primary-stylename}-base {
      &:after {
        @include valo-gradient($color: $background-color, $direction: to right);
      }
    }
  }
}


/**
 *
 *
 * @param {string} $primary-stylename (v-slider) - 
 *
 * @group slider
 */
@mixin valo-slider-no-indicator ($primary-stylename: v-slider) {
  .#{$primary-stylename}-base:before,
  .#{$primary-stylename}-base:after {
    display: none;
  }
}


/**
 *
 *
 * @param {string} $primary-stylename (v-slider) - 
 * @param {color} $background-color ($v-background-color) - 
 *
 * @group slider
 */
@mixin valo-slider-handle-style ($primary-stylename: v-slider, $background-color: $v-background-color) {
  .#{$primary-stylename}-handle {
    &:before {
      @include valo-button-style($background-color: $background-color, $unit-size: null, $border-radius: null);
    }

    &:after {
      border: valo-border($color: $background-color);
      @include valo-button-focus-style($background-color: $background-color, $border-fallback: null);
    }
  }
}


/**
 *
 *
 * @param {string} $primary-stylename (v-slider) - 
 * @param {number} $tick-count (5) - 
 *
 * @group slider
 */
@mixin valo-slider-ticks ($primary-stylename: v-slider, $tick-count: 5) {
  $tick-size: max(1px, first-number($v-border));
  $tick-color: first-color(valo-border($strength: 0.7));

  &:before {
    content: "";
    height: 15%;
    position: absolute;
    @include linear-gradient(to right, $tick-color $tick-size, transparent $tick-size, $fallback: transparent);
    background-repeat: repeat-x;
    background-size: 100%/($tick-count - 1) - 0.1% 100%;
    left: $_valo-slider-base-margin-horizontal;
    right: $_valo-slider-base-margin-horizontal;
  }

  &.#{$primary-stylename}-vertical:before {
    height: auto;
    width: 15%;
    @include linear-gradient(to bottom, $tick-color $tick-size, transparent $tick-size, $fallback: transparent);
    background-repeat: repeat-y;
    background-size: 100% 100%/($tick-count - 1) - 0.01%;
    right: auto;
    left: 0;
    top: $_valo-slider-base-margin-horizontal;
    bottom: $_valo-slider-base-margin-horizontal;
  }
}