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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: polymer_1.2.3/bower_components/paper-card/demo/index.html

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: 1.2.3 Created 4 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 unified diff | Download patch
« no previous file with comments | « polymer_1.2.3/bower_components/paper-card/bower.json ('k') | polymer_1.2.3/bower_components/paper-card/index.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(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 lang="en">
12 <head>
13 <title>paper-card demo</title>
14 <meta charset="utf-8">
15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial- scale=1, user-scalable=yes">
17
18 <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
19
20 <link rel="import" href="../paper-card.html">
21 <link rel="import" href="../../paper-button/paper-button.html">
22 <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
23 <link rel="import" href="../../iron-collapse/iron-collapse.html">
24 <link rel="import" href="../../iron-icons/iron-icons.html">
25 <link rel="import" href="../../iron-icons/hardware-icons.html">
26 <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
27 <link rel="import" href="../../paper-styles/color.html">
28
29 <link rel="stylesheet" href="../../paper-styles/demo.css">
30
31 <style is="custom-style">
32 body {
33 background-color: var(--paper-grey-50);
34 }
35
36 #cards {
37 @apply(--layout-vertical);
38 @apply(--center-justified);
39 max-width: 400px;
40 margin-left: auto;
41 margin-right: auto;
42 }
43
44 paper-card {
45 width: 100%;
46 margin-bottom: 16px;
47 }
48
49 .avatar {
50 display: inline-block;
51 height: 64px;
52 width: 64px;
53 border-radius: 50%;
54 background: var(--paper-pink-500);
55 color: white;
56 line-height: 64px;
57 font-size: 30px;
58 text-align: center;
59 }
60
61 .fancy .title {
62 position: absolute;
63 top: 30px;
64 left: 100px;
65 color: var(--paper-indigo-500);
66 }
67
68 .fancy img {
69 width: 100%;
70 }
71
72 .fancy .big {
73 font-size: 22px;
74 padding: 8px 0 16px;
75 color: var(--google-grey-500);
76 }
77
78 .fancy .medium {
79 font-size: 16px;
80 padding-bottom: 8px;
81 }
82
83 .pink {
84 --paper-card-header-color: var(--paper-pink-500);
85 }
86 </style>
87
88 </head>
89 <body unresolved>
90 <div id="cards">
91
92 <paper-card>
93 <div class="card-content">
94 <div>Cards are a convenient means of displaying content composed of diff erent types of objects.
95 <br><br>
96 <b>Hurray!</b>
97 </div>
98 </div>
99 </paper-card>
100
101 <paper-card heading="Some cards only have titles"></paper-card>
102
103 <paper-card id="shadow_demo" heading="Paper Shadows" class="pink" animated-s hadow>
104 <div class="card-content">
105 Cards can have different shadows.
106 </div>
107 <div class="card-actions">
108 <paper-button onclick="decreaseShadow()">Decrease</paper-button>
109 <paper-button onclick="increaseShadow()">Increase</paper-button>
110 </div>
111 </paper-card>
112
113 <paper-card >
114 <div class="card-content">
115 Lorem ipsum dolor sit amet, nec ad conceptam interpretaris, mea ne solet repudiandae. Laudem nostrud ei vim. Sapientem consequuntur usu ad, vel etiam ph ilosophia ex, ad quidam option quo. Sed sale integre pericula ei, rebum adipisci ng ius ea.
116 </div>
117 <div class="card-actions">
118 <paper-icon-button icon="favorite" title="favorite"></paper-icon-button>
119 <paper-icon-button icon="bookmark" title="bookmark"></paper-icon-button>
120 <paper-icon-button icon="cloud-upload" title="cloud-upload"></paper-icon -button>
121 </div>
122 </paper-card>
123
124 <paper-card heading="Cards can have titles" class="pink">
125 <div class="card-content">
126 Lorem ipsum dolor sit amet, nec ad conceptam interpretaris, mea ne solet repudiandae. Laudem nostrud ei vim. Sapientem consequuntur usu ad, vel etiam ph ilosophia ex, ad quidam option quo. Sed sale integre pericula ei, rebum adipisci ng ius ea.
127 </div>
128 <div class="card-actions">
129 <paper-button>Nay</paper-button>
130 <paper-button>Yay!</paper-button>
131 <template is="dom-bind" id="expand-demo">
132 <paper-icon-button
133 icon="hardware:keyboard-arrow-down"
134 title="more info"
135 on-tap="_toggleMoreInfo"
136 style="float: right;">
137 </paper-icon-button>
138 <iron-collapse id="more-info">
139 Pro saepe pertinax ei, ad pri animal labores suscipiantur. Modus com modo minimum eum te, vero utinam assueverit per eu, zril oportere suscipiantur p ri te. Partem percipitur deterruisset ad sea, at eam suas luptatum dissentiunt. No error alienum pro, erant senserit ex mei, pri semper alterum no. Ut habemus m enandri vulputate mea. Feugiat verterem ut sed. Dolores maiestatis id per. Pro s aepe pertinax ei, ad pri animal labores suscipiantur. Modus commodo minimum eum te, vero utinam assueverit per eu, zril oportere suscipiantur pri te. Partem per cipitur deterruisset ad sea, at eam suas luptatum dissentiunt. No error alienum pro, erant senserit ex mei, pri semper alterum no. Ut habemus menandri vulputate mea. Feugiat verterem ut sed. Dolores maiestatis id per.
140 </iron-collapse>
141 </template>
142 </div>
143 </paper-card>
144
145 <paper-card heading="Titles AND images!" class="pink"
146 image="http://placehold.it/350x150">
147 <div class="card-content">
148 Lorem ipsum dolor sit amet, nec ad conceptam interpretaris, mea ne solet repudiandae. Laudem nostrud ei vim. Sapientem consequuntur usu ad, vel etiam ph ilosophia ex, ad quidam option quo. Sed sale integre pericula ei, rebum adipisci ng ius ea.
149 </div>
150 <div class="card-actions">
151 <paper-button>No</paper-button>
152 <paper-button>Yes</paper-button>
153 </div>
154 </paper-card>
155
156 <paper-card heading="Actions can be stacked" class="pink">
157 <div class="card-content">
158 Lorem ipsum dolor sit amet, nec ad conceptam interpretaris, mea ne solet repudiandae. Laudem nostrud ei vim. Sapientem consequuntur usu ad, vel etiam ph ilosophia ex, ad quidam option quo. Sed sale integre pericula ei, rebum adipisci ng ius ea.
159 </div>
160 <div class="card-actions">
161 <paper-button>Action</paper-button>
162 </div>
163 <div class="card-actions">
164 <paper-button>Moar action!</paper-button>
165 </div>
166 </paper-card>
167
168 <paper-card class='fancy'>
169 <div class="card-content">
170 <div class="avatar">:)</div>
171 <div class="title">
172 <div class="medium">Title</div>
173 <div class="small">subtitle</div>
174 </div>
175 </div>
176
177 <!-- take this out of the content class so that it can span the whole card -->
178 <img src="http://placehold.it/350x150">
179
180 <div class="card-content">
181 <div class="big">Usu eu novum principes, vel quodsi aliquip ea.</div>
182 <div class="medium">Ut labores minimum atomorum pro. Laudem tibique ut h as.</div>
183 <div class="small">Usu eu novum principes, vel quodsi aliquip ea.</div>
184 </div>
185 </paper-card>
186 </div>
187
188 <script>
189 function decreaseShadow() {
190 var card = document.querySelector('#shadow_demo');
191 card.elevation = card.elevation > 0 ? card.elevation - 1 : 0;
192 }
193
194 function increaseShadow() {
195 var card = document.querySelector('#shadow_demo');
196 card.elevation = card.elevation < 5 ? card.elevation + 1 : 5;
197 }
198
199 var expandDemo = document.getElementById('expand-demo');
200
201 expandDemo._toggleMoreInfo = function(event) {
202 var moreInfo = document.getElementById('more-info');
203 var iconButton = Polymer.dom(event).localTarget;
204 iconButton.icon = moreInfo.opened ? 'hardware:keyboard-arrow-down'
205 : 'hardware:keyboard-arrow-up';
206 moreInfo.toggle();
207 };
208 </script>
209
210 </body>
211 </html>
OLDNEW
« no previous file with comments | « polymer_1.2.3/bower_components/paper-card/bower.json ('k') | polymer_1.2.3/bower_components/paper-card/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698