Update form fields to match style guide

Updates inputs, select, form field background
color, validation text size, and field focus state.

New styles have a darker form field background color.
Form fields on dark backgrounds will remain white.

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Ifa14a57f764335b196b129e6614d7a1f1c27d7ad

2 files changed, 62 insertions, 14 deletions

diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 1195f6cb..b7747bf3 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -1,12 +1,17 @@
+// Helper text
 .form-text {
+  font-size: $form-label-font-size;
+  line-height: $form-line-height;
   margin-top: -$spacer / 4;
   margin-bottom: $spacer / 2;
-  color: gray("800");
+  color: gray("700")!important;
 }
 
+// Legend label
 .col-form-label {
   color: gray("800");
-  font-size: 14px;
+  font-size: $form-label-font-size;
+  line-height: $form-line-height;
 }
 
 .form-group {
@@ -14,24 +19,69 @@
 }
 
 .custom-select,
-.custom-control-label,
+.form-control,
+.input-group-text {
+  border-color: gray("500") !important;
+  background-color: gray("100");
+}
+
+.custom-select,
 .form-control {
-  //important needed to override validation colors on radio labels
-  color: theme-color("dark") !important;
-  font-size: 16px;
-  border-color: gray("400") !important;
+  &:active {
+    border: 1px solid $primary!important;
+  }
+  &:focus {
+    color: theme-color("dark");
+    background-color: gray("100");
+    box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px theme-color("primary") !important;
+  }
+  &:disabled {
+    background-color: gray("400");
+    color: gray("600");
+  }
+  &::placeholder {
+    color: gray("600");
+  }
   &.is-invalid,
   &:invalid {
-    border-bottom: 2px solid theme-color("danger") !important;
+    border: 1px solid theme-color("danger") !important;
+  }
+}
+
+.custom-select,
+.custom-control-label,
+.form-control {
+  color: theme-color("dark");
+  font-size: 1rem;
+}
+
+// Inverted form colors
+.form-background {
+  background-color: gray("100");
+  .custom-select,
+  .form-control {
+    background-color: $white;
+    &:focus {
+      background-color: $white;
+    }
+    &:disabled {
+      background-color: gray("400");
+      color: gray("600");
+    }
   }
 }
 
+.invalid-feedback {
+  font-size: $form-label-font-size;
+  line-height: $form-line-height;
+}
+
 .custom-control {
   .custom-control-input[disabled=disabled] {
     & + .custom-control-label {
       // Disabled label for checkbox, radio,
       // switch bootstrap form components
-      color: gray("700")!important;
+      color: gray("600")!important;
     }
   }
 }
@@ -50,7 +100,3 @@
     fill: currentColor;
   }
 }
-
-.form-background {
-  background-color: gray("200");
-}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss
index ea300ec7..eff2924c 100644
--- a/src/assets/styles/bmc/helpers/_variables.scss
+++ b/src/assets/styles/bmc/helpers/_variables.scss
@@ -8,4 +8,6 @@ $transition-collapse:         height $duration--slow-01 $standard-easing--expres
 // OpenBMC Custom Variables
 $responsive-layout-bp: lg;
 $header-height: 56px;
-$navigation-width: 300px;
\ No newline at end of file
+$navigation-width: 300px;
+$form-label-font-size: .875rem;
+$form-line-height: 1.25rem;
\ No newline at end of file