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

Side by Side Diff: polymer_1.0.4/bower_components/paper-header-panel/demo/index.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-header-panel/bower.json ('k') | polymer_1.0.4/bower_components/paper-header-panel/hero.svg » ('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 <!--

	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

	13 <head>

	14 <title>paper-header-panel demo</title>

	15

	16 <script src="../../webcomponentsjs/webcomponents.js"></script>

	17 <link rel="import" href="../../paper-styles/paper-styles.html">

	18 <link rel="import" href="../../paper-styles/demo-pages.html">

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

	20

	21 <style is="custom-style">

	22 body {

	23 padding: 40px;

	24 }

	25

	26 paper-header-panel {

	27 float: left;

	28 width: 240px;

	29 height: 240px;

	30 margin: 12px;

	31 @apply(--shadow-elevation-2dp);

	32 }

	33

	34 .paper-header {

	35 height: 60px;

	36 font-size: 16px;

	37 line-height: 60px;

	38 padding: 0 10px;

	39 color: white;

	40 transition: height 0.2s;

	41 }

	42

	43 .paper-header.tall {

	44 height: 120px;

	45 }

	46

	47 .paper-header.medium-tall {

	48 height: 100px;

	49 line-height: 50px;

	50 }

	51

	52 .content {

	53 height: 2000px;

	54 }

	55

	56 .cover {

	57 margin: 60px;

	58 }

	59

	60 .blue .paper-header {

	61 background-color: var(--paper-light-blue-500);

	62 }

	63 .red .paper-header {

	64 background-color: var(--paper-red-500);

	65 }

	66 .orange .paper-header {

	67 background-color: var(--paper-amber-500);

	68 }

	69 .green .paper-header {

	70 background-color: var(--paper-green-500);

	71 }

	72 .cyan .paper-header {

	73 background-color: var(--paper-cyan-500);

	74 }

	75 .lime .paper-header {

	76 background-color: var(--paper-lime-500);

	77 }

	78 .pink .paper-header {

	79 background-color: var(--paper-pink-a200);

	80 }

	81

	82 /* TODO: replace these with background: linear-gradient(white, var(...))

	83 when custom properties allow it */

	84

	85 .blue .content {

	86 background: linear-gradient(white, #b3e5fc);

	87 }

	88 .red .content {

	89 background: linear-gradient(white, #ffcdd2);

	90 }

	91 .orange .content {

	92 background: linear-gradient(white, #ffecb3);

	93 }

	94 .green .content {

	95 background: linear-gradient(white, #c8e6c9);

	96 }

	97 .cyan .content {

	98 background: linear-gradient(white, #b2ebf2);

	99 }

	100 .lime .content {

	101 background: linear-gradient(white, #f0f4c3);

	102 }

	103 .pink .content {

	104 background: linear-gradient(white, #f8bbd0);

	105 }

	106 </style>

	107 </head>

	108

	109 <body>

	110 <div class="layout wrap inline center-center">

	111 <paper-header-panel class="blue">

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

	113 <div class="content"></div>

	114 </paper-header-panel>

	115

	116 <paper-header-panel mode="seamed" class="red">

	117 <div class="paper-header">seamed</div>

	118 <div class="content"></div>

	119 </paper-header-panel>

	120

	121 <paper-header-panel mode="scroll" class="orange">

	122 <div class="paper-header">scroll</div>

	123 <div class="content"></div>

	124 </paper-header-panel>

	125

	126 <paper-header-panel mode="waterfall" class="green">

	127 <div class="paper-header">waterfall</div>

	128 <div class="content"></div>

	129 </paper-header-panel>

	130

	131 <paper-header-panel mode="waterfall-tall" class="pink">

	132 <div class="paper-header">waterfall-tall</div>

	133 <div class="content"></div>

	134 </paper-header-panel>

	135

	136 <paper-header-panel mode="waterfall-tall" tall-class="medium-tall" class=" cyan">

	137 <div class="paper-header">waterfall-tall<br>tall-class: medium-tall</div >

	138 <div class="content"></div>

	139 </paper-header-panel>

	140

	141 <paper-header-panel mode="cover" class="lime">

	142 <div class="paper-header tall">cover</div>

	143 <div class="content cover"></div>

	144 </paper-header-panel>

	145 </div>

	146 </body>

	147

	148 </html>

OLD	NEW