How to override the padding of the shellbar?

Is this a bug, enhancement, or feature request?

Question

Briefly describe your proposal.

I would like to override the padding of the shellbar. When I inspected the html code, the code was looking like this:

<top-bar _ngcontent-xat-c0 _nghost-xat-c1>
  <fd-shellbar _ngcontent-xat-c1>
    <div class="fd-shellbar">...</div>
  </fd-shellbar>
</top-bar>

The div seems to generated and contains all the shellbar content. The css class fd-shellbar is coming from luigi.css and contains all the css including the padding of the shellbar. In luigi.css the padding for the shellbar is defined like this:

@media (min-width:320px) {
  .fd-shellbar {
    padding: 4px 8px
  }
}

@media (min-width:600px) {
  .fd-shellbar {
    padding: 4px 16px
  }
}

@media (min-width:1024px) {
  .fd-shellbar {
    padding: 4px 32px
  }
}

@media (min-width:1440px) {
   .fd-shellbar {
    padding: 4px 32px
}

@media (min-width:1920px) {
  .fd-shellbar {
    padding: 4px 32px
  }
}

Because of that I’ve defined my own @media entries in my scss file like…

@media (min-width:320px) {
  .fd-shellbar {
    padding: 4px
  }
}

@media (min-width:600px) {
  .fd-shellbar {
    padding-left: 6px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 8px
  }
}

...

…but they have been ignored. Is there anyway how I can override those entries? In general, I can change the predefined css from luigi.css. I’ve added the following entry…

.fd-shellbar__logo {
  display: inline-block;
}

…to my scss file and it was recognized and display was switched from ‘flex’ to ‘inline-block’. I can also add successfully @media entries to elements which does not have any @media yet. E. g. …

@media (min-width:1000px) {
  fd-shellbar-logo {
    margin-right: 100px;
  }
}

is also recognized and works. Did I something wrong in regard to the padding of the shellbar or is it not allowed/possible to change it?

BR Lukas

Which versions of Angular and Fundamental NGX are affected? (If this is a feature request, use current version.)

If this is a bug, please provide steps for reproducing it.

Please provide relevant source code if applicable.

Is there anything else we should know?

[kistll]

Hi @JKMarkowski, Switching the class name from .fd-shell-bar to .fd-shellbar helped. Now, I am capable of overwriting media entries. Thx a lot for your help. BR Lukas

[JKMarkowski]

Hello, you should change class name .fd-shell-bar to .fd-shellbar 😃 Hope it will help.