From 30f11f818168c89126777b717ab37829e25e8378 Mon Sep 17 00:00:00 2001
From: Dixsie Wolmers <dixsie@ibm.com>
Date: Tue, 10 Nov 2020 16:07:56 -0600
Subject: 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
---
 src/assets/styles/bmc/custom/_buttons.scss  | 38 +++++++++++++++--------------
 src/assets/styles/bmc/custom/_calendar.scss |  9 +++++++
 src/assets/styles/bmc/custom/_forms.scss    |  2 +-
 3 files changed, 30 insertions(+), 19 deletions(-)

(limited to 'src/assets/styles/bmc/custom')

diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index e927d244..2a7b8169 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -3,11 +3,11 @@
   padding-right: $spacer;
   padding-bottom: $spacer / 2;
   padding-left: $spacer;
-
-  // Buttons with SVGs and text expect
-  // text to be wrapped in a span element
-  svg + span {
-    margin-left: $spacer / 4;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-around;
+  svg {
+    margin-right: $spacer / 4;
   }
   &:disabled {
     color: gray("600");
@@ -60,21 +60,23 @@
   }
 }
 
-// Datepicker and Password toggle buttons
-.input-action {
+// Icon only buttons
+.btn-icon-only svg {
+  margin-right: 0;
+}
+
+// Datepicker, clear search and Password toggle buttons
+.input-action-btn,
+.btn-datepicker {
   position: absolute;
   right: 0;
+  top: 0;
+  z-index: $zindex-dropdown + 1;
 }
-.input-action .btn-link,
+
+// Contain input buttons within input
+.btn-datepicker .dropdown-toggle,
 .input-action-btn {
-  position: absolute;
-  right: 1px;
-  top: 1px;
-  z-index: $zindex-dropdown + 1;
-  padding: 0;
-  width: 36px;
-  height: 35.8px;
-  svg {
-    vertical-align: sub;
-  }
+  padding: 7px;
+  margin: 1px;
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_calendar.scss b/src/assets/styles/bmc/custom/_calendar.scss
index 641e4ed1..0307a6ce 100644
--- a/src/assets/styles/bmc/custom/_calendar.scss
+++ b/src/assets/styles/bmc/custom/_calendar.scss
@@ -5,4 +5,13 @@
       color: theme-color("dark");
     }
   }
+}
+
+.b-calendar-grid .btn {
+  display: inline-block;
+}
+
+// Date picker focus
+.b-calendar .b-calendar-grid {
+  padding: 6px 12px;
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 464282c6..0451474b 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -127,6 +127,6 @@
 .form-control-with-button {
   &.is-invalid,
   &.is-valid {
-    background-position: right 3rem bottom 50%;
+    background-position: right 2.5rem bottom 50%;
   }
 }
-- 
cgit v1.2.3