| OLD | NEW |
|---|
| 1 <!-- | 1 <!-- |
| 2 @license | 2 @license |
| 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 7 Code distributed by Google as part of the polymer project is also | 7 Code distributed by Google as part of the polymer project is also |
| 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --><html><head><link rel="import" href="../../polymer/polymer.html"> | 9 --><html><head><link rel="import" href="../../polymer/polymer.html"> |
| 10 <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html"> | 10 <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html"> |
| (...skipping 200 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 211 @group App Elements | 211 @group App Elements |
| 212 @element app-header | 212 @element app-header |
| 213 @demo app-header/demo/blend-background-1.html Blend Background Image | 213 @demo app-header/demo/blend-background-1.html Blend Background Image |
| 214 @demo app-header/demo/blend-background-2.html Blend 2 Background Images | 214 @demo app-header/demo/blend-background-2.html Blend 2 Background Images |
| 215 @demo app-header/demo/blend-background-3.html Blend Background Colors | 215 @demo app-header/demo/blend-background-3.html Blend Background Colors |
| 216 @demo app-header/demo/contacts.html Contacts Demo | 216 @demo app-header/demo/contacts.html Contacts Demo |
| 217 @demo app-header/demo/give.html Resize Snapped Title Demo | 217 @demo app-header/demo/give.html Resize Snapped Title Demo |
| 218 @demo app-header/demo/music.html Reveals Demo | 218 @demo app-header/demo/music.html Reveals Demo |
| 219 @demo app-header/demo/no-effects.html Condenses and Reveals Demo | 219 @demo app-header/demo/no-effects.html Condenses and Reveals Demo |
| 220 @demo app-header/demo/notes.html Fixed with Dynamic Shadow Demo | 220 @demo app-header/demo/notes.html Fixed with Dynamic Shadow Demo |
| 221 @demo app-header/demo/custom-primary-element.html Custom Primary Element Demo |
| 221 --> | 222 --> |
| 222 | 223 |
| 223 </head><body><dom-module id="app-header"> | 224 </head><body><dom-module id="app-header"> |
| 224 <template> | 225 <template> |
| 225 <style> | 226 <style> |
| 226 :host { | 227 :host { |
| 227 position: relative; | 228 position: relative; |
| 228 | |
| 229 display: block; | 229 display: block; |
| 230 | |
| 231 transition-timing-function: linear; | 230 transition-timing-function: linear; |
| 232 transition-property: -webkit-transform; | 231 transition-property: -webkit-transform; |
| 233 transition-property: transform; | 232 transition-property: transform; |
| 234 } | 233 } |
| 235 | 234 |
| 236 :host::after { | 235 :host::after { |
| 237 position: absolute; | 236 position: absolute; |
| 238 right: 0px; | 237 right: 0px; |
| 239 bottom: -5px; | 238 bottom: -5px; |
| 240 left: 0px; | 239 left: 0px; |
| 241 | |
| 242 width: 100%; | 240 width: 100%; |
| 243 height: 5px; | 241 height: 5px; |
| 244 | |
| 245 content: ""; | 242 content: ""; |
| 246 transition: opacity 0.4s; | 243 transition: opacity 0.4s; |
| 247 pointer-events: none; | 244 pointer-events: none; |
| 248 | |
| 249 opacity: 0; | 245 opacity: 0; |
| 250 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4); | 246 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4); |
| 251 | |
| 252 will-change: opacity; | 247 will-change: opacity; |
| 253 | |
| 254 @apply(--app-header-shadow); | 248 @apply(--app-header-shadow); |
| 255 } | 249 } |
| 256 | 250 |
| 257 :host([shadow])::after { | 251 :host([shadow])::after { |
| 258 opacity: 1; | 252 opacity: 1; |
| 259 } | 253 } |
| 260 | 254 |
| 261 #contentContainer > ::content [condensed-title] { | 255 #contentContainer > ::content [condensed-title] { |
| 262 -webkit-transform-origin: left top; | 256 -webkit-transform-origin: left top; |
| 263 transform-origin: left top; | 257 transform-origin: left top; |
| 264 white-space: nowrap; | 258 white-space: nowrap; |
| 265 | |
| 266 opacity: 0; | 259 opacity: 0; |
| 267 } | 260 } |
| 268 | 261 |
| 269 #contentContainer > ::content [title] { | 262 #contentContainer > ::content [title] { |
| 270 -webkit-transform-origin: left top; | 263 -webkit-transform-origin: left top; |
| 271 transform-origin: left top; | 264 transform-origin: left top; |
| 272 white-space: nowrap; | 265 white-space: nowrap; |
| 273 } | 266 } |
| 274 | 267 |
| 275 #background { | 268 #background { |
| 276 @apply(--layout-fit); | 269 @apply(--layout-fit); |
| 277 | |
| 278 overflow: hidden; | 270 overflow: hidden; |
| 279 } | 271 } |
| 280 | 272 |
| 281 #backgroundFrontLayer, | 273 #backgroundFrontLayer, |
| 282 #backgroundRearLayer { | 274 #backgroundRearLayer { |
| 283 @apply(--layout-fit); | 275 @apply(--layout-fit); |
| 284 | |
| 285 height: 100%; | 276 height: 100%; |
| 286 | |
| 287 pointer-events: none; | 277 pointer-events: none; |
| 288 | |
| 289 background-size: cover; | 278 background-size: cover; |
| 290 } | 279 } |
| 291 | 280 |
| 292 #backgroundFrontLayer { | 281 #backgroundFrontLayer { |
| 293 @apply(--app-header-background-front-layer); | 282 @apply(--app-header-background-front-layer); |
| 294 } | 283 } |
| 295 | 284 |
| 296 #backgroundRearLayer { | 285 #backgroundRearLayer { |
| 297 opacity: 0; | 286 opacity: 0; |
| 298 | |
| 299 @apply(--app-header-background-rear-layer); | 287 @apply(--app-header-background-rear-layer); |
| 300 } | 288 } |
| 301 | 289 |
| 302 #contentContainer { | 290 #contentContainer { |
| 303 position: relative; | 291 position: relative; |
| 304 | |
| 305 width: 100%; | 292 width: 100%; |
| 306 height: 100%; | 293 height: 100%; |
| 307 } | 294 } |
| 308 | 295 |
| 309 :host([disabled]), | 296 :host([disabled]), |
| 310 :host([disabled])::after, | 297 :host([disabled])::after, |
| 311 :host([disabled]) #backgroundFrontLayer, | 298 :host([disabled]) #backgroundFrontLayer, |
| 312 :host([disabled]) #backgroundRearLayer, | 299 :host([disabled]) #backgroundRearLayer, |
| 313 :host([disabled]) ::content > app-toolbar:first-of-type, | 300 :host([disabled]) ::content > app-toolbar:first-of-type, |
| 314 :host([disabled]) ::content > [primary], | 301 :host([disabled]) ::content > [primary], |
| 315 /* Silent scrolling should not run CSS transitions */ | 302 /* Silent scrolling should not run CSS transitions */ |
| 316 :host-context(.app-layout-silent-scroll), | 303 :host-context(.app-layout-silent-scroll), |
| 317 :host-context(.app-layout-silent-scroll)::after, | 304 :host-context(.app-layout-silent-scroll)::after, |
| 318 :host-context(.app-layout-silent-scroll) #backgroundFrontLayer, | 305 :host-context(.app-layout-silent-scroll) #backgroundFrontLayer, |
| 319 :host-context(.app-layout-silent-scroll) #backgroundRearLayer, | 306 :host-context(.app-layout-silent-scroll) #backgroundRearLayer, |
| 320 :host-context(.app-layout-silent-scroll) ::content > app-toolbar:first-of-
type, | 307 :host-context(.app-layout-silent-scroll) ::content > app-toolbar:first-of-
type, |
| 321 :host-context(.app-layout-silent-scroll) ::content > [primary] { | 308 :host-context(.app-layout-silent-scroll) ::content > [primary] { |
| 322 transition: none !important; | 309 transition: none !important; |
| 323 } | 310 } |
| 324 </style> | 311 </style> |
| 325 | |
| 326 <div id="background"> | |
| 327 <div id="backgroundRearLayer"></div> | |
| 328 <div id="backgroundFrontLayer"></div> | |
| 329 </div> | |
| 330 <div id="contentContainer"> | 312 <div id="contentContainer"> |
| 331 <content id="content"></content> | 313 <content id="content"></content> |
| 332 </div> | 314 </div> |
| 333 </template> | 315 </template> |
| 334 | 316 |
| 335 </dom-module> | 317 </dom-module> |
| 336 <script src="app-header-extracted.js"></script></body></html> | 318 <script src="app-header-extracted.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2074813002:
Roll Polymer (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master