How to change font-size of label in paper-badge?

1k views Asked by At

The font-size of the label for paper-badge is 12px in the source code. I want to make a particular paper-badge element to have a font-size of 10px. The element looks like this:

<paper-badge id="unreadCount" for="myIcon" label="[[count]]"></paper-badge>

The relevant CSS looks like this:

paper-badge {
    --paper-badge-background: #DC5E13;
    --paper-badge-width: 14px;
    --paper-badge-height: 14px;
    --paper-badge-margin-left: 4px;
    /*--paper-badge-margin-top: 6px;*/
    /*--paper-badge {
        #badge {
            font-size: 10px;
        }
    }*/
}

#unreadCount {
    font-size: 10px !important;
}

You can see my attempt of setting the font-size in the commented out --paper-badge mixin. That didn't work, so I tried setting the font-size in the id CSS selector. There is no --paper-badge-font-size mixin which is why I don't just use that.

Even with the !important tag, I can see in the Styles tab of my developer tools that the font-size: 10px !important; is overwritten and stays as font-size: 12px; under .paper-badge-0 #badge.paper-badge. When I untick this, it then goes to the 10px that I set in the CSS selector.

Does anyone know the correct way to overwrite the default font-size?

1

There are 1 answers

0
Drew On BEST ANSWER

I figured it out with help from TricksfortheWeb.

I added this mixin

--paper-badge: {
    font-size: 10px;
}

to the paper-badge selector. So now it looks like this:

paper-badge {
    --paper-badge-background: #DC5E13;
    --paper-badge-width: 14px;
    --paper-badge-height: 14px;
    --paper-badge-margin-left: 4px;
    --paper-badge: {
        font-size: 10px;
    }
}