Search code examples
onsen-ui

Is possible to define a custom modifier for an <ons-bottom-toobar>?

I'm trying to define a custom "modifier" attribute for an "ons-bottom-toolbar" in order to modify it's default height value (44px).

As is defined on Onsen's web page, the "ons-bottom-toolbar" has that attribute, and if you want to create an modifier named "xxxx" for an onsen element named "ons-yyyy", you have to define an css class as:

.yyyy--xxxx {
   /* define style here ...
    */
}

where the class name is the onsen element without "ons-" sufix, "--" and the modifier name.

I can do this for an "ons-button":

<ons-button modifier="green">GREEN BUTTON</ons-button>

.button--green {
  background-color: green;
}

... but for an "ons-bottom-toolbar" don't work:

<ons-bottom-toolbar modifier="pink">
  PINK FOOTER????
</ons-bottom-toolbar>

.bottom-toolbar--pink{
  height: 24px;
  background-color: pink;
  border-top: 5px solid black;
}

You can take a look here http://codepen.io/anon/pen/MaxNNb

¿Any idea?

Solution

  • Try to use .bottom-bar--pink in place of .bottom-toolbar--pink selector in css. Probably, it is a bug.