How to change color of paper-tabs riple effect

Polymer 1.0 introduced the concepts of custom CSS properties and custom CSS mixins.

Rather than exposing the details of an element’s internal implementation for theming, instead an element author defines one or more custom CSS properties as part of the element’s API.

These custom properties can be defined similarly to other standard CSS properties and will inherit from the point of definition down the composed DOM tree, similar to the effect of color and font-family.

Custom CSS mixins

It may be tedious (or impossible) for an element author to anticipate and expose every possible CSS property that may be important for theming an element as individual CSS properties (for example, what if a user needed to adjust the opacity of the toolbar title?).

For this reason, the custom properties shim included in Polymer includes an experimental extension allowing a bag of CSS properties to be defined as a custom property and allowing all properties in the bag to be applied to a specific CSS rule in an element’s local DOM. For this, we introduce a mixin capability that is analogous to var, but allows an entire bag of properties to be mixed in.

Checkout the links to learn more. Below you will find a simple example that contains the paper-tabs element and custom styles.

<!DOCTYPE html>
<html>
<head>
    <title>Paper Tabs Style Example</title>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html" />
    <link rel="import" href="bower_components/paper-tabs/paper-tabs.html" />
    <style is="custom-style">
        :root {
            --my-custom-color: red;
            --paper-tab-ink: var(--my-custom-color);

            /* custom CSS property */
            --paper-tabs-selection-bar-color: blue;

            /* custom CSS mixin */
            --paper-tabs: {
                color: var(--default-primary-color); /* variable defined in default-theme.html */
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <paper-tabs selected="0">
        <paper-tab>TAB 1</paper-tab>
        <paper-tab>TAB 2</paper-tab>
        <paper-tab>TAB 3</paper-tab>
    </paper-tabs>
</body>
</html>

Key parts to this example:

For styles in the main document you can use <style is="custom-style">.
You can create your own custom CSS variables like --custom-color: red; and use them like --paper-tab-ink: var(--custom-color);.
You can assign any valid, appropriate CSS to a defined custom CSS property like --paper-tabs-selection-bar-color: blue; or --paper-tabs-selection-bar-color: rgba(0,255,0,0.5);.
Many elements include predefined CSS variables. paper-styles, for example, includes color.html and default-theme.html. These files define various CSS variables for colors that can be used to customize the style of elements. --default-primary-color is one of these variables. See below.

/* custom CSS mixin */
--paper-tabs: {
    color: var(--default-primary-color); /* variable defined in default-theme.html */
    font-size: 20px;
}

Recommended topics

Hot tags