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/assets/styles/_alerts.scss b/src/assets/styles/_alerts.scss
new file mode 100644
index 0000000..3f103b1
--- /dev/null
+++ b/src/assets/styles/_alerts.scss
@@ -0,0 +1,59 @@
+.alert {
+ display: flex;
+ padding: $spacer;
+ border-width: 0 0 0 3px;
+ color: $gray-800;
+ margin-bottom: $spacer;
+
+ .close {
+ font-weight: 300;
+ opacity: 1;
+ }
+
+ .alert-icon {
+ display: inline-flex;
+ align-items: center;
+ margin-right: $spacer;
+ margin-bottom: $spacer;
+
+ @include media-breakpoint-up(sm) {
+ margin-bottom: 0;
+ }
+ }
+
+ .alert-content {
+ flex: 1 1 auto;
+ }
+
+ .alert-title {
+ margin-bottom: $spacer / 2;
+ }
+
+ .alert-msg {
+ p + p {
+ margin-bottom: $spacer;
+ }
+
+ p:last-of-type {
+ margin-bottom: 0;
+ }
+ }
+
+ &.alert-info {
+ border-left-color: $info;
+ background-color: $info-light;
+ fill: $info;
+ }
+
+ &.alert-danger {
+ border-left-color: $danger;
+ background-color: $danger-light;
+ fill: $danger;
+ }
+
+ &.alert-warning {
+ border-left-color: $warning;
+ background-color: $warning-light;
+ fill: $warning;
+ }
+ }
\ No newline at end of file