Skip to content
Permalink
Browse files

fix(range): match MD spec (#16150)

  • Loading branch information...
camwiegert authored and adamdbradley committed Oct 30, 2018
1 parent d5f2e6f commit b2f493fb0e8167ec99f40ab05e60b6fd3e63ca03
Showing with 17 additions and 49 deletions.
  1. +17 −28 core/src/components/range/range.md.scss
  2. +0 −21 core/src/components/range/range.md.vars.scss
@@ -10,7 +10,7 @@
--knob-box-shadow: none;
--knob-size: 18px;
--bar-height: #{$range-md-bar-height};
--bar-background: #{$range-md-bar-background-color};
--bar-background: #{ion-color(primary, base, 0.26)};
--bar-background-active: #{ion-color(primary, base)};
--height: #{$range-md-slider-height};
--pin-background: #{ion-color(primary, base)};
@@ -24,11 +24,16 @@
:host(.ion-color) .range-bar-active,
:host(.ion-color) .range-knob,
:host(.ion-color) .range-pin,
:host(.ion-color) .range-pin::before {
:host(.ion-color) .range-pin::before,
:host(.ion-color) .range-tick {
background: current-color(base);
color: current-color(contrast);
}

:host(.ion-color) .range-bar {
background: current-color(base, 0.26);
}

// TODO: REVIEW
// .range-md [slot="range-start"] {
// @include margin(0, 12px, 0, 0);
@@ -61,33 +66,29 @@
}

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

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

width: $range-md-tick-width;
height: $range-md-tick-height;
width: var(--bar-height);
height: var(--bar-height);

background: $range-md-tick-background-color;
background: var(--bar-background-active);

z-index: 1;
pointer-events: none;
}

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

.range-pin {
@include padding($range-md-pin-padding-vertical, $range-md-pin-padding-horizontal);
@include border-radius(50%);
@include transform(translate3d(0, 28px, 0), scale(.01));
@include transform(translate3d(0, 0, 0), scale(.01));

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

min-width: 28px;
height: 28px;
@@ -121,28 +122,16 @@
}

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

:host(:not(.range-has-pin)) .range-knob-pressed .range-knob {
transform: scale(1);
}

.range-knob-min.range-knob-min {
.range-knob {
border: $range-md-knob-min-border;

background: $range-md-knob-min-background-color;
}

.range-pin,
.range-pin::before {
background: $range-md-pin-min-background-color;
color: ion-color(primary, contrast);
}
}

:host(.range-disabled) .range-bar-active {
:host(.range-disabled) .range-bar-active,
:host(.range-disabled) .range-bar,
:host(.range-disabled) .range-tick {
background-color: $range-md-bar-background-color;
}

@@ -36,27 +36,6 @@ $range-md-knob-height: $range-md-knob-width !default;
/// @prop - Background of the range knob
$range-md-knob-background-color: $range-md-bar-active-background-color !default;

/// @prop - Background of the range knob when the value is the minimum
$range-md-knob-min-background-color: $background-color !default;

/// @prop - Border of the range knob when the value is the minimum
$range-md-knob-min-border: 2px solid $range-md-bar-background-color !default;

/// @prop - Width of the range tick
$range-md-tick-width: 2px !default;

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

/// @prop - Border radius of the range tick
$range-md-tick-border-radius: 50% !default;

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

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

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

0 comments on commit b2f493f

Please sign in to comment.
You can’t perform that action at this time.