javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Cam Wiegert
2018-10-30 16:46:01 -05:00
committed by Adam Bradley
parent d5f2e6fdd8
commit b2f493fb0e
2 changed files with 17 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
core/src/components/range/range.md.scss
View File

@ -10,7 +10,7 @@
--knob-box-shadow: none; --knob-box-shadow: none;
--knob-size: 18px; --knob-size: 18px;
--bar-height: #{$range-md-bar-height}; --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)}; --bar-background-active: #{ion-color(primary, base)};
--height: #{$range-md-slider-height}; --height: #{$range-md-slider-height};
--pin-background: #{ion-color(primary, base)}; --pin-background: #{ion-color(primary, base)};
@ -24,11 +24,16 @@
:host(.ion-color) .range-bar-active, :host(.ion-color) .range-bar-active,
:host(.ion-color) .range-knob, :host(.ion-color) .range-knob,
:host(.ion-color) .range-pin, :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); background: current-color(base);
color: current-color(contrast); color: current-color(contrast);
} }
:host(.ion-color) .range-bar {
background: current-color(base, 0.26);
}
// TODO: REVIEW // TODO: REVIEW
// .range-md [slot="range-start"] { // .range-md [slot="range-start"] {
// @include margin(0, 12px, 0, 0); // @include margin(0, 12px, 0, 0);
@ -61,33 +66,29 @@
} }
.range-tick { .range-tick {
@include margin-horizontal(-($range-md-tick-width / 2), null);
@include border-radius($range-md-tick-border-radius);
position: absolute; 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; width: var(--bar-height);
height: $range-md-tick-height; height: var(--bar-height);
background: $range-md-tick-background-color; background: var(--bar-background-active);
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
} }
.range-tick-active { .range-tick-active {
background: $range-md-tick-active-background-color; background: transparent;
} }
.range-pin { .range-pin {
@include padding($range-md-pin-padding-vertical, $range-md-pin-padding-horizontal); @include padding($range-md-pin-padding-vertical, $range-md-pin-padding-horizontal);
@include border-radius(50%); @include border-radius(50%);
@include transform(translate3d(0, 28px, 0), scale(.01)); @include transform(translate3d(0, 0, 0), scale(.01));
display: inline-block; display: inline-block;
position: relative; position: relative;
top: -20px;
min-width: 28px; min-width: 28px;
height: 28px; height: 28px;
@ -121,28 +122,16 @@
} }
.range-knob-pressed .range-pin { .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 { :host(:not(.range-has-pin)) .range-knob-pressed .range-knob {
transform: scale(1); transform: scale(1);
} }
.range-knob-min.range-knob-min { :host(.range-disabled) .range-bar-active,
.range-knob { :host(.range-disabled) .range-bar,
border: $range-md-knob-min-border; :host(.range-disabled) .range-tick {
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 {
background-color: $range-md-bar-background-color; background-color: $range-md-bar-background-color;
} }

21
core/src/components/range/range.md.vars.scss
View File

@ -36,27 +36,6 @@ $range-md-knob-height: $range-md-knob-width !default;
/// @prop - Background of the range knob /// @prop - Background of the range knob
$range-md-knob-background-color: $range-md-bar-active-background-color !default; $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 /// @prop - Background of the range pin
$range-md-pin-background-color: $range-md-bar-active-background-color !default; $range-md-pin-background-color: $range-md-bar-active-background-color !default;