weather-element.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-tabs/paper-tab.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">


<polymer-element name="weather-element">
    <template>
        <style>html, body {
            height: 100%;
            margin: 0;
            background-color: #E5E5E5;
            font-family: 'RobotoDraft', sans-serif;
        }

        core-header-panel {
            height: 100%;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }

        core-toolbar {
            background: #03a9f4;
            color: white;
        }

        #tabs {
            width: 100%;
            margin: 0;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            text-transform: uppercase;
        }

        .container {
            width: 80%;
            margin: 50px auto;
        }

        @media (min-width: 481px) {
            #tabs {
                width: 200px;
            }

            .container {
                width: 400px;
            }
        }
        </style>

        <core-header-panel>

            <core-toolbar>

                <paper-tabs id="tabs" selected="all" self-end>
                    <paper-tab name="all">Weather</paper-tab>
                    <paper-tab name="favorites">Locations</paper-tab>
                </paper-tabs>

            </core-toolbar>

            <!-- main page content will go here -->

        </core-header-panel>
    </template>
    <script>
        Polymer('weather-element', {});
    </script>
</polymer-element>