Add alert message component and documentation
- Add custom alert component to simplify the use of custom alerts
- Add documentation for using the custom alert
- Update the login error alert to use the alert component instead of
the Bootstrap-vue component.
- Register alert component in enhanceApp
- Replace Sass variables used in the StatusIcon component style block
to use the Boostrap theme-color and gray Sass functions so the colors
can be used in the Vuepress documentation custom components
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ibd93402c919a42bd5c24cc9e7c6c8fc6f17a4db4
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index 96074ee..1114321 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -33,20 +33,20 @@
.status-icon {
vertical-align: text-bottom;
&.success {
- fill: $success;
+ fill: theme-color('success');
}
&.danger {
- fill: $danger;
+ fill: theme-color('danger');
}
&.secondary {
- fill: $gray-600;
+ fill: gray('600');
svg {
transform: rotate(-45deg);
}
}
&.warning {
- fill: $warning;
+ fill: theme-color('warning');
}
}
</style>