1<!--
2Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6Code distributed by Google as part of the polymer project is also
7subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
8-->
9
10<!--
11`core-header-panel` contains a header section and a content panel section.
12
13__Important:__ The `core-header-panel` will not display if its parent does not have a height.
14
15Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-attrs.html), you can easily make the `core-header-panel` fill the screen
16
17    <body fullbleed layout vertical>
18      <core-header-panel flex>
19        <core-toolbar>
20          <div>Hello World!</div>
21        </core-toolbar>
22      </core-header-panel>
23    </body>
24
25or, if you would prefer to do it in CSS, just give `html`, `body`, and `core-header-panel` a height of 100%:
26
27    html, body {
28      height: 100%;
29      margin: 0;
30    }
31    core-header-panel {
32      height: 100%;
33    }
34
35Special support is provided for scrolling modes when one uses a core-toolbar or equivalent
36for the header section.
37
38Example:
39
40    <core-header-panel>
41      <core-toolbar>Header</core-toolbar>
42      <div>Content goes here...</div>
43    </core-header-panel>
44
45If you want to use other than `core-toolbar` for the header, add 
46`core-header` class to that element.
47
48Example:
49
50    <core-header-panel>
51      <div class="core-header">Header</div>
52      <div>Content goes here...</div>
53    </core-header-panel>
54    
55To have the content fits to the main area, use `fit` attribute.
56
57    <core-header-panel>
58      <div class="core-header">standard</div>
59      <div class="content" fit>content fits 100% below the header</div>
60    </core-header-panel>
61
62Use `mode` to control the header and scrolling behavior.
63
64@group Polymer Core Elements
65@element core-header-panel
66@homepage github.io
67-->
68
69<link rel="import" href="/polymer/polymer.html">
70
71<polymer-element name="core-header-panel" assetpath="">
72<template>
73
74  <link rel="stylesheet" href="core-header-panel.css">
75  
76  <div id="outerContainer" on-scroll="{{scroll}}" vertical="" layout="">
77
78    <content id="headerContent" select="core-toolbar, .core-header"></content>
79
80    <div id="mainPanel" flex="" vertical="" layout="">
81    
82      <div id="mainContainer" flex?="{{mode !== &apos;cover&apos;}}" on-scroll="{{scroll}}">
83        <content id="mainContent" select="*"></content>
84      </div>
85      
86      <div id="dropShadow"></div>
87      
88    </div>
89
90  </div>
91
92</template>
93
94</polymer-element>
95<script src="core-header-panel-extracted.js"></script>