javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +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-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;
}

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
$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;