Search code examples
csspolymer-1.0paper-elements

Polymer 1.0 custom styling

I'm totally new to Polymer and I'm using paper elements and I don't know how to use custom styles with paper elements, anybody have an idea on how to apply Styling to different elements, documentation is little bit unclear even though it specifies the properties and mixins to be used. For an example how to use "--paper-tabs-selection-bar-color" with paper-tabs in paper elements. Thanks in advance.

Solution

  • You can use the custom CSS properties like so :

    <style is="custom-style">
  #mytabs {
    --paper-tabs-selection-bar-color: red;
  }
</style>

    ...

    <paper-tabs id="mytabs" selected="0">
  <paper-tab>TAB 1</paper-tab>
  <paper-tab>TAB 2</paper-tab>
  <paper-tab>TAB 3</paper-tab>
</paper-tabs>

    I recommend you to read the developer guide in addition to each element's documentation. In particular, the styling page and this section about custom CSS properties will explain you how this works.