Interaction state hover for input (#2131)

* 💄 Use apply-hover and transition in item * 💄 Set loudness correctly
kirbydesign · Mar 25, 2022 · 66831eb · 66831eb
1 parent 5b56b1a
commit 66831eb
Showing 1 changed file with 7 additions and 0 deletions.
diff --git a/libs/designsystem/src/lib/components/form-field/input/input.component.scss b/libs/designsystem/src/lib/components/form-field/input/input.component.scss
@@ -1,7 +1,14 @@
 @use '../form-field-inputs.shared' as shared;
+@use "~@kirbydesign/core/src/scss/interaction-state";
 @use "~@kirbydesign/core/src/scss/utils";
 
 :host {
+  @include interaction-state.transition(background-color);
+  @include interaction-state.apply-hover() {
+    background-color: interaction-state.get-state-color('white', 's');
+    cursor: text;
+  }
+
   &[type='number'] {
     //fallback
     appearance: textfield;