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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: polymer_1.2.3/bower_components/paper-item/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-item/bower.json ('k') | polymer_1.2.3/bower_components/paper-item/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
1 <!doctype html> 1 <!doctype html>
2 <!-- 2 <!--
3 @license 3 @license
4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 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 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 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 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 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 9 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
10 --> 10 -->
11 <html> 11 <html>
12 <head> 12 <head>
13 13
14 <meta charset="utf-8"> 14 <meta charset="utf-8">
15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 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"> 16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial- scale=1, user-scalable=yes">
17 17
18 <title>paper-item demo</title> 18 <title>paper-item demo</title>
19 19
20 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 20 <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
21 21
22 <link rel="import" href="../../iron-icon/iron-icon.html"> 22 <link rel="import" href="../../iron-icon/iron-icon.html">
23 <link rel="import" href="../../iron-icons/iron-icons.html"> 23 <link rel="import" href="../../iron-icons/iron-icons.html">
24 <link rel="import" href="../../iron-icons/communication-icons.html"> 24 <link rel="import" href="../../iron-icons/communication-icons.html">
25 <link rel="import" href="../../paper-checkbox/paper-checkbox.html"> 25 <link rel="import" href="../../paper-checkbox/paper-checkbox.html">
26 <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
26 <link rel="import" href="../../paper-toggle-button/paper-toggle-button.html"> 27 <link rel="import" href="../../paper-toggle-button/paper-toggle-button.html">
27 <link rel="import" href="../paper-icon-item.html"> 28 <link rel="import" href="../paper-icon-item.html">
28 <link rel="import" href="../paper-item.html"> 29 <link rel="import" href="../paper-item.html">
29 <link rel="import" href="../paper-item-body.html"> 30 <link rel="import" href="../paper-item-body.html">
30 <link rel="import" href="../../paper-styles/paper-styles.html"> 31 <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
31 <link rel="import" href="../../paper-styles/demo-pages.html"> 32 <link rel="import" href="../../paper-styles/demo-pages.html">
32
33 <style is="custom-style"> 33 <style is="custom-style">
34 .list { 34 .list {
35 @apply(--layout-vertical);
36
35 padding-top: 12px; 37 padding-top: 12px;
36 background-color: white; 38 background-color: white;
37 display: inline-block;
38 width: 240px; 39 width: 240px;
39 height: 228px; 40 height: 228px;
40 margin: 12px; 41 margin: 12px;
41 @apply(--shadow-elevation-2dp); 42 @apply(--shadow-elevation-2dp);
42 } 43 }
43 44
44 .short { 45 .short {
45 padding-top: 12px; 46 padding-top: 12px;
46 height: 216px; 47 height: 216px;
47 } 48 }
(...skipping 16 matching lines...) Expand all
64 } 65 }
65 .red { 66 .red {
66 background-color: var(--paper-red-300); 67 background-color: var(--paper-red-300);
67 } 68 }
68 .orange { 69 .orange {
69 background-color: var(--paper-amber-300); 70 background-color: var(--paper-amber-300);
70 } 71 }
71 .green { 72 .green {
72 background-color: var(--paper-green-300); 73 background-color: var(--paper-green-300);
73 } 74 }
75
76 .container {
77 @apply(--layout-wrap);
78 @apply(--layout-center-center);
79 @apply(--layout-inline);
80 }
81 .flex {
82 @apply(--layout-flex);
83 }
74 </style> 84 </style>
75 </head> 85 </head>
76 <body> 86 <body unresolved>
77 <div class="layout wrap inline center-center"> 87 <div class="container">
78 <div> 88 <div>
79 <h4>Single line items</h4> 89 <h4>Single line items</h4>
80 <div class="list short"> 90 <div class="list short" role="listbox">
81 <paper-item>Inbox</paper-item> 91 <paper-item>Inbox</paper-item>
82 <paper-item>Starred</paper-item> 92 <paper-item>Starred</paper-item>
83 <paper-item>Sent mail</paper-item> 93 <paper-item>Sent mail</paper-item>
84 <paper-item>Drafts</paper-item> 94 <paper-item>Drafts</paper-item>
85 </div> 95 </div>
86 </div> 96 </div>
87 97
88 <div> 98 <div>
89 <h4>Icon with text</h4> 99 <h4>Icon with text</h4>
90 <div class="list short"> 100 <div class="list short" role="listbox">
91 <paper-icon-item> 101 <paper-icon-item>
92 <iron-icon icon="inbox" item-icon></iron-icon> Inbox 102 <iron-icon icon="inbox" item-icon></iron-icon> Inbox
93 </paper-icon-item> 103 </paper-icon-item>
94 <paper-icon-item> 104 <paper-icon-item>
95 <iron-icon icon="send" item-icon></iron-icon> Outbox 105 <iron-icon icon="send" item-icon></iron-icon> Outbox
96 </paper-icon-item> 106 </paper-icon-item>
97 <paper-icon-item> 107 <paper-icon-item>
98 <iron-icon icon="delete" item-icon></iron-icon> Trash 108 <iron-icon icon="delete" item-icon></iron-icon> Trash
99 </paper-icon-item> 109 </paper-icon-item>
100 <paper-icon-item> 110 <paper-icon-item>
101 <iron-icon icon="report" item-icon></iron-icon> Spam 111 <iron-icon icon="report" item-icon></iron-icon> Spam
102 </paper-icon-item> 112 </paper-icon-item>
103 </div> 113 </div>
104 </div> 114 </div>
105 115
106 <div> 116 <div>
107 <h4>Avatar with text</h4> 117 <h4>Avatar with text</h4>
108 <div class="list short"> 118 <div class="list short" role="listbox">
109 <paper-icon-item> 119 <paper-icon-item>
110 <div class="avatar blue" item-icon></div> Alphonso Engelking 120 <div class="avatar blue" item-icon></div> Alphonso Engelking
111 </paper-icon-item> 121 </paper-icon-item>
112 <paper-icon-item> 122 <paper-icon-item>
113 <div class="avatar red" item-icon></div> Andrews Boyd 123 <div class="avatar red" item-icon></div> Andrews Boyd
114 </paper-icon-item> 124 </paper-icon-item>
115 <paper-icon-item> 125 <paper-icon-item>
116 <div class="avatar orange" item-icon></div> Angela Decker 126 <div class="avatar orange" item-icon></div> Angela Decker
117 </paper-icon-item> 127 </paper-icon-item>
118 <paper-icon-item> 128 <paper-icon-item>
119 <div class="avatar green" item-icon></div> Lorem Ipsum 129 <div class="avatar green" item-icon></div> Lorem Ipsum
120 </paper-icon-item> 130 </paper-icon-item>
121 </div> 131 </div>
122 </div> 132 </div>
123 133
124 <div> 134 <div>
125 <h4>Avatar with text and icon</h4> 135 <h4>Avatar with text and icon</h4>
126 <div class="list short"> 136 <div class="list short" role="listbox">
127 <paper-icon-item> 137 <paper-icon-item>
128 <div class="avatar red" item-icon></div> 138 <div class="avatar red" item-icon></div>
129 <div class="flex">Alphonso</div> 139 <div class="flex">Alphonso</div>
130 <iron-icon icon="communication:messenger"></iron-icon> 140 <iron-icon icon="communication:chat"></iron-icon>
131 </paper-icon-item> 141 </paper-icon-item>
132 <paper-icon-item> 142 <paper-icon-item>
133 <div class="avatar orange" item-icon></div> 143 <div class="avatar orange" item-icon></div>
134 <div class="flex">Andrews</div> 144 <div class="flex">Andrews</div>
135 <iron-icon icon="communication:messenger"></iron-icon> 145 <iron-icon icon="communication:chat"></iron-icon>
136 </paper-icon-item> 146 </paper-icon-item>
137 <paper-icon-item> 147 <paper-icon-item>
138 <div class="avatar green" item-icon></div> 148 <div class="avatar green" item-icon></div>
139 <div class="flex">Angela</div> 149 <div class="flex">Angela</div>
140 <iron-icon icon="communication:messenger"></iron-icon> 150 <iron-icon icon="communication:chat"></iron-icon>
141 </paper-icon-item> 151 </paper-icon-item>
142 <paper-icon-item> 152 <paper-icon-item>
143 <div class="avatar blue" item-icon></div> 153 <div class="avatar blue" item-icon></div>
144 <div class="flex">Lorem</div> 154 <div class="flex">Lorem</div>
145 <iron-icon icon="communication:messenger"></iron-icon> 155 <iron-icon icon="communication:chat"></iron-icon>
146 </paper-icon-item> 156 </paper-icon-item>
147 </div> 157 </div>
148 </div> 158 </div>
149 159
150 <div> 160 <div>
151 <h4>Avatar with text and control</h4> 161 <h4>Avatar with text and control</h4>
152 <div class="list short"> 162 <div class="list short" role="listbox">
153 <paper-icon-item> 163 <paper-icon-item>
154 <div class="avatar orange" item-icon></div> 164 <div class="avatar orange" item-icon></div>
155 <div class="flex">Alphonso</div> 165 <div class="flex">Alphonso</div>
156 <paper-checkbox></paper-checkbox> 166 <paper-checkbox></paper-checkbox>
157 </paper-icon-item> 167 </paper-icon-item>
158 <paper-icon-item> 168 <paper-icon-item>
159 <div class="avatar green" item-icon></div> 169 <div class="avatar green" item-icon></div>
160 <div class="flex">Andrews</div> 170 <div class="flex">Andrews</div>
161 <paper-checkbox checked></paper-checkbox> 171 <paper-checkbox checked></paper-checkbox>
162 </paper-icon-item> 172 </paper-icon-item>
163 <paper-icon-item> 173 <paper-icon-item>
164 <div class="avatar blue" item-icon></div> 174 <div class="avatar blue" item-icon></div>
165 <div class="flex">Angela</div> 175 <div class="flex">Angela</div>
166 <paper-checkbox></paper-checkbox> 176 <paper-checkbox></paper-checkbox>
167 </paper-icon-item> 177 </paper-icon-item>
168 <paper-icon-item> 178 <paper-icon-item>
169 <div class="avatar red" item-icon></div> 179 <div class="avatar red" item-icon></div>
170 <div class="flex">Lorem</div> 180 <div class="flex">Lorem</div>
171 <paper-checkbox></paper-checkbox> 181 <paper-checkbox></paper-checkbox>
172 </paper-icon-item> 182 </paper-icon-item>
173 </div> 183 </div>
174 </div> 184 </div>
175 185
176 <div> 186 <div>
177 <h4>Control with text and icon</h4> 187 <h4>Control with text and icon</h4>
178 <div class="list short"> 188 <div class="list short" role="listbox">
179 <paper-icon-item> 189 <paper-icon-item>
180 <paper-checkbox item-icon></paper-checkbox> 190 <paper-checkbox item-icon></paper-checkbox>
181 <div class="flex">Alphonso</div> 191 <div class="flex">Alphonso</div>
182 <iron-icon icon="communication:messenger"></iron-icon> 192 <iron-icon icon="communication:chat"></iron-icon>
183 </paper-icon-item> 193 </paper-icon-item>
184 <paper-icon-item> 194 <paper-icon-item>
185 <paper-checkbox checked item-icon></paper-checkbox> 195 <paper-checkbox checked item-icon></paper-checkbox>
186 <div class="flex">Andrews</div> 196 <div class="flex">Andrews</div>
187 <iron-icon icon="communication:messenger"></iron-icon> 197 <iron-icon icon="communication:chat"></iron-icon>
188 </paper-icon-item> 198 </paper-icon-item>
189 <paper-icon-item> 199 <paper-icon-item>
190 <paper-checkbox item-icon></paper-checkbox> 200 <paper-checkbox item-icon></paper-checkbox>
191 <div class="flex">Angela</div> 201 <div class="flex">Angela</div>
192 <iron-icon icon="communication:messenger"></iron-icon> 202 <iron-icon icon="communication:chat"></iron-icon>
193 </paper-icon-item> 203 </paper-icon-item>
194 <paper-icon-item> 204 <paper-icon-item>
195 <paper-checkbox item-icon></paper-checkbox> 205 <paper-checkbox item-icon></paper-checkbox>
196 <div class="flex">Lorem</div> 206 <div class="flex">Lorem</div>
197 <iron-icon icon="communication:messenger"></iron-icon> 207 <iron-icon icon="communication:chat"></iron-icon>
198 </paper-icon-item> 208 </paper-icon-item>
199 </div> 209 </div>
200 </div> 210 </div>
201 211
202 <div> 212 <div>
203 <h4>Two-line items</h4> 213 <h4>Two-line items</h4>
204 <div class="list"> 214 <div class="list" role="listbox">
205 <paper-item> 215 <paper-item>
206 <paper-item-body two-line class="layout vertical"> 216 <paper-item-body two-line class="layout vertical">
207 <div>Profile Photo</div> 217 <div>Profile Photo</div>
208 <div secondary>Change your Google+ profile photo</div> 218 <div secondary>Change your Google+ profile photo</div>
209 </paper-item-body> 219 </paper-item-body>
210 </paper-item> 220 </paper-item>
211 <paper-item> 221 <paper-item>
212 <paper-item-body two-line> 222 <paper-item-body two-line>
213 <div>Show your status</div> 223 <div>Show your status</div>
214 <div secondary>Your status is visible to everyone you use with</div> 224 <div secondary>Your status is visible to everyone you use with</div>
215 </paper-item-body> 225 </paper-item-body>
216 </paper-item> 226 </paper-item>
217 <paper-item> 227 <paper-item>
218 <paper-item-body two-line class="layout vertical"> 228 <paper-item-body two-line class="layout vertical">
219 <div>Settings</div> 229 <div>Settings</div>
220 <div secondary>Change your account settings</div> 230 <div secondary>Change your account settings</div>
221 </paper-item-body> 231 </paper-item-body>
222 </paper-item> 232 </paper-item>
223 </div> 233 </div>
224 </div> 234 </div>
225 235
226 <div> 236 <div>
227 <h4>Icon with two-line text</h4> 237 <h4>Icon with two-line text</h4>
228 <div class="list"> 238 <div class="list" role="listbox">
229 <paper-icon-item> 239 <paper-icon-item>
230 <div class="avatar green" item-icon></div> 240 <div class="avatar green" item-icon></div>
231 <paper-item-body two-line> 241 <paper-item-body two-line>
232 <div>Alphonso Engelking</div> 242 <div>Alphonso Engelking</div>
233 <div secondary>Change photo</div> 243 <div secondary>Change photo</div>
234 </paper-item-body> 244 </paper-item-body>
235 </paper-icon-item> 245 </paper-icon-item>
236 <paper-icon-item> 246 <paper-icon-item>
237 <iron-icon icon="communication:phone" item-icon></iron-icon> 247 <iron-icon icon="communication:phone" item-icon></iron-icon>
238 <paper-item-body two-line> 248 <paper-item-body two-line>
239 <div>(650) 555-1234</div> 249 <div>(650) 555-1234</div>
240 <div secondary>Mobile</div> 250 <div secondary>Mobile</div>
241 </paper-item-body> 251 </paper-item-body>
242 </paper-icon-item> 252 </paper-icon-item>
243 <paper-icon-item> 253 <paper-icon-item>
244 <iron-icon icon="communication:email" item-icon></iron-icon> 254 <iron-icon icon="communication:email" item-icon></iron-icon>
245 <paper-item-body two-line> 255 <paper-item-body two-line>
246 <div>alphonso@example.com</div> 256 <div>alphonso@example.com</div>
247 <div secondary>Personal</div> 257 <div secondary>Personal</div>
248 </paper-item-body> 258 </paper-item-body>
249 </paper-icon-item> 259 </paper-icon-item>
250 <paper-icon-item>
251 </div> 260 </div>
252 </div> 261 </div>
253 262
254 <div> 263 <div>
255 <h4>Avatar with text and icon</h4> 264 <h4>Avatar with text and icon</h4>
256 <div class="list"> 265 <div class="list" role="listbox">
257 <paper-icon-item> 266 <paper-icon-item>
258 <div class="avatar blue" item-icon></div> 267 <div class="avatar blue" item-icon></div>
259 <paper-item-body two-line> 268 <paper-item-body two-line>
260 <div>Photos</div> 269 <div>Photos</div>
261 <div secondary>Jan 9, 2014</div> 270 <div secondary>Jan 9, 2014</div>
262 </paper-item-body> 271 </paper-item-body>
263 <iron-icon icon="star"></iron-icon> 272 <paper-icon-button icon="star" alt="favourite this!"></paper-icon-butt on>
264 </paper-icon-item> 273 </paper-icon-item>
265 <paper-icon-item> 274 <paper-icon-item>
266 <div class="avatar red" item-icon></div> 275 <div class="avatar red" item-icon></div>
267 <paper-item-body two-line> 276 <paper-item-body two-line>
268 <div>Recipes</div> 277 <div>Recipes</div>
269 <div secondary>Jan 17, 2014</div> 278 <div secondary>Jan 17, 2014</div>
270 </paper-item-body> 279 </paper-item-body>
271 <iron-icon icon="star"></iron-icon> 280 <paper-icon-button icon="star" alt="favourite this!"></paper-icon-butt on>
272 </paper-icon-item> 281 </paper-icon-item>
273 <paper-icon-item> 282 <paper-icon-item>
274 <div class="avatar orange" item-icon></div> 283 <div class="avatar orange" item-icon></div>
275 <paper-item-body two-line> 284 <paper-item-body two-line>
276 <div>Work</div> 285 <div>Work</div>
277 <div secondary>Jan 28, 2014</div> 286 <div secondary>Jan 28, 2014</div>
278 </paper-item-body> 287 </paper-item-body>
279 <iron-icon icon="star"></iron-icon> 288 <paper-icon-button icon="star" alt="favourite this!"></paper-icon-butt on>
280 </paper-icon-item> 289 </paper-icon-item>
281 </div> 290 </div>
282 </div> 291 </div>
283 292
284 </body> 293 </body>
285 </html> 294 </html>
OLDNEW
« no previous file with comments | « polymer_1.2.3/bower_components/paper-item/bower.json ('k') | polymer_1.2.3/bower_components/paper-item/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698