| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 |
| 3 <!-- |
| 4 @license |
| 5 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 6 This code may only be used under the BSD style license found at http://polymer
.github.io/LICENSE.txt |
| 7 The complete set of authors may be found at http://polymer.github.io/AUTHORS.t
xt |
| 8 The complete set of contributors may be found at http://polymer.github.io/CONT
RIBUTORS.txt |
| 9 Code distributed by Google as part of the polymer project is also |
| 10 subject to an additional IP rights grant found at http://polymer.github.io/PAT
ENTS.txt |
| 11 --> |
| 12 |
| 13 <html> |
| 14 <head> |
| 15 |
| 16 <meta charset="utf-8"> |
| 17 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initia
l-scale=1.0, user-scalable=yes"> |
| 18 |
| 19 <title>paper-styles demo</title> |
| 20 |
| 21 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
| 22 |
| 23 <link rel="import" href="../paper-styles.html"> |
| 24 <link rel="import" href="../demo-pages.html"> |
| 25 |
| 26 <style> |
| 27 |
| 28 .redlines { |
| 29 background: linear-gradient(0deg, transparent, transparent 3.5px, rgba(2
55,0,0,0.2) 3.5px, rgba(255,0,0,0.2) 4px); |
| 30 background-size: 100% 4px; |
| 31 } |
| 32 |
| 33 .paragraph { |
| 34 margin-bottom: 20px; |
| 35 } |
| 36 |
| 37 </style> |
| 38 |
| 39 </head> |
| 40 <body> |
| 41 |
| 42 <!-- FIXME remove when https://github.com/Polymer/polymer/issues/1415 is res
olved --> |
| 43 <dom-module id="x-demo"> |
| 44 |
| 45 <style> |
| 46 |
| 47 .paper-font-display4 { |
| 48 @apply(--paper-font-display4); |
| 49 } |
| 50 |
| 51 .paper-font-display3 { |
| 52 @apply(--paper-font-display3); |
| 53 } |
| 54 |
| 55 .paper-font-display2 { |
| 56 @apply(--paper-font-display2); |
| 57 } |
| 58 |
| 59 .paper-font-display1 { |
| 60 @apply(--paper-font-display1); |
| 61 } |
| 62 |
| 63 .paper-font-headline { |
| 64 @apply(--paper-font-headline); |
| 65 } |
| 66 |
| 67 .paper-font-title { |
| 68 @apply(--paper-font-title); |
| 69 } |
| 70 |
| 71 .paper-font-subhead { |
| 72 @apply(--paper-font-subhead); |
| 73 } |
| 74 |
| 75 .paper-font-body2 { |
| 76 @apply(--paper-font-body1); |
| 77 } |
| 78 |
| 79 .paper-font-body1 { |
| 80 @apply(--paper-font-body1); |
| 81 } |
| 82 |
| 83 .paper-font-caption { |
| 84 @apply(--paper-font-caption); |
| 85 } |
| 86 |
| 87 .paper-font-menu { |
| 88 @apply(--paper-font-menu); |
| 89 } |
| 90 |
| 91 .paper-font-button { |
| 92 @apply(--paper-font-button); |
| 93 } |
| 94 |
| 95 .mobile-app { |
| 96 max-width: 320px; |
| 97 } |
| 98 |
| 99 .toolbar { |
| 100 height: 144px; |
| 101 padding: 16px; |
| 102 |
| 103 background: var(--default-primary-color); |
| 104 color: var(--text-primary-color); |
| 105 @apply(--paper-font-display1); |
| 106 } |
| 107 |
| 108 .item, .disabled-item { |
| 109 position: relative; |
| 110 padding: 8px; |
| 111 border: 1px solid; |
| 112 border-color: var(--divider-color); |
| 113 border-top: 0; |
| 114 } |
| 115 |
| 116 .item .primary { |
| 117 color: var(--primary-text-color); |
| 118 |
| 119 @apply(--paper-font-body2); |
| 120 } |
| 121 |
| 122 .item .secondary { |
| 123 color: var(--secondary-text-color); |
| 124 |
| 125 @apply(--paper-font-body1); |
| 126 } |
| 127 |
| 128 .disabled-item { |
| 129 color: var(--disabled-text-color); |
| 130 |
| 131 @apply(--paper-font-body2); |
| 132 } |
| 133 |
| 134 .fab { |
| 135 position: absolute; |
| 136 box-sizing: border-box; |
| 137 padding: 8px; |
| 138 width: 56px; |
| 139 height: 56px; |
| 140 right: 16px; |
| 141 top: -28px; |
| 142 border-radius: 50%; |
| 143 text-align: center; |
| 144 |
| 145 background: var(--accent-color); |
| 146 color: var(--text-primary-color); |
| 147 @apply(--paper-font-display1); |
| 148 } |
| 149 |
| 150 .shadow { |
| 151 display: inline-block; |
| 152 padding: 8px; |
| 153 margin: 16px; |
| 154 height: 50px; |
| 155 width: 50px; |
| 156 } |
| 157 |
| 158 .shadow-2dp { |
| 159 @apply(--shadow-elevation-2dp); |
| 160 } |
| 161 |
| 162 .shadow-3dp { |
| 163 @apply(--shadow-elevation-3dp); |
| 164 } |
| 165 |
| 166 .shadow-4dp { |
| 167 @apply(--shadow-elevation-4dp); |
| 168 } |
| 169 |
| 170 .shadow-6dp { |
| 171 @apply(--shadow-elevation-6dp); |
| 172 } |
| 173 |
| 174 .shadow-8dp { |
| 175 @apply(--shadow-elevation-8dp); |
| 176 } |
| 177 |
| 178 .shadow-16dp { |
| 179 @apply(--shadow-elevation-16dp); |
| 180 } |
| 181 |
| 182 </style> |
| 183 |
| 184 <template> |
| 185 |
| 186 <h1>paper-styles</h1> |
| 187 |
| 188 <section id="default-theme"> |
| 189 <h2>default-theme.html</h2> |
| 190 |
| 191 <section class="mobile-app"> |
| 192 <div class="toolbar"> |
| 193 Title |
| 194 </div> |
| 195 <div class="item"> |
| 196 <div class="fab">+</div> |
| 197 <div class="primary">Primary text</div> |
| 198 <div class="secondary">Secondary text</div> |
| 199 </div> |
| 200 <div class="disabled-item"> |
| 201 Disabled |
| 202 </div> |
| 203 </section> |
| 204 </section> |
| 205 |
| 206 <section id="typography"> |
| 207 <h2>typography.html</h2> |
| 208 <p> |
| 209 Grumpy wizards make toxic brew for the evil Queen and Jack. |
| 210 </p> |
| 211 <section class="redlines paragraph"> |
| 212 <div class="paper-font-display4">Display 4</div> |
| 213 <div class="paper-font-display3">Display 3</div> |
| 214 <div class="paper-font-display2">Display 2</div> |
| 215 <div class="paper-font-display1">Display 1</div> |
| 216 <div class="paper-font-headline">Headline</div> |
| 217 <div class="paper-font-title">Title</div> |
| 218 <div class="paper-font-subhead">Subhead</div> |
| 219 <div class="paper-font-body2">Body 2</div> |
| 220 <div class="paper-font-body1">Body 1</div> |
| 221 <div class="paper-font-caption">Caption</div> |
| 222 <div class="paper-font-menu">Menu</div> |
| 223 <div class="paper-font-button">Button</div> |
| 224 </section> |
| 225 |
| 226 <h3>Paragraphs</h3> |
| 227 |
| 228 <h4>body2</h4> |
| 229 <section class="paper-font-body2 redlines"> |
| 230 <p> |
| 231 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi |
| 232 tincidunt dui sit amet mi auctor, ac gravida magna aliquam. Fusce
quis |
| 233 purus elementum, tempus nisi vel, volutpat nulla. Vestibulum molli
s |
| 234 dictum tellus, vulputate porttitor arcu. Curabitur imperdiet risus
id |
| 235 egestas accumsan. Donec lectus felis, dignissim id iaculis sit ame
t, |
| 236 faucibus in leo. |
| 237 </p> |
| 238 <p> |
| 239 Mauris id urna ac ante ultrices commodo a imperdiet elit. Vivamus |
| 240 interdum neque magna, eget dapibus est auctor et. Donec accumsan |
| 241 libero nec augue scelerisque, ac egestas ante tincidunt. Proin |
| 242 sollicitudin, mi eget sagittis mollis, arcu orci scelerisque turpi
s, a |
| 243 sollicitudin tellus quam non sapien. |
| 244 </p> |
| 245 </section> |
| 246 |
| 247 <h4>body1</h4> |
| 248 <section class="paper-font-body1 redlines"> |
| 249 <p> |
| 250 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi |
| 251 tincidunt dui sit amet mi auctor, ac gravida magna aliquam. Fusce
quis |
| 252 purus elementum, tempus nisi vel, volutpat nulla. Vestibulum molli
s |
| 253 dictum tellus, vulputate porttitor arcu. Curabitur imperdiet risus
id |
| 254 egestas accumsan. Donec lectus felis, dignissim id iaculis sit ame
t, |
| 255 faucibus in leo. |
| 256 </p> |
| 257 <p> |
| 258 Mauris id urna ac ante ultrices commodo a imperdiet elit. Vivamus |
| 259 interdum neque magna, eget dapibus est auctor et. Donec accumsan |
| 260 libero nec augue scelerisque, ac egestas ante tincidunt. Proin |
| 261 sollicitudin, mi eget sagittis mollis, arcu orci scelerisque turpi
s, a |
| 262 sollicitudin tellus quam non sapien. |
| 263 </p> |
| 264 </section> |
| 265 </section> |
| 266 |
| 267 <section id="shadow"> |
| 268 <h2>shadow.html</h2> |
| 269 <div class="shadow shadow-2dp">2dp</div> |
| 270 <div class="shadow shadow-3dp">3dp</div> |
| 271 <div class="shadow shadow-4dp">4dp</div> |
| 272 <div class="shadow shadow-6dp">6dp</div> |
| 273 <div class="shadow shadow-8dp">8dp</div> |
| 274 <div class="shadow shadow-16dp">16dp</div> |
| 275 </section> |
| 276 |
| 277 </template> |
| 278 </dom-module> |
| 279 |
| 280 <script> |
| 281 document.addEventListener('HTMLImportsLoaded', function() { |
| 282 Polymer({ |
| 283 is: 'x-demo', |
| 284 enableCustomStyleProperties: true |
| 285 }); |
| 286 }); |
| 287 </script> |
| 288 |
| 289 <x-demo></x-demo> |
| 290 |
| 291 <section id="demo-page"> |
| 292 <h2>demo-pages.html</h2> |
| 293 |
| 294 <h3>Horizontal sections</h3> |
| 295 <div class="horizontal-section-container"> |
| 296 <div> |
| 297 <h4>Column 1</h4> |
| 298 <div class="horizontal-section"> |
| 299 <div>Oxygen</div> |
| 300 <div>Carbon</div> |
| 301 <div>Hydrogen</div> |
| 302 <div>Nitrogen</div> |
| 303 <div>Calcium</div> |
| 304 </div> |
| 305 </div> |
| 306 |
| 307 <div> |
| 308 <h4>Column 2</h4> |
| 309 <div class="horizontal-section"> |
| 310 <div>Oxygen</div> |
| 311 <div>Carbon</div> |
| 312 <div>Hydrogen</div> |
| 313 <div>Nitrogen</div> |
| 314 <div>Calcium</div> |
| 315 </div> |
| 316 </div> |
| 317 |
| 318 <div> |
| 319 <h4>Column 3</h4> |
| 320 <div class="horizontal-section"> |
| 321 <div>Oxygen</div> |
| 322 <div>Carbon</div> |
| 323 <div>Hydrogen</div> |
| 324 <div>Nitrogen</div> |
| 325 <div>Calcium</div> |
| 326 </div> |
| 327 </div> |
| 328 </div> |
| 329 |
| 330 <h3>Vertical sections</h3> |
| 331 <div class="vertical-section-container"> |
| 332 <div> |
| 333 <h4>Section 1</h4> |
| 334 <div class="vertical-section"> |
| 335 <div>Oxygen</div> |
| 336 <div>Carbon</div> |
| 337 <div>Hydrogen</div> |
| 338 <div>Nitrogen</div> |
| 339 <div>Calcium</div> |
| 340 </div> |
| 341 </div> |
| 342 </div> |
| 343 |
| 344 <div class="vertical-section-container centered"> |
| 345 <h4>Section 2 (centered)</h4> |
| 346 <div class="vertical-section"> |
| 347 <div>Oxygen</div> |
| 348 <div>Carbon</div> |
| 349 <div>Hydrogen</div> |
| 350 <div>Nitrogen</div> |
| 351 <div>Calcium</div> |
| 352 </div> |
| 353 </div> |
| 354 |
| 355 </section> |
| 356 |
| 357 </body> |
| 358 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1205703007:
Add polymer 1.0 to npm_modules (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master