Update use of Sass variable background variant colors
The hardcoded Sass variable assignments to lighter variant background colors
does not work well with the theme-color functions that are used.
Use Bootstrap's built in theme-color-level function to programatically get
a lighter variant color to use for component backgrounds.
https://getbootstrap.com/docs/4.5/getting-started/theming/#functions
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I9d5a1a66c92d347ba1797be5e0810a24c34094f9
diff --git a/src/assets/styles/bmc/custom/_toasts.scss b/src/assets/styles/bmc/custom/_toasts.scss
index c3e91b8..42b91db 100644
--- a/src/assets/styles/bmc/custom/_toasts.scss
+++ b/src/assets/styles/bmc/custom/_toasts.scss
@@ -25,20 +25,20 @@
.b-toast-success .toast {
border-left-color: theme-color("success")!important;
- background-color: $success-light;
+ background-color: theme-color-light("success")!important;
}
.b-toast-info .toast {
border-left-color: theme-color("info")!important;
- background-color: $info-light;
+ background-color: theme-color-light("info")!important;
}
.b-toast-danger .toast {
border-left-color: theme-color("danger")!important;
- background-color: $danger-light;
+ background-color: theme-color-light("danger")!important;
}
.b-toast-warning .toast {
border-left-color: theme-color("warning")!important;
- background-color: $warning-light;
+ background-color: theme-color-light("warning")!important;
}
\ No newline at end of file