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?
I figured it out with help from TricksfortheWeb.
I added this mixin
to the
paper-badge
selector. So now it looks like this: