polymer_1.0.4/bower_components/paper-scroll-header-panel/demo/demo7.html - Issue 1205703007: Add polymer 1.0 to npm_modules

Side by Side Diff: polymer_1.0.4/bower_components/paper-scroll-header-panel/demo/demo7.html

Issue 1205703007: Add polymer 1.0 to npm_modules (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master

Patch Set: Renamed folder to 1.0.4 Created 5 years, 5 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 | « polymer_1.0.4/bower_components/paper-scroll-header-panel/demo/demo6.html ('k') | polymer_1.0.4/bower_components/paper-scroll-header-panel/demo/demo8.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!doctype html>

	2 <!--

	3 @license

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

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

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

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

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

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

	10 -->

	11 <html>

	12 <head>

	13 <title>paper-scroll-header-panel: demo7</title>

	14

	15 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial- scale=1.0, user-scalable=yes">

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

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

	18

	19 <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

	20

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

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

	23 <link rel="import" href="../../iron-icons/iron-icons.html">

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

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

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

	27

	28 <link rel="stylesheet" href="../../paper-styles/demo.css">

	29

	30 <style is="custom-style">

	31

	32 paper-scroll-header-panel {

	33 position: absolute;

	34 top: 0;

	35 right: 0;

	36 bottom: 0;

	37 left: 0;

	38 background-color: var(--paper-grey-200, #eee);

	39

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

	41 --paper-scroll-header-panel-full-header: {

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

	43 };

	44

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

	46 --paper-scroll-header-panel-condensed-header: {

	47 background-color: var(--google-yellow-500, #f4b400);

	48 };

	49 }

	50

	51 paper-toolbar.tall {

	52 background-color: transparent;

	53 }

	54

	55 paper-toolbar.tall .title {

	56 font-size: 40px;

	57 margin-left: 60px;

	58

	59 -webkit-transform-origin: left center;

	60 transform-origin: left center;

	61

	62 /* Issue #15 */

	63 isolation: isolate;

	64 }

	65

	66 .content {

	67 padding: 8px;

	68 }

	69

	70 </style>

	71

	72 </head>

	73 <body>

	74

	75 <paper-scroll-header-panel condenses>

	76

	77 <paper-toolbar class="tall">

	78

	79 <paper-icon-button icon="arrow-back"></paper-icon-button>

	80 <div class="flex"></div>

	81 <paper-icon-button icon="search"></paper-icon-button>

	82 <paper-icon-button icon="more-vert"></paper-icon-button>

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

	84

	85 </paper-toolbar>

	86

	87 <div class="content">

	88

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

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

	91

	92 </div>

	93

	94 </paper-scroll-header-panel>

	95

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

	97

	98 <script>

	99

	100 // toggle fixed header based on screen size

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

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

	103 mquery.addEventListener('query-matches-changed', function() {

	104 panel.fixed = mquery.queryMatches;

	105 });

	106

	107 // custom transformation: scale header's title

	108 var title = document.querySelector('.title');

	109 addEventListener('paper-header-transform', function(e) {

	110 var d = e.detail;

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

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

	113

	114 Polymer.Base.transform('scale(' + scale + ') translateZ(0)', title);

	115 });

	116

	117 </script>

	118

	119 </body>

	120 </html>

OLD	NEW