Hi, I'm trying to define a custom "modifier" attribute for an
<ons-bottom-tolbar>
in order to modify it's default height value (44px).
As is defined on Onsen's web page (
here), the "ons-bottom-tolbar" has that attribute, and as comments
here, 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 {
}
where the class name is the onsen element without "ons-" sufix, "--" and the modifier name.
I can to 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;
}
Take a look
here (codepen.io)
¿Any idea?
Thanks...