Add form input field validation icons

Updates form validation to match updated style guide:
- Datepicker and password toggle form field
  padding adjusted to accomodate validation icons
- Valid form validation icon is hidden
- Adds carbon icons and enables validation icons in
  IBM environment

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

1 files changed, 27 insertions, 0 deletions

diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index b7747bf3..60f4a84d 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -100,3 +100,30 @@
     fill: currentColor;
   }
 }
+
+.b-form-datepicker {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: $zindex-dropdown + 1;
+  .btn {
+    padding: 0.4rem 1rem;
+      svg {
+        margin-left: 0;
+      }
+  }
+}
+
+// Form validation icon
+  .form-control.is-invalid,
+  .form-control.is-valid {
+    background-position: right 1rem bottom 50%;
+  }
+
+// Form validation icon with datepicker or password toggle icon
+.form-control-with-button {
+  &.is-invalid,
+  &.is-valid {
+    background-position: right 3rem bottom 50%;
+  }
+}