diff --git a/core/src/components/range/range.ionic.scss b/core/src/components/range/range.ionic.scss index 3c96541169..81f1c0334b 100644 --- a/core/src/components/range/range.ionic.scss +++ b/core/src/components/range/range.ionic.scss @@ -6,15 +6,15 @@ :host { --knob-border-radius: #{globals.$ion-border-radius-full}; - --knob-background: #{globals.$ion-primitives-base-white}; + --knob-background: #{globals.$ion-bg-input-default}; --knob-box-shadow: none; --knob-size: #{globals.$ion-scale-600}; - --knob-handle-size: #{globals.$ion-scale-1000}; + --knob-handle-size: #{globals.$ion-scale-1100}; --bar-height: #{globals.$ion-scale-200}; - --bar-background: #{globals.$ion-primitives-neutral-100}; + --bar-background: #{globals.$ion-bg-neutral-subtle-default}; --bar-background-active: #{globals.ion-color(primary, base)}; --bar-border-radius: #{globals.$ion-border-radius-400}; - --height: #{globals.$ion-scale-1000}; + --height: #{globals.$ion-scale-1100}; @include globals.typography(globals.$ion-body-md-regular); @@ -75,7 +75,7 @@ @include margin(null, null, calc(globals.$ion-space-200 + globals.$ion-font-size-300), null); } -.range-bar-active { +.range-bar.range-bar-active { bottom: 0; width: auto; @@ -115,6 +115,8 @@ background: transparent; + color: globals.$ion-text-default; + font-size: globals.$ion-font-size-300; text-align: center; @@ -123,7 +125,7 @@ .range-knob { border-width: globals.$ion-border-size-025; border-style: globals.$ion-border-style-solid; - border-color: globals.ion-color(primary, base); + border-color: globals.$ion-border-primary; box-sizing: border-box; } @@ -134,7 +136,13 @@ // icons need to receive the same opacity. :host(.range-disabled) { - opacity: 0.3; + --bar-background: #{globals.$ion-bg-neutral-subtle-default}; + + .range-knob { + border-color: globals.$ion-border-input-default; + + background: globals.$ion-bg-input-disabled; + } } // Range Label Placement - Start @@ -207,3 +215,10 @@ .range-knob-handle.ion-focused .range-knob { @include globals.focused-state(); } + +// Range Pressed +// ---------------------------------------------------------------- +.range-knob-handle.ion-activated .range-knob, +.range-knob-handle.range-knob-pressed .range-knob { + background: globals.$ion-bg-input-press; +} diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index 0f2b311bd9..7debc61f2d 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index 23bdef180b..f4d6e332ba 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Safari-linux.png index 0e4ba145d1..9855a1a63b 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Chrome-linux.png index 52c5e22b0a..0d1dd66e07 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Firefox-linux.png index 1e27e871be..e011cfd8e4 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Safari-linux.png index c87732239a..6f9c17e886 100644 Binary files a/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/range/test/basic/range.e2e.ts-snapshots/range-dual-knobs-ionic-md-ltr-light-Mobile-Safari-linux.png differ 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 eec7909ecf..6cf45a2b1c 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 319e2f7b8a..c0a63e623c 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 f381b98d5d..87d0ab1c77 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 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 e87c45f4dd..2a91c927f3 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 a8b3025458..5661741c8c 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 ba96beaf15..73b0a549c7 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 diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png index 711a6ac833..f9492a521a 100644 Binary files a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png index 0c45153c6f..94708420cb 100644 Binary files a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Safari-linux.png index 9689484cfd..e8edd2d096 100644 Binary files a/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/range/test/states/range.e2e.ts-snapshots/range-focus-ionic-md-ltr-light-Mobile-Safari-linux.png differ