mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
156 lines
3.4 KiB
SCSS
156 lines
3.4 KiB
SCSS
@import "./range";
|
|
@import "./range.md.vars";
|
|
|
|
// Material Design Range
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
--knob-border-radius: 50%;
|
|
--knob-background: var(--bar-background-active);
|
|
--knob-box-shadow: none;
|
|
--knob-size: 18px;
|
|
--bar-height: #{$range-md-bar-height};
|
|
--bar-background: #{$range-md-bar-background-color};
|
|
--bar-background-active: #{ion-color(primary, base)};
|
|
--height: #{$range-md-slider-height};
|
|
--pin-background: #{ion-color(primary, base)};
|
|
--pin-color: #{ion-color(primary, contrast)};
|
|
|
|
@include padding($range-md-padding-vertical, $range-md-padding-horizontal);
|
|
|
|
font-size: $range-md-pin-font-size;
|
|
}
|
|
|
|
:host(.ion-color) .range-bar-active,
|
|
:host(.ion-color) .range-knob,
|
|
:host(.ion-color) .range-pin,
|
|
:host(.ion-color) .range-pin::before {
|
|
background: current-color(base);
|
|
color: current-color(contrast);
|
|
}
|
|
|
|
// TODO: REVIEW
|
|
// .range-md [slot="range-start"] {
|
|
// @include margin(0, 12px, 0, 0);
|
|
// }
|
|
|
|
// .range-md [slot="range-end"] {
|
|
// @include margin(0, 0, 0, 12px);
|
|
// }
|
|
|
|
:host(.range-has-pin) {
|
|
@include padding($range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding-vertical, null, null, null);
|
|
}
|
|
|
|
.range-bar-active {
|
|
bottom: 0;
|
|
|
|
width: auto;
|
|
|
|
background: var(--bar-background-active);
|
|
}
|
|
|
|
.range-knob {
|
|
transform: scale(.67);
|
|
|
|
transition-duration: 120ms;
|
|
transition-property: transform, background-color, border;
|
|
transition-timing-function: ease;
|
|
|
|
z-index: 2;
|
|
}
|
|
|
|
.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);
|
|
|
|
width: $range-md-tick-width;
|
|
height: $range-md-tick-height;
|
|
|
|
background: $range-md-tick-background-color;
|
|
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.range-tick-active {
|
|
background: $range-md-tick-active-background-color;
|
|
}
|
|
|
|
.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));
|
|
|
|
display: inline-block;
|
|
position: relative;
|
|
top: -20px;
|
|
|
|
min-width: 28px;
|
|
height: 28px;
|
|
|
|
transition: transform 120ms ease, background 120ms ease;
|
|
|
|
background: var(--pin-background);
|
|
color: var(--pin-color);
|
|
|
|
text-align: center;
|
|
|
|
&::before {
|
|
@include position(3px, null, null, 50%);
|
|
@include border-radius(50%, 50%, 50%, 0);
|
|
@include margin-horizontal(-13px, null);
|
|
|
|
position: absolute;
|
|
|
|
width: 26px;
|
|
height: 26px;
|
|
|
|
transform: rotate(-45deg);
|
|
|
|
transition: background 120ms ease;
|
|
|
|
background: var(--pin-background);
|
|
|
|
content: "";
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
.range-knob-pressed .range-pin {
|
|
@include transform(translate3d(0, 0, 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 {
|
|
background-color: $range-md-bar-background-color;
|
|
}
|
|
|
|
:host(.range-disabled) .range-knob {
|
|
transform: scale(.55);
|
|
|
|
outline: 5px solid #fff;
|
|
|
|
background-color: $range-md-bar-background-color;
|
|
}
|