diff --git a/core/src/components/range/range.ionic.scss b/core/src/components/range/range.ionic.scss index 8d75a8ff4c..1fb063e4da 100644 --- a/core/src/components/range/range.ionic.scss +++ b/core/src/components/range/range.ionic.scss @@ -63,7 +63,7 @@ * overlapping the range. The buffer is added to the * bottom of the range label instead of the host. */ - @include padding(calc(globals.$ion-space-200 + globals.dynamic-font(12px)), null, null, null); + @include padding(calc(globals.$ion-space-100 + globals.$ion-scale-600), null, null, null); } :host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper { @@ -107,12 +107,11 @@ } .range-pin { - @include transform(translate3d(0, 100%, 0), scale(0.01)); - @include padding(globals.$ion-space-200, globals.$ion-space-200, globals.$ion-space-200, globals.$ion-space-200); + @include padding(null, null, globals.$ion-space-100, null); min-width: globals.$ion-scale-700; - transition: transform 120ms ease; + transform: translate3d(0, calc(-100%), 0); background: transparent; @@ -128,20 +127,6 @@ box-sizing: border-box; } -/** - * The -100% ensures the pin sits on top - * of the range-knob-handle container. - * We apply 11px so that the pin - * text is closer to the knob inside of the container. - * We also apply the 11px here instead of using "top" - * otherwise the pin text will translate below the knob - * when the text is scaled. - */ -.range-knob-pressed .range-pin, -.range-knob-handle.ion-focused .range-pin { - transform: translate3d(0, calc(-100% + 11px), 0) scale(1); -} - // Ionic Range: Disabled (based on iOS Range) // -------------------------------------------------- // When the range is disabled, the entire range, diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Chrome-linux.png index b32c674809..52b2967bcb 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Firefox-linux.png index 9023918ae9..504bafc8b4 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Safari-linux.png index 6415db4bfc..d1b3f61870 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-pin-ionic-md-ltr-light-Mobile-Safari-linux.png differ