bower_components/core-scroll-header-panel/demos/demo7.html - Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

Unified Diff: bower_components/core-scroll-header-panel/demos/demo7.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master

Patch Set: Created 5 years, 11 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 side-by-side diff with in-line comments

Download patch

« no previous file with comments | « bower_components/core-scroll-header-panel/demos/demo6.html ('k') | bower_components/core-scroll-header-panel/demos/demo8.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: bower_components/core-scroll-header-panel/demos/demo7.html

diff --git a/bower_components/core-scroll-header-panel/demos/demo7.html b/bower_components/core-scroll-header-panel/demos/demo7.html

deleted file mode 100644

index 7eac3ee9699cbde8bedf349fe4839bad169020bd..0000000000000000000000000000000000000000

--- a/bower_components/core-scroll-header-panel/demos/demo7.html

+++ /dev/null

@@ -1,121 +0,0 @@

-<!doctype html>

-<!--

-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

--->

-<html>

-<head>

- <title>core-scroll-header-panel: demo7</title>

- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

- <meta name="mobile-web-app-capable" content="yes">

- <meta name="apple-mobile-web-app-capable" content="yes">

- <script src="../../platform/platform.js"></script>

- <link rel="import" href="../core-scroll-header-panel.html">

- <link rel="import" href="sample-content.html">

- <link rel="import" href="../../core-toolbar/core-toolbar.html">

- <link rel="import" href="../../core-icon-button/core-icon-button.html">

- <link rel="import" href="../../core-media-query/core-media-query.html">

- <style shim-shadowdom>

- html, body {

- height: 100%;

- }

- body {

- margin: 0;

- font-family: sans-serif;

- color: #333;

- }

- core-scroll-header-panel {

- position: absolute;

- top: 0;

- right: 0;

- bottom: 0;

- left: 0;

- }

- /* background for toolbar when it is at its full size */

- core-scroll-header-panel::shadow #headerBg {

- background-image: url(images/bg9.jpg);

- }

- /* background for toolbar when it is condensed */

- core-scroll-header-panel::shadow #condensedHeaderBg {

- background-color: #f4b400;

- }

- core-toolbar {

- color: #f1f1f1;

- fill: #f1f1f1;

- background-color: transparent;

- }

- .title {

- font-size: 40px;

- }

- .content {

- padding: 8px;

- background-color: #eee;

- }

- </style>

-</head>

-<body unresolved>

- <core-scroll-header-panel condenses>

- <core-toolbar class="tall">

- <core-icon-button icon="arrow-back"></core-icon-button>

- <div flex></div>

- <core-icon-button icon="search"></core-icon-button>

- <core-icon-button icon="more-vert"></core-icon-button>

- <div class="bottom indent title">Title</div>

- </core-toolbar>

- <div class="content">

- <h3>Resize window to toggle between fixed header and scrolled header</h3>

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

- </div>

- </core-scroll-header-panel>

- <core-media-query id="mquery" query="min-width: 600px"></core-media-query>

- <script>

- // toggle fixed header based on screen size

- var panel = document.querySelector('core-scroll-header-panel');

- var mquery = document.querySelector('#mquery');

- mquery.addEventListener('core-media-change', function() {

- panel.fixed = mquery.queryMatches;

- });

- // custom transformation: scale header's title

- var titleStyle = document.querySelector('.title').style;

- addEventListener('core-header-transform', function(e) {

- var d = e.detail;

- var m = d.height - d.condensedHeight;

- var scale = Math.max(0.75, (m - d.y) / (m / 0.25) + 0.75);

- titleStyle.transform = titleStyle.webkitTransform =

- 'scale(' + scale + ') translateZ(0)';

- });

- </script>

-</body>

-</html>