From 2d05a9893295a79611df0426713464a572c9014c Mon Sep 17 00:00:00 2001 From: Jesper Kaltoft Vind Date: Mon, 28 Mar 2022 09:13:54 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Apply=20interaction=20state=20ho?= =?UTF-8?q?ver=20for=20Range=20(#2132)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/lib/components/range/range.component.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/libs/designsystem/src/lib/components/range/range.component.scss b/libs/designsystem/src/lib/components/range/range.component.scss index 5ee0731e16..bfb8f29827 100644 --- a/libs/designsystem/src/lib/components/range/range.component.scss +++ b/libs/designsystem/src/lib/components/range/range.component.scss @@ -13,6 +13,9 @@ $knob-shadow: 0 5px 10px 0px rgba(28, 28, 28, 0.3), 0 0 5px 0 rgba(28, 28, 28, 0 ion-range { @include interaction-state.apply-focus-part($part: 'knob', $shadow: $knob-shadow); + @include interaction-state.apply-hover { + --knob-background: #{interaction-state.get-state-color('white', 's')}; + } --knob-background: #{utils.get-color('white')}; --knob-box-shadow: #{$knob-shadow}; @@ -45,6 +48,10 @@ ion-range { padding: 0 $tickWidth * 0.5; } + &::part(knob) { + @include interaction-state.transition(background); + } + &::part(pin) { font-size: utils.font-size('xs'); color: var(--pin-color);