Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(245)

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

Issue 1261403002: Add paper-menu-button and its dependencies to third_party/polymer (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: reproduce.sh Created 5 years, 4 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
OLDNEW
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 94 matching lines...) Expand 10 before | Expand all | Expand 10 after
105 } 105 }
106 106
107 @group Paper Elements 107 @group Paper Elements
108 @element paper-header-panel 108 @element paper-header-panel
109 @demo demo/index.html 109 @demo demo/index.html
110 @hero hero.svg 110 @hero hero.svg
111 --> 111 -->
112 112
113 </head><body><dom-module id="paper-header-panel"> 113 </head><body><dom-module id="paper-header-panel">
114 114
115 <style> 115 <link rel="import" type="css" href="paper-header-panel.css">
116 :host {
117 @apply(--layout);
118 @apply(--layout-vertical);
119
120 display: block;
121 position: relative;
122 height: 100%;
123
124 /* Create a stack context, we will need it for the shadow*/
125 z-index: 0;
126 }
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
139 #mainContainer {
140 @apply(--layout-flex);
141
142 position: relative;
143 overflow-y: auto;
144 overflow-x: hidden;
145 -webkit-overflow-scrolling: touch;
146 flex-basis: 0.0001px;
147 }
148
149 /*
150 * mode: scroll
151 */
152 :host([mode=scroll]) #mainContainer {
153 @apply(--paper-header-panel-scroll-container);
154 overflow: visible;
155 }
156
157 :host([mode=scroll]) {
158 overflow-y: auto;
159 overflow-x: hidden;
160 -webkit-overflow-scrolling: touch;
161 }
162
163 /*
164 * mode: cover
165 */
166 :host([mode=cover]) #mainContainer {
167 @apply(--paper-header-panel-cover-container);
168 position: absolute;
169 top: 0;
170 right: 0;
171 bottom: 0;
172 left: 0;
173 }
174
175 /*
176 * mode: standard
177 */
178 :host([mode=standard]) #mainContainer {
179 @apply(--paper-header-panel-standard-container);
180 }
181
182 /*
183 * mode: waterfall
184 */
185 :host([mode=waterfall]) #mainContainer {
186 @apply(--paper-header-panel-waterfall-container);
187 }
188
189 /*
190 * mode: waterfall-tall
191 */
192 :host([mode=waterfall-tall]) #mainContainer {
193 @apply(--paper-header-panel-waterfall-tall-container);
194 }
195
196 :host ::content paper-toolbar,
197 :host ::content .paper-header {
198 position: relative;
199 overflow: visible !important;
200 }
201
202 :host ::content paper-toolbar:after,
203 :host ::content .paper-header:after {
204 @apply(--paper-header-panel-shadow);
205
206 -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
207 transition: opacity 0.5s, transform 0.5s;
208
209 opacity: 0;
210 content: "";
211
212 width: 100%;
213 position: absolute;
214 left: 0px;
215 right: 0px;
216 z-index: 1;
217
218 -webkit-transform: scale3d(1, 0, 1);
219 -webkit-transform-origin: 0% 0%;
220
221 transform: scale3d(1, 0, 1);
222 transform-origin: 0% 0%;
223 }
224
225 :host ::content paper-toolbar.has-shadow:after,
226 :host ::content .paper-header.has-shadow:after {
227 opacity: 1;
228 -webkit-transform: scale3d(1, 1, 1);
229 transform: scale3d(1, 1, 1);
230 }
231 </style>
232 116
233 <template> 117 <template>
234 <content id="headerContent" select="paper-toolbar, .paper-header"></content> 118 <content id="headerContent" select="paper-toolbar, .paper-header"></content>
235 <div id="mainContainer" class$="[[_computeMainContainerClass(mode)]]"> 119
236 <content id="mainContent" select="*"></content> 120 <div id="mainPanel">
121 <div id="mainContainer" class$="[[_computeMainContainerClass(mode)]]">
122 <content id="mainContent" select="*"></content>
123 </div>
124 <div id="dropShadow"></div>
237 </div> 125 </div>
238 </template> 126 </template>
239 127
240 </dom-module> 128 </dom-module>
241 129
242 <script src="paper-header-panel-extracted.js"></script></body></html> 130 <script src="paper-header-panel-extracted.js"></script></body></html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698