diff options
| author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-08-10 21:17:12 +0300 |
|---|---|---|
| committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-08-17 17:54:03 +0300 |
| commit | 1f4eaa1695bde5891a786784a8845b54ad18e1f9 (patch) | |
| tree | 55ec0e05250824df30674382207e39e8bfd90acc /src/assets/styles/bmc/custom | |
| parent | f0a1ac7eb7cf724d412acd2c0c9a3bf3d1fcc204 (diff) | |
| download | webui-vue-1f4eaa1695bde5891a786784a8845b54ad18e1f9.tar.xz | |
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
Diffstat (limited to 'src/assets/styles/bmc/custom')
| -rw-r--r-- | src/assets/styles/bmc/custom/_alert.scss | 8 | ||||
| -rw-r--r-- | src/assets/styles/bmc/custom/_badge.scss | 2 | ||||
| -rw-r--r-- | src/assets/styles/bmc/custom/_toasts.scss | 8 |
3 files changed, 9 insertions, 9 deletions
diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss index 741eb692..0e78ba64 100644 --- a/src/assets/styles/bmc/custom/_alert.scss +++ b/src/assets/styles/bmc/custom/_alert.scss @@ -46,25 +46,25 @@ &.alert-info { border-left-color: theme-color("info"); - background-color: $info-light; + background-color: theme-color-light("info"); fill: theme-color("info"); } &.alert-success { border-left-color: theme-color("success"); - background-color: $success-light; + background-color: theme-color-light("success"); fill: theme-color("success"); } &.alert-danger { border-left-color: theme-color("danger"); - background-color: $danger-light; + background-color: theme-color-light("danger"); fill: theme-color("danger"); } &.alert-warning { border-left-color: theme-color("warning"); - background-color: $warning-light; + background-color: theme-color-light("warning"); fill: theme-color("warning"); } }
\ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_badge.scss b/src/assets/styles/bmc/custom/_badge.scss index 87b96e61..0b88b499 100644 --- a/src/assets/styles/bmc/custom/_badge.scss +++ b/src/assets/styles/bmc/custom/_badge.scss @@ -16,6 +16,6 @@ } .badge-primary { - background-color: $info-light; + background-color: theme-color-light("info"); color: theme-color("info"); }
\ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_toasts.scss b/src/assets/styles/bmc/custom/_toasts.scss index c3e91b8a..42b91dbb 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 |