Align button icons

- Fixes button icon and text alignment
- App header buttons to be addressed separately
- Button documentation will be addressed in separate commit
- Aligns form input buttons: datepicker, clear search, and password toggle
- Moves title from icon to button for icon only buttons
- Aligns validation icon with  form input buttons

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

1 files changed, 3 insertions, 13 deletions

diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index c259df91..d472c0c9 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -23,10 +23,12 @@
         <b-button
           v-if="filter"
           variant="link"
+          class="btn-icon-only input-action-btn"
           :aria-label="$t('global.ariaLabel.clearSearch')"
+          :title="$t('global.ariaLabel.clearSearch')"
           @click="onClearSearch"
         >
-          <icon-close :title="$t('global.ariaLabel.clearSearch')" />
+          <icon-close />
         </b-button>
       </b-input-group>
     </b-form-group>
@@ -77,16 +79,4 @@ export default {
   z-index: 4;
   stroke: gray('400');
 }
-
-.btn {
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding: 0.4rem 1rem;
-  z-index: 4;
-  svg {
-    margin-left: 0;
-    vertical-align: sub;
-  }
-}
 </style>