diff options
| author | Derick Montague <derick.montague@ibm.com> | 2020-03-03 15:11:48 +0300 |
|---|---|---|
| committer | Derick Montague <derick.montague@ibm.com> | 2020-03-12 20:59:42 +0300 |
| commit | 71650fff20c0ad29eb05d770736386863324b64e (patch) | |
| tree | 2c3a71a9c71ab7c70f2d1ed0e5e7a437144e339f /src/assets | |
| parent | 36016e45acae516045cbb74be40e74881a5fc95f (diff) | |
| download | webui-vue-71650fff20c0ad29eb05d770736386863324b64e.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.
- Add the enhanceApp and bmcAppPlugin to extend vuepress to use both
the BMC custom and Boostrap-Vue components along with the custom styles
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I5c0b696ca47ddba0df18041d6c5ee7509bf23572
Diffstat (limited to 'src/assets')
| -rw-r--r-- | src/assets/styles/_alerts.scss | 58 | ||||
| -rw-r--r-- | src/assets/styles/_obmc-custom.scss | 1 |
2 files changed, 59 insertions, 0 deletions
diff --git a/src/assets/styles/_alerts.scss b/src/assets/styles/_alerts.scss new file mode 100644 index 00000000..816ad33b --- /dev/null +++ b/src/assets/styles/_alerts.scss @@ -0,0 +1,58 @@ +.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 { + flex: 0 0 20px; + 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"; |