From 5ea167820bb5f1cdfe4b501eb3c70daf1a3732d3 Mon Sep 17 00:00:00 2001 From: Dixsie Wolmers Date: Mon, 27 Jul 2020 17:50:43 -0500 Subject: 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 Change-Id: I7edff1e9527ad2c2cfec236daacb83ad4864d785 --- src/assets/styles/bmc/custom/_forms.scss | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) (limited to 'src/assets/styles/bmc/custom/_forms.scss') 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%; + } +} -- cgit v1.2.3