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
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index c259df9..d472c0c 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 @@
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>