'Change bootstrap 4 warning background color
Working with Laravel 8 and bootstrap 4 I'm trying to change the 'warning' color.
I am using adminlte theme, so in my admin-app.scss I did this:
// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import 'adminlte/scss/adminlte.raw';
$theme-colors: (
"warning": $warning,
);
In adminlte.raw I have this:
@import "bootstrap-variables";
@import "variables";
@import "mixins";
@import "parts/core";
@import "parts/components";
@import "parts/extra-components";
@import "parts/pages";
@import "parts/plugins";
@import "parts/miscellaneous";
In the variables file:
$gold: #c48725 !default;
$dark-red: #A91519 !default;
$dark-green: #076b02 !default;
$warning: #ffdf89 !default;
$colors: map-merge(
(
"lightblue": $lightblue,
"navy": $navy,
"olive": $olive,
"lime": $lime,
"fuchsia": $fuchsia,
"maroon": $maroon,
"gold": $gold,
"dark-red": $dark-red,
"dark-green": $dark-green,
"warning": $warning,
),
$colors
);
I run npm run dev all successful
I can use class bg-gold, for example, and it works fine.
Yet, the .bg-warning class stays with the wrong yellow color and I get these two entries in firebug:
.bg-warning {
background-color: #ffc107 !important;
} //from admin-app.css line:30468
.bg-warning {
background-color: #ffc107 !important;
}// This one is greyed out from admin-app.css line: 6147
And none of these get the actual color I am setting for warning: #ffdf89
This color is being set in the _bootstrap_variables file that is being called in the adminlte.raw file, but I'm calling the _variables file that changes it after the bootstrap_variables file. Why doesn't it change the color?
I tried adding a new color: In variables:
...
$my-warning: #ffdf89 !default;
$colors: map-merge(
(
"lightblue": $lightblue,
"navy": $navy,
"olive": $olive,
"lime": $lime,
"fuchsia": $fuchsia,
"maroon": $maroon,
"gold": $gold,
"dark-red": $dark-red,
"dark-green": $dark-green,
"my-warning": $my-warning,
),
$colors
);
In admin-app.scss:
$theme-colors: (
"gold": $gold,
"dark-red": $dark-red,
"dark-green": $dark-green,
"my-warning": $my-warning,
);
Now .bg-my-warning works, but .alert-my-warning get the old yellow.
What am I missing?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
