diff options
| author | Derick Montague <derick.montague@ibm.com> | 2020-03-13 23:15:43 +0300 |
|---|---|---|
| committer | Derick Montague <derick.montague@ibm.com> | 2020-03-20 21:26:45 +0300 |
| commit | fd22b5b0e770442294bd883a8b4e25ad512717ed (patch) | |
| tree | c3a38703e92b1e7118d1b24a92b17db04eb01cd6 /src/assets | |
| parent | 4e90eed0a2b03b675f93bd3e731cb72101266c47 (diff) | |
| download | webui-vue-fd22b5b0e770442294bd883a8b4e25ad512717ed.tar.xz | |
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
Diffstat (limited to 'src/assets')
| -rw-r--r-- | src/assets/styles/_alerts.scss | 59 | ||||
| -rw-r--r-- | src/assets/styles/_obmc-custom.scss | 1 |
2 files changed, 60 insertions, 0 deletions
diff --git a/src/assets/styles/_alerts.scss b/src/assets/styles/_alerts.scss new file mode 100644 index 00000000..3f103b19 --- /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 diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss index 66cebda2..2a8d896a 100644 --- a/src/assets/styles/_obmc-custom.scss +++ b/src/assets/styles/_obmc-custom.scss @@ -39,6 +39,7 @@ @import "~bootstrap-vue/src/index.scss"; +@import "./alerts"; @import "./buttons"; @import "./form-components"; @import "./modal"; |