hak8or hak8or - 5 months ago 50
CSS Question

How can I remove any additional styling polymer adds for paper-tabs with the link tag?

Right now I have these two tab groups

<paper-tabs id="scrollableTabs" selected="2" scrollable link>
<paper-tab> <a href="#link1">1</a> </paper-tab>
<paper-tab> <a href="#link2">2</a> </paper-tab>
<paper-tab> <a href="#link3">3</a> </paper-tab>
<paper-tab> <a href="#top">Top</a> </paper-tab>
</paper-tabs>

<paper-tabs id="scrollableTabs" selected="2" scrollable >
<paper-tab>1</paper-tab>
<paper-tab>2</paper-tab>
<paper-tab>3</paper-tab>
<paper-tab>Top</paper-tab>
</paper-tabs>


Which gives me a look like this that I don't like and much rather prefer the non link-able style.

Normal comparison

After futzing around a bit with the css like this

a {
text-decoration: none;
font-weight: 500;
}


gives me this which is much better but I can't get the padding to work since I assume when using the link property padding is specified within the paper-tabs element.

enter image description here

So, is there any way to get rid of the styles that the anchor tag adds in the polymer paper tabs group when using the link property?

Answer

The links looks higher 'cause they take up 100% space because of the following CSS.

::content > a {
    height: 100%;
}

So, by setting the height back to the default auto should fix it.

a {
    text-decoration: none;
    font-weight: 500;
    height: auto !important;
}

Or if you don't feel like using !important, you can use either /deep/ or ::shadow to update the Shadow DOM CSS. Here's an example using the latter.

paper-tab::shadow ::content > a {
    height: auto;
}

In Firefox, above ::shadow code wouldn't work, instead you could do

paper-tab .tab-content > a {
    height: auto;
}
Comments