ionic-angular/components/range/range.wp.scss

@import "../../themes/ionic.globals.wp";

// Windows Range
// --------------------------------------------------

/// @prop - Padding top/bottom of the range
$range-wp-padding-vertical:                  8px !default;

/// @prop - Padding start/end of the range
$range-wp-padding-horizontal:                8px !default;

/// @prop - Height of the range slider
$range-wp-slider-height:                     42px !default;

/// @prop - Width of the area that will select the range knob
$range-wp-hit-width:                         42px !default;

/// @prop - Height of the area that will select the range knob
$range-wp-hit-height:                        $range-wp-slider-height !default;

/// @prop - Height of the range bar
$range-wp-bar-height:                        2px !default;

/// @prop - Background of the range bar
$range-wp-bar-background-color:              #bdbdbd !default;

/// @prop - Background of the active range bar
$range-wp-bar-active-background-color:       color($colors-wp, primary) !default;

/// @prop - Width of the range knob
$range-wp-knob-width:                        8px !default;

/// @prop - Height of the range knob
$range-wp-knob-height:                       $range-wp-knob-width * 3 !default;

/// @prop - Background of the range knob
$range-wp-knob-background-color:             $range-wp-bar-active-background-color !default;

/// @prop - Border radius of the range knob
$range-wp-knob-border-radius:                $range-wp-knob-width / 2 !default;

/// @prop - Width of the range tick
$range-wp-tick-width:                        $range-wp-bar-height !default;

/// @prop - Height of the range tick
$range-wp-tick-height:                       $range-wp-tick-width * 3 !default;

/// @prop - Border radius of the range tick
$range-wp-tick-border-radius:                $range-wp-knob-width / 2 !default;

/// @prop - Background of the range tick
$range-wp-tick-background-color:             $range-wp-bar-background-color !default;

/// @prop - Background of the active range tick
$range-wp-tick-active-background-color:      $range-wp-bar-active-background-color !default;

/// @prop - Background of the range pin
$range-wp-pin-background-color:              $range-wp-bar-active-background-color !default;

/// @prop - Color of the range pin
$range-wp-pin-color:                         color-contrast($colors-wp, $range-wp-bar-active-background-color) !default;

/// @prop - Font size of the range pin
$range-wp-pin-font-size:                     12px !default;

// deprecated
$range-wp-pin-padding:                       null !default;

/// @prop - Padding top of the range pin
$range-wp-pin-padding-top:                   8px !default;

/// @prop - Padding end of the range pin
$range-wp-pin-padding-end:                   $range-wp-pin-padding-top !default;

/// @prop - Padding bottom of the range pin
$range-wp-pin-padding-bottom:                $range-wp-pin-padding-top !default;

/// @prop - Padding start of the range pin
$range-wp-pin-padding-start:                 $range-wp-pin-padding-end !default;


.range-wp {
  @include padding($range-wp-padding-vertical, $range-wp-padding-horizontal);
}

.range-wp [range-left] {
  @include margin(0, 12px, 0, 0);
}

.range-wp [range-right] {
  @include margin(0, 0, 0, 12px);
}

.range-wp.range-has-pin {
  @include padding($range-wp-padding-vertical + $range-wp-pin-font-size + $range-wp-pin-padding-top, null, null, null);
}

.range-wp .range-slider {
  height: $range-wp-slider-height;
}

.range-wp .range-bar {
  @include position(($range-wp-slider-height / 2), null, null, 0);

  position: absolute;

  width: 100%;
  height: $range-wp-bar-height;

  background: $range-wp-bar-background-color;

  pointer-events: none;
}

.range-wp.range-pressed .range-bar-active {
  will-change: left, right;
}

.range-wp.range-pressed .range-knob-handle {
  will-change: left;
}

.range-wp .range-bar-active {
  bottom: 0;

  width: auto;

  background: $range-wp-bar-active-background-color;
}

.range-wp .range-knob-handle {
  @include position(($range-wp-slider-height / 2), null, null, 0);
  @include margin(-($range-wp-hit-height / 2), null, null, -($range-wp-hit-width / 2));
  @include text-align(center);

  position: absolute;

  width: $range-wp-hit-width;
  height: $range-wp-hit-height;
}

.range-wp .range-knob {
  @include position(($range-wp-hit-height / 2) - ($range-wp-knob-height / 2) + ($range-wp-bar-height / 2),
          null, null, ($range-wp-hit-width / 2) - ($range-wp-knob-width / 2));
  @include border-radius($range-wp-knob-border-radius);

  position: absolute;

  width: $range-wp-knob-width;
  height: $range-wp-knob-height;

  background: $range-wp-knob-background-color;

  pointer-events: none;
}

.range-wp .range-tick {
  @include margin-horizontal(-($range-wp-tick-width / 2), null);
  @include border-radius($range-wp-tick-border-radius);

  position: absolute;
  top: ($range-wp-hit-height / 2) - ($range-wp-tick-height / 2) + ($range-wp-bar-height / 2);

  width: $range-wp-tick-width;
  height: $range-wp-tick-height;

  background: $range-wp-tick-background-color;

  pointer-events: none;
}

.range-wp .range-tick-active {
  background: $range-wp-tick-active-background-color;
}

.range-wp .range-pin {
  @include text-align(center);
  @include border-radius(50px);
  @include transform(translate3d(0, 28px, 0), scale(.01));

  position: relative;
  top: -24px;
  display: inline-block;

  min-width: 28px;

  font-size: $range-wp-pin-font-size;

  color: $range-wp-pin-color;

  background: $range-wp-pin-background-color;

  transition: transform 120ms ease;

  @include deprecated-variable(padding, $range-wp-pin-padding) {
    @include padding($range-wp-pin-padding-top, $range-wp-pin-padding-end, $range-wp-pin-padding-bottom, $range-wp-pin-padding-start);
  }
}

.range-wp .range-knob-pressed .range-pin {
  @include transform(translate3d(0, 0, 0), scale(1));
}

.range-wp.range-disabled {
  opacity: .5;
}

// Generate Windows Range Colors
// --------------------------------------------------

@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {

  .range-wp-#{$color-name} {
    .range-bar-active,
    .range-tick-active,
    .range-knob,
    .range-pin {
      background: $color-base;
    }
  }

}