CODEWITHSUNDEEP
htmlpolymerweb-component
najm
najm

Reputation: 894

Buggy paper-tabs in Polymer 1.0

I recently made the shift from Polymer 0.5 to 1.0 and one aesthetic problem I noticed right away was the behavior of clickable elements, especially paper-tabs and paper-button. When clicked, the text resizes in a weird and abrupt manner like so:

enter image description here

As you might've noticed, at one point I clicked the tab and it became active yet the bar underneath did not slide under it.

How can I get them to be more smoother and 'in place'? Like this:

enter image description here

Following is the code for the paper-tabs:

       <paper-toolbar id="mainToolbar" class="tall">
            <div class="top title flex">[[headerTitle]]</div>
            <my-tools class="top"></my-tools>
            <div class="bottom">
                <paper-tabs selected="[[selected]]" noink class="tabs">
                    <paper-tab id="discover"><a href="/">DISCOVER</a></paper-tab>
                    <paper-tab id="learn"><a href="/learn">LEARN</a></paper-tab>
                    <paper-tab id="explore"><a href="/explore">EXPLORE</a></paper-tab>
                </paper-tabs>
            </div>
        </paper-toolbar>

Upvotes: 0

Views: 277

Answers (2)

Kornell
Kornell

Reputation: 159

You can define your classes for elements below <paper-tab>.

#resolutionTabs span.tab {
  font-weight: 500 !important;
  font-family: 'Open Sans';
  font-size: 16px;
}
<paper-tabs id="resolutionTabs" attr-for-selected="data-resolution" selected="{{resolution}}">
  <paper-tab data-resolution="1080x1920"><span class="tab">1080x1920</span></paper-tab>
  <paper-tab data-resolution="1920x1080"><span class="tab">1920x1080</span></paper-tab>
  <paper-tab data-resolution="1280x1024"><span class="tab">1280x1024</span></paper-tab>
  <paper-tab data-resolution="1024x1280"><span class="tab">1024x1280</span></paper-tab>
</paper-tabs>

Upvotes: 1

Cheetah
Cheetah

Reputation: 14379

If you look at paper-tab.html, you can change:

:host(:focus) .tab-content {
  opacity: 1;
  font-weight: 700;
}

and remove the change in font-weight to:

:host(:focus) .tab-content {
  opacity: 1;
}

Upvotes: 1

Related Questions