feat(input-field): allow setting background color of field

Lundalogik · Sep 10, 2019 · 08685c4 · 08685c4
1 parent 729127e
commit 08685c4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 14 deletions.
diff --git a/src/components/input-field/input-field.mdx b/src/components/input-field/input-field.mdx
@@ -8,10 +8,16 @@ menu: Components
 
 <limel-props name="limel-input-field" />
 
+## CSS variables
+
+| Name                          | Description                   |
+| ----------------------------- | ----------------------------- |
+| --background-color            | Background color of the field |
+
 ## Examples
 
 ### Input field of type text
 <limel-example name="limel-example-input-field-text" /> 
 
 ### Input field of type number
-<limel-example name="limel-example-input-field-number" /> 
+<limel-example name="limel-example-input-field-number" /> 
diff --git a/src/components/input-field/input-field.scss b/src/components/input-field/input-field.scss
@@ -11,6 +11,10 @@
 
 .mdc-text-field {
     width: 100%;
+
+    .mdc-text-field__input {
+        background-color: var(--background-color, white);
+    }
 }
 
 .mdc-text-field__formatted_input {
@@ -41,16 +45,3 @@
         color: rgba(0, 0, 0, 0.37);
     }
 }
-
-// .mdc-text-field {
-//     &.mdc-text-field--with-trailing-icon {
-//         .mdc-text-field__input {
-//             padding-left: 0;
-//         }
-
-//         .mdc-text-field__icon {
-//             bottom: 0.5rem;
-//             font-style: normal;
-//         }
-//     }
-// }