💄 Apply interaction state hover for Range (#2132)

kirbydesign · Mar 28, 2022 · 2d05a98 · 2d05a98
1 parent d479ffa
commit 2d05a98
Showing 1 changed file with 7 additions and 0 deletions.
diff --git 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);