Topic: Custom Variables not overwriting the default variable
Expected behavior
Actual behavior
Resources (screenshots, code snippets etc.)
Dear @noveltytech
You are right that some inline styles can't be overwritten.
We will fix that as soon as possible.
For now, as a workaround try to add another CSS rule, and either give the selector a higher specificity (for ex. id), like below:
<div class="container">
<div class="row">
<div class="col-md-12 mx-auto my-5">
<div class="btn-group" mdbDropdown>
<button
mdbDropdownToggle
type="button"
mdbBtn
color="primary"
class="dropdown-toggle waves-light"
mdbWavesEffect
>
Basic dropdown
</button>
<div id="higherSpecifficity" class="dropdown-menu dropdown-primary">
<a class="custom-style dropdown-item" href="#">Action</a>
<a class="custom-style dropdown-item" href="#">Another action</a>
<a class="custom-style dropdown-item" href="#">Something else here</a>
<div class="divider dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</div>
custom.scss:
#higherSpecifficity {
.dropdown-item {
&:hover,
&:active,
&.active {
background-color: #53cf81 !important;
}
}
}
styles.scss:
@import './custom.scss';
I know, that override with !important it's not a very good idea, but i I assure you that we are working on improving our styles.
Best Regards, Bartosz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 8.2.0
- Device: Macbook Pro
- Browser: Chrome
- OS: MacOS Mojave
- Provided sample code: No
- Provided link: No
Bartosz Termena staff commented 5 years ago
Hi!
Could you show me your code/example with an existing problem?
Best Regards, Bartosz.
noveltytech pro premium priority commented 5 years ago
@import "assets/scss/custom-variables" ;// overwrite the theme @import "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss"; @import "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss"; @import "assets/scss/custom-styles";
Bartosz Termena staff commented 5 years ago
Hi!
Could you tell me exactly which variables do you overwrite, and how?
We will try to look at this problem.
Best, Bartosz.
noveltytech pro premium priority commented 5 years ago
Hello Bartosz,Actually what I realized is that I could change the vairables .. but some inline style is added which is overwriting the custom variable
eg. Inline style.. .dropdown .dropdown-menu.dropdown-primary .dropdown-item.active, .dropdown .dropdown-menu.dropdown-primary .dropdown-item:active, .dropdown .dropdown-menu.dropdown-primary .dropdown-item:hover, .dropleft .dropdown-menu.dropdown-primary .dropdown-item.active, .dropleft .dropdown-menu.dropdown-primary .dropdown-item:active, .dropleft .dropdown-menu.dropdown-primary .dropdown-item:hover, .dropright .dropdown-menu.dropdown-primary .dropdown-item.active, .dropright .dropdown-menu.dropdown-primary .dropdown-item:active, .dropright .dropdown-menu.dropdown-primary .dropdown-item:hover, .dropup .dropdown-menu.dropdown-primary .dropdown-item.active, .dropup .dropdown-menu.dropdown-primary .dropdown-item:active, .dropup .dropdown-menu.dropdown-primary .dropdown-item:hover { background-color: #4285f4!important; box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15); border-radius: .125rem; }
my customized theme for dropdown .holista-skin .dropdown-menu a:hover, .holista-skin .dropdown-menu a:focus, .holista-skin .dropdown-menu a:active { background-color: #53cf81 !important; }