Custom Variables not overwriting the default variable


Topic: Custom Variables not overwriting the default variable

noveltytech pro premium priority asked 5 years ago

Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)


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; }


Bartosz Termena staff answered 5 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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