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
diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/_buttons.scss
index 2f961e0..b9b8073 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 3199cab..40fb744 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -52,6 +52,7 @@
svg {
margin-left: 0;
+ vertical-align: sub;
}
}
</style>