blasten/app-header-demo.html

## app-header-demo.html
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

  <title>app-header demo</title>

  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="../../iron-icons/iron-icons.html">
  <link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html">
  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
  <link rel="import" href="../app-toolbar/app-toolbar.html">
  <link rel="import" href="app-header.html">
  <link rel="import" href="../demo/sample-content.html">

  <style is="custom-style">

    body {
      margin: 0;
      font-family: arial;
      background-color: #eee;
    }

    app-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      color: #fff;
      background-color: #3f51b5;
      --app-header-full-header: {
        background-image: url(bg1.jpg);
        background-position: left center;
      };
    }

    paper-icon-button {
      --paper-icon-button-ink-color: white;
    }

    app-toolbar.tall {
      height: 148px;
    }

    sample-content {
      padding-top: 212px;
    }

    [title] {
      font-weight: lighter;
      margin-left: 108px;
    }

    [condensed-title] {
      font-weight: lighter;
      margin-left: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    [condensed-title] i {
      font-weight: 100;
      font-style: normal;
    }

    @media (max-width: 639px) {
      [title] {
        margin-left: 50px;
        font-size: 30px;
      }
      [condensed-title] {
        font-size: 15px;
      }
    }
  </style>

</head>
<body class="fullbleed"unresolved>

  <div class="fit" style="overflow-y: scroll; -webkit-overflow-scrolling: touch;">
    <app-header effects="waterfall resize-title fade-background parallax-background">
      <app-toolbar>
       <paper-icon-button icon="menu"></paper-icon-button>
        <h4 condensed-title>What is material? &mdash; Environment</h4>
        <paper-icon-button icon="search"></paper-icon-button>
      </app-toolbar>
      <app-toolbar class="tall">
        <h1 title>What is material?</h1>
      </app-toolbar>
    </app-header>

    <sample-content size="100"></sample-content>
  </div>

  <script>
    HTMLImports.whenReady(function() {
      var header = document.querySelector('app-header');
      header.scroller = header.parentNode;
    });
  </script>
</body>
</html>