CODEWITHSUNDEEP
csspolymer
hak8or
hak8or

Reputation: 528

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?

Upvotes: 1

Views: 616

Answers (2)

myfrom
myfrom

Reputation: 133

It's in the element docs:

To use links in tabs, add link attribute to paper-tab and put an element in paper-tab with a tabindex of -1.

Example:

<style is="custom-style">
  .link {
    @apply(--layout-horizontal);
    @apply(--layout-center-center);
  }
</style>

<paper-tabs selected="0">
  <paper-tab link>
    <a href="#link1" class="link" tabindex="-1">TAB ONE</a>
  </paper-tab>
  <paper-tab link>
    <a href="#link2" class="link" tabindex="-1">TAB TWO</a>
  </paper-tab>
  <paper-tab link>
    <a href="#link3" class="link" tabindex="-1">TAB THREE</a>
  </paper-tab>
</paper-tabs>

https://elements.polymer-project.org/elements/paper-tabs

Upvotes: 0

Justin XL
Justin XL

Reputation: 39006

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;
}

Upvotes: 3

Related Questions