From 3f6710a09c953405cc0bc8014eab89887122b17d Mon Sep 17 00:00:00 2001
From: Derick Montague <derick.montague@ibm.com>
Date: Wed, 4 Mar 2020 00:59:47 -0600
Subject: Add buttons documentation

- Add documentation for how to use buttons
- Update markup and CSS rulesets to support icons on the left or the
right of text

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ic897f416e85824287360bc7ef5dc47c402d64eba
---
 src/assets/styles/_buttons.scss               | 23 ++++++++++++++++++++---
 src/components/Global/InputPasswordToggle.vue |  1 +
 2 files changed, 21 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/_buttons.scss
index 2f961e00..b9b8073b 100644
--- a/src/assets/styles/_buttons.scss
+++ b/src/assets/styles/_buttons.scss
@@ -1,8 +1,14 @@
 .btn {
   font-weight: $headings-font-weight;
-  svg {
-    vertical-align: sub;
-    margin-left: $spacer / 2;
+  padding-top: $spacer / 2;
+  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;
   }
 }
 
@@ -17,10 +23,21 @@
 .btn-link {
   fill: $primary;
   text-decoration: none !important;
+
   &:focus {
     box-shadow: $btn-focus-box-shadow;
   }
   &:hover {
     fill: darken($primary, 15%);
   }
+}
+
+.btn:disabled {
+  color: $gray-600;
+  fill: currentColor;
+
+  &:not(.btn-link) {
+    border-color: $gray-400;
+    background-color: $gray-400;
+  }
 }
\ No newline at end of file
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index 3199cab3..40fb7443 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -52,6 +52,7 @@ export default {
 
   svg {
     margin-left: 0;
+    vertical-align: sub;
   }
 }
 </style>
-- 
cgit v1.2.3