0

I cannot get the onsen fab element to change background color or border. I'm using angular 2 and onsen v2. If I uncheck the fabs default css in the browser inspector I see my css applied. I already tried !important.

Here is my css

.main-counter-remove{
    text-align: center;
    font-weight:bold !important;
    color: #d9534f !important;
}

.main-counter-add{
    text-align: center;
    font-weight:bold !important;
    color: #5cb85c !important;

}

.main-counter-remove.fab{
    border: 2px !important;
    border-color: #d9534f !important;
    background-color: white;
}
.main-counter-add.fab{
    border: 2px !important;
    border-color: #5cb85c !important;
    background-color: white;
}

This is my html

        <div class="main-counter-remove">
            <ons-fab modifier="mini" (click)="decrementMainCounter()">
                <span>-</span>
            </ons-fab>
        </div>
        <div class="main-counter">
            <p style="padding:5px">10</p>
        </div>
        <div class="main-counter-add">
            <ons-fab modifier="mini" (click)="incrementMainCounter()">
                <span>+</span>
            </ons-fab>
        </div>
Noober
  • 129
  • 1
  • 9

1 Answers1

0

The fab class is applied to a child element of main-content-remove

Try that

.main-counter-remove .fab/* note the space */
{ 
     /* rules here */
}
David
  • 33,444
  • 11
  • 80
  • 118