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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: polymer_1.0.4/bower_components/paper-item/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-item/bower.json ('k') | polymer_1.0.4/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
(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
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 <title>paper-item demo</title>
19
20 <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
21
22 <link rel="import" href="../../iron-icon/iron-icon.html">
23 <link rel="import" href="../../iron-icons/iron-icons.html">
24 <link rel="import" href="../../iron-icons/communication-icons.html">
25 <link rel="import" href="../../paper-checkbox/paper-checkbox.html">
26 <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-item.html">
29 <link rel="import" href="../paper-item-body.html">
30 <link rel="import" href="../../paper-styles/paper-styles.html">
31 <link rel="import" href="../../paper-styles/demo-pages.html">
32
33 <style is="custom-style">
34 .list {
35 padding-top: 12px;
36 background-color: white;
37 display: inline-block;
38 width: 240px;
39 height: 228px;
40 margin: 12px;
41 @apply(--shadow-elevation-2dp);
42 }
43
44 .short {
45 padding-top: 12px;
46 height: 216px;
47 }
48
49 h4 {
50 margin-left: 24px;
51 }
52
53 .avatar {
54 display: inline-block;
55 width: 40px;
56 height: 40px;
57 border-radius: 50%;
58 overflow: hidden;
59 background: #ccc;
60 }
61
62 .blue {
63 background-color: var(--paper-light-blue-300);
64 }
65 .red {
66 background-color: var(--paper-red-300);
67 }
68 .orange {
69 background-color: var(--paper-amber-300);
70 }
71 .green {
72 background-color: var(--paper-green-300);
73 }
74 </style>
75 </head>
76 <body>
77 <div class="layout wrap inline center-center">
78 <div>
79 <h4>Single line items</h4>
80 <div class="list short">
81 <paper-item>Inbox</paper-item>
82 <paper-item>Starred</paper-item>
83 <paper-item>Sent mail</paper-item>
84 <paper-item>Drafts</paper-item>
85 </div>
86 </div>
87
88 <div>
89 <h4>Icon with text</h4>
90 <div class="list short">
91 <paper-icon-item>
92 <iron-icon icon="inbox" item-icon></iron-icon> Inbox
93 </paper-icon-item>
94 <paper-icon-item>
95 <iron-icon icon="send" item-icon></iron-icon> Outbox
96 </paper-icon-item>
97 <paper-icon-item>
98 <iron-icon icon="delete" item-icon></iron-icon> Trash
99 </paper-icon-item>
100 <paper-icon-item>
101 <iron-icon icon="report" item-icon></iron-icon> Spam
102 </paper-icon-item>
103 </div>
104 </div>
105
106 <div>
107 <h4>Avatar with text</h4>
108 <div class="list short">
109 <paper-icon-item>
110 <div class="avatar blue" item-icon></div> Alphonso Engelking
111 </paper-icon-item>
112 <paper-icon-item>
113 <div class="avatar red" item-icon></div> Andrews Boyd
114 </paper-icon-item>
115 <paper-icon-item>
116 <div class="avatar orange" item-icon></div> Angela Decker
117 </paper-icon-item>
118 <paper-icon-item>
119 <div class="avatar green" item-icon></div> Lorem Ipsum
120 </paper-icon-item>
121 </div>
122 </div>
123
124 <div>
125 <h4>Avatar with text and icon</h4>
126 <div class="list short">
127 <paper-icon-item>
128 <div class="avatar red" item-icon></div>
129 <div class="flex">Alphonso</div>
130 <iron-icon icon="communication:messenger"></iron-icon>
131 </paper-icon-item>
132 <paper-icon-item>
133 <div class="avatar orange" item-icon></div>
134 <div class="flex">Andrews</div>
135 <iron-icon icon="communication:messenger"></iron-icon>
136 </paper-icon-item>
137 <paper-icon-item>
138 <div class="avatar green" item-icon></div>
139 <div class="flex">Angela</div>
140 <iron-icon icon="communication:messenger"></iron-icon>
141 </paper-icon-item>
142 <paper-icon-item>
143 <div class="avatar blue" item-icon></div>
144 <div class="flex">Lorem</div>
145 <iron-icon icon="communication:messenger"></iron-icon>
146 </paper-icon-item>
147 </div>
148 </div>
149
150 <div>
151 <h4>Avatar with text and control</h4>
152 <div class="list short">
153 <paper-icon-item>
154 <div class="avatar orange" item-icon></div>
155 <div class="flex">Alphonso</div>
156 <paper-checkbox></paper-checkbox>
157 </paper-icon-item>
158 <paper-icon-item>
159 <div class="avatar green" item-icon></div>
160 <div class="flex">Andrews</div>
161 <paper-checkbox checked></paper-checkbox>
162 </paper-icon-item>
163 <paper-icon-item>
164 <div class="avatar blue" item-icon></div>
165 <div class="flex">Angela</div>
166 <paper-checkbox></paper-checkbox>
167 </paper-icon-item>
168 <paper-icon-item>
169 <div class="avatar red" item-icon></div>
170 <div class="flex">Lorem</div>
171 <paper-checkbox></paper-checkbox>
172 </paper-icon-item>
173 </div>
174 </div>
175
176 <div>
177 <h4>Control with text and icon</h4>
178 <div class="list short">
179 <paper-icon-item>
180 <paper-checkbox item-icon></paper-checkbox>
181 <div class="flex">Alphonso</div>
182 <iron-icon icon="communication:messenger"></iron-icon>
183 </paper-icon-item>
184 <paper-icon-item>
185 <paper-checkbox checked item-icon></paper-checkbox>
186 <div class="flex">Andrews</div>
187 <iron-icon icon="communication:messenger"></iron-icon>
188 </paper-icon-item>
189 <paper-icon-item>
190 <paper-checkbox item-icon></paper-checkbox>
191 <div class="flex">Angela</div>
192 <iron-icon icon="communication:messenger"></iron-icon>
193 </paper-icon-item>
194 <paper-icon-item>
195 <paper-checkbox item-icon></paper-checkbox>
196 <div class="flex">Lorem</div>
197 <iron-icon icon="communication:messenger"></iron-icon>
198 </paper-icon-item>
199 </div>
200 </div>
201
202 <div>
203 <h4>Two-line items</h4>
204 <div class="list">
205 <paper-item>
206 <paper-item-body two-line class="layout vertical">
207 <div>Profile Photo</div>
208 <div secondary>Change your Google+ profile photo</div>
209 </paper-item-body>
210 </paper-item>
211 <paper-item>
212 <paper-item-body two-line>
213 <div>Show your status</div>
214 <div secondary>Your status is visible to everyone you use with</div>
215 </paper-item-body>
216 </paper-item>
217 <paper-item>
218 <paper-item-body two-line class="layout vertical">
219 <div>Settings</div>
220 <div secondary>Change your account settings</div>
221 </paper-item-body>
222 </paper-item>
223 </div>
224 </div>
225
226 <div>
227 <h4>Icon with two-line text</h4>
228 <div class="list">
229 <paper-icon-item>
230 <div class="avatar green" item-icon></div>
231 <paper-item-body two-line>
232 <div>Alphonso Engelking</div>
233 <div secondary>Change photo</div>
234 </paper-item-body>
235 </paper-icon-item>
236 <paper-icon-item>
237 <iron-icon icon="communication:phone" item-icon></iron-icon>
238 <paper-item-body two-line>
239 <div>(650) 555-1234</div>
240 <div secondary>Mobile</div>
241 </paper-item-body>
242 </paper-icon-item>
243 <paper-icon-item>
244 <iron-icon icon="communication:email" item-icon></iron-icon>
245 <paper-item-body two-line>
246 <div>alphonso@example.com</div>
247 <div secondary>Personal</div>
248 </paper-item-body>
249 </paper-icon-item>
250 <paper-icon-item>
251 </div>
252 </div>
253
254 <div>
255 <h4>Avatar with text and icon</h4>
256 <div class="list">
257 <paper-icon-item>
258 <div class="avatar blue" item-icon></div>
259 <paper-item-body two-line>
260 <div>Photos</div>
261 <div secondary>Jan 9, 2014</div>
262 </paper-item-body>
263 <iron-icon icon="star"></iron-icon>
264 </paper-icon-item>
265 <paper-icon-item>
266 <div class="avatar red" item-icon></div>
267 <paper-item-body two-line>
268 <div>Recipes</div>
269 <div secondary>Jan 17, 2014</div>
270 </paper-item-body>
271 <iron-icon icon="star"></iron-icon>
272 </paper-icon-item>
273 <paper-icon-item>
274 <div class="avatar orange" item-icon></div>
275 <paper-item-body two-line>
276 <div>Work</div>
277 <div secondary>Jan 28, 2014</div>
278 </paper-item-body>
279 <iron-icon icon="star"></iron-icon>
280 </paper-icon-item>
281 </div>
282 </div>
283
284 </body>
285 </html>
OLDNEW
« no previous file with comments | « polymer_1.0.4/bower_components/paper-item/bower.json ('k') | polymer_1.0.4/bower_components/paper-item/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698