diff options
author | Dixsie Wolmers <dixsie@ibm.com> | 2020-07-28 01:50:43 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-08-18 17:49:09 +0300 |
commit | 5ea167820bb5f1cdfe4b501eb3c70daf1a3732d3 (patch) | |
tree | 036f5394be2aadd70db9c0d11db34fe37408e96b /src/components/Global | |
parent | dc3fa2e0382145126101dc6df04d0338a119824f (diff) | |
download | webui-vue-5ea167820bb5f1cdfe4b501eb3c70daf1a3732d3.tar.xz |
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
Diffstat (limited to 'src/components/Global')
-rw-r--r-- | src/components/Global/InputPasswordToggle.vue | 2 | ||||
-rw-r--r-- | src/components/Global/TableDateFilter.vue | 11 |
2 files changed, 3 insertions, 10 deletions
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue index 40fb7443..519a808f 100644 --- a/src/components/Global/InputPasswordToggle.vue +++ b/src/components/Global/InputPasswordToggle.vue @@ -49,7 +49,7 @@ export default { position: absolute; right: 0; top: 0; - + padding: 0.4rem 1rem; svg { margin-left: 0; vertical-align: sub; diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue index ab501ea3..538f0e05 100644 --- a/src/components/Global/TableDateFilter.vue +++ b/src/components/Global/TableDateFilter.vue @@ -12,6 +12,7 @@ v-model="fromDate" placeholder="YYYY-MM-DD" :state="getValidationState($v.fromDate)" + class="form-control-with-button" @blur="$v.fromDate.$touch()" /> <b-form-invalid-feedback role="alert"> @@ -58,6 +59,7 @@ v-model="toDate" placeholder="YYYY-MM-DD" :state="getValidationState($v.toDate)" + class="form-control-with-button" @blur="$v.toDate.$touch()" /> <b-form-invalid-feedback role="alert"> @@ -163,12 +165,3 @@ export default { } }; </script> - -<style lang="scss" scoped> -.b-form-datepicker { - position: absolute; - right: 0; - top: 0; - z-index: $zindex-dropdown + 1; -} -</style> |