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

chore(range): pin css variables available on MD only (#25433)

Browse Source
This commit is contained in:
Sean Perkins
2022-06-10 13:17:02 -04:00
committed by GitHub
parent d3060102fd
commit a8fb570c3c
1 changed files with 5 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
core/src/components/range/range.scss
View File

@ -14,8 +14,8 @@
* @prop --knob-border-radius: Border radius of the range knob * @prop --knob-border-radius: Border radius of the range knob
* @prop --knob-box-shadow: Box shadow of the range knob * @prop --knob-box-shadow: Box shadow of the range knob
* @prop --knob-size: Size of the range knob * @prop --knob-size: Size of the range knob
* @prop --pin-background: Background of the range pin * @prop --pin-background: Background of the range pin (only available in MD mode)
* @prop --pin-color: Color of the range pin * @prop --pin-color: Color of the range pin (only available in MD mode)
*/ */
--knob-handle-size: calc(var(--knob-size) * 2); --knob-handle-size: calc(var(--knob-size) * 2);
@ -72,14 +72,8 @@
} }
.range-knob-handle { .range-knob-handle {
@include position( @include position(calc((var(--height) - var(--knob-handle-size)) / 2), null, null, 0);
calc((var(--height) - var(--knob-handle-size)) / 2), @include margin-horizontal(calc(0px - var(--knob-handle-size) / 2), null);
null, null, 0
);
@include margin-horizontal(
calc(0px - var(--knob-handle-size) / 2),
null
);
@include rtl() { @include rtl() {
/* stylelint-disable-next-line property-disallowed-list */ /* stylelint-disable-next-line property-disallowed-list */
@ -120,11 +114,7 @@
.range-knob { .range-knob {
@include border-radius(var(--knob-border-radius)); @include border-radius(var(--knob-border-radius));
@include position( @include position(calc(50% - var(--knob-size) / 2), null, null, calc(50% - var(--knob-size) / 2));
calc(50% - var(--knob-size) / 2),
null, null,
calc(50% - var(--knob-size) / 2)
);
@include rtl() { @include rtl() {
/* stylelint-disable-next-line property-disallowed-list */ /* stylelint-disable-next-line property-disallowed-list */
@ -147,7 +137,6 @@
will-change: left, right; will-change: left, right;
} }
// Range in Item // Range in Item
// ---------------------------- // ----------------------------
@ -165,13 +154,10 @@
// width: 100%; // width: 100%;
// } // }
:host(.in-item) { :host(.in-item) {
width: 100%; width: 100%;
} }
:host(.in-item) ::slotted(ion-label) { :host(.in-item) ::slotted(ion-label) {
align-self: center; align-self: center;
} }