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

ionic-team · Oct 30, 2018 · b2f493f · b2f493f
1 parent d5f2e6f
commit b2f493f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 49 deletions.
diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.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;
 }
 

diff --git a/core/src/components/range/range.md.vars.scss b/core/src/components/range/range.md.vars.scss
@@ -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;