Customize color of selected item in app-drawer, Polymer

0
votes

How can you customize the color of the selected tab in the app-drawer?

Also, how to "unbold" the text in the app-drawer and in the paper-tabs.

I'm using polymer 2.0 preview

1
polymerpolymer-2.x
The <app-drawer> itself doesn't have tabs. Do you mean the "selected tab in <paper-tabs>"? – tony19
yes, they both (app-drawer and paper-tabs) make the text bold when you click on it. – Zvi Karp
<app-drawer> is just a container (see source). The <app-drawer> itself does not style the selected item, but it could contain another component that automatically styles the selected item (including <paper-tabs>), so if we understood the full context of <app-drawer>, we could provide more helpful/accurate answers. – tony19

1 Answers

1
votes

You can customize the markup and use different elements if you like. For the standard PSK drawer, these are the styles to change

  .drawer-list {
    margin: 0 20px;
  }
  .drawer-list a {
    display: block;
    padding: 0 16px;
    text-decoration: none;
    color: var(--app-secondary-color);
    line-height: 40px;
  }
  .drawer-list a.iron-selected {
    color: black;
    font-weight: bold;
  }