diff --git a/core/src/components/range/range.ionic.scss b/core/src/components/range/range.ionic.scss index 81f1c0334b8..7321f592fa1 100644 --- a/core/src/components/range/range.ionic.scss +++ b/core/src/components/range/range.ionic.scss @@ -21,6 +21,10 @@ z-index: globals.$ion-z-index-100; } +:host(.ticks) { + --bar-border-radius: globals.$ion-border-radius-0; +} + :host(.range-item-start-adjustment) { @include padding(null, null, null, globals.$ion-space-600); } @@ -83,22 +87,21 @@ background: var(--bar-background-active); &.has-ticks { - @include border-radius(0); @include margin(null, calc(-1 * globals.$ion-scale-100 * 0.5), null, calc(-1 * globals.$ion-scale-100 * 0.5)); } } .range-tick { @include margin-horizontal(calc(globals.$ion-scale-100 * -0.5), null); - @include border-radius(globals.$ion-border-radius-0); + @include border-radius(globals.$ion-border-radius-400); position: absolute; - top: calc((var(--height) * 0.5) - (globals.$ion-scale-300 * 0.5)); + top: calc((var(--height) * 0.5) - (globals.$ion-scale-400 * 0.5)); - width: globals.$ion-scale-100; - height: globals.$ion-scale-300; + width: globals.$ion-scale-050; + height: globals.$ion-scale-400; - background: globals.$ion-primitives-neutral-100; + background: var(--bar-background); pointer-events: none; } diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Chrome-linux.png index 893a5d09a54..5d804a02067 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Firefox-linux.png index 51e024b7917..01190eec362 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Safari-linux.png index 3337b5f3f8e..c8969eac342 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-ticks-ionic-md-ltr-light-Mobile-Safari-linux.png differ