third_party/polymer/v1_0/components-chromium/paper-header-panel/paper-header-panel.html - Issue 1187823002: Update Polymer components and re-run reproduce.sh

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-header-panel/paper-header-panel.html

Issue 1187823002: Update Polymer components and re-run reproduce.sh (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Rebase Created 5 years, 6 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-header-panel/hero.svg ('k') | third_party/polymer/v1_0/components-chromium/paper-header-panel/paper-header-panel-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!--	1 <!--

2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.	2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt	3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt	4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt	5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

6 Code distributed by Google as part of the polymer project is also	6 Code distributed by Google as part of the polymer project is also

7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt	7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

8 --><html><head><link rel="import" href="../polymer/polymer.html">	8 --><html><head><link rel="import" href="../polymer/polymer.html">

9 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">	9 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

10	10

(...skipping 46 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
57	57

58 Mode \| Description	58 Mode \| Description

59 ----------------\|-------------	59 ----------------\|-------------

60 `standard` \| The header is a step above the panel. The header will consume the p anel at the point of entry, preventing it from passing through to the opposite s ide.	60 `standard` \| The header is a step above the panel. The header will consume the p anel at the point of entry, preventing it from passing through to the opposite s ide.

61 `seamed` \| The header is presented as seamed with the panel.	61 `seamed` \| The header is presented as seamed with the panel.

62 `waterfall` \| Similar to standard mode, but header is initially presented as sea med with panel, but then separates to form the step.	62 `waterfall` \| Similar to standard mode, but header is initially presented as sea med with panel, but then separates to form the step.

63 `waterfall-tall` \| The header is initially taller (`tall` class is added to the header). As the user scrolls, the header separates (forming an edge) while conde nsing (`tall` class is removed from the header).	63 `waterfall-tall` \| The header is initially taller (`tall` class is added to the header). As the user scrolls, the header separates (forming an edge) while conde nsing (`tall` class is removed from the header).

64 `scroll` \| The header keeps its seam with the panel, and is pushed off screen.	64 `scroll` \| The header keeps its seam with the panel, and is pushed off screen.

65 `cover` \| The panel covers the whole `paper-header-panel` including the header. This allows user to style the panel in such a way that the panel is partially co vering the header.	65 `cover` \| The panel covers the whole `paper-header-panel` including the header. This allows user to style the panel in such a way that the panel is partially co vering the header.

66	66

67 Example:	67 Example:

68	68

69 <paper-header-panel mode="waterfall">	69 <paper-header-panel mode="waterfall">

70 <div class="paper-header">standard</div>	70 <div class="paper-header">standard</div>

71 <div class="content fit">content fits 100% below the header</div>	71 <div class="content fit">content fits 100% below the header</div>

72 </paper-header-panel>	72 </paper-header-panel>

73	73

74	74

75 Styling header panel:	75 Styling header panel:

76	76

77 To change the shadow that shows up underneath the header:	77 To change the shadow that shows up underneath the header:

(...skipping 40 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
118 @apply(--layout-vertical);	118 @apply(--layout-vertical);

119	119

120 display: block;	120 display: block;

121 position: relative;	121 position: relative;

122 height: 100%;	122 height: 100%;

123	123

124 /* Create a stack context, we will need it for the shadow*/	124 /* Create a stack context, we will need it for the shadow*/

125 z-index: 0;	125 z-index: 0;

126 }	126 }

127	127

	128 :root {

	129 /**

	130 * Default paper header panel shadow

	131 */

	132 --paper-header-panel-shadow: {

	133 height: 6px;

	134 bottom: -6px;

	135 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);

	136 };

	137 }

	138

128 #mainContainer {	139 #mainContainer {

129 @apply(--layout-flex);	140 @apply(--layout-flex);

130	141

131 position: relative;	142 position: relative;

132 overflow-y: auto;	143 overflow-y: auto;

133 overflow-x: hidden;	144 overflow-x: hidden;

134 -webkit-overflow-scrolling: touch;	145 -webkit-overflow-scrolling: touch;

135 flex-basis: 0.0001px;	146 flex-basis: 0.0001px;

136 }	147 }

137	148

(...skipping 83 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
221	232

222 <template>	233 <template>

223 <content id="headerContent" select="paper-toolbar, .paper-header"></content>	234 <content id="headerContent" select="paper-toolbar, .paper-header"></content>

224 <div id="mainContainer" class$="[[_computeMainContainerClass(mode)]]">	235 <div id="mainContainer" class$="[[_computeMainContainerClass(mode)]]">

225 <content id="mainContent" select="*"></content>	236 <content id="mainContent" select="*"></content>

226 </div>	237 </div>

227 </template>	238 </template>

228	239

229 </dom-module>	240 </dom-module>

230	241

231 <style is="custom-style">

232 :root {

233 /**

234 * Default paper header panel shadow

235 */

236 --paper-header-panel-shadow: {

237 height: 6px;

238 bottom: -6px;

239 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);

240 };

241 }

242 </style>

243

244 <script src="paper-header-panel-extracted.js"></script></body></html>	242 <script src="paper-header-panel-extracted.js"></script></body></html>

OLD	NEW