OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 6 Code distributed by Google as part of the polymer project is also |
| 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 8 --> |
| 9 |
| 10 <style> |
| 11 |
| 12 body { |
| 13 margin: 0; |
| 14 } |
| 15 |
| 16 </style> |
| 17 |
| 18 <div hidden><!-- |
| 19 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 20 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 21 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 22 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 23 Code distributed by Google as part of the polymer project is also |
| 24 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 25 --> |
| 26 |
| 27 <!-- |
| 28 The `core-layout` element is a helper for using |
| 29 [CSS3 Flexible Boxes](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Fle
xible_boxes). |
| 30 A `core-layout` element enables a set of css selectors for easy flexbox styling. |
| 31 |
| 32 Example: |
| 33 |
| 34 <core-layout> |
| 35 <div>Left</div> |
| 36 <div core-flex>Main</div> |
| 37 <div>Right</div> |
| 38 </core-layout> |
| 39 |
| 40 Renders something like this: |
| 41 |
| 42 --------------------------------- |
| 43 |-------------------------------| |
| 44 ||Left| Main |Right|| |
| 45 |-------------------------------| |
| 46 --------------------------------- |
| 47 |
| 48 __Note__: the `core-layout` element applies layout to itself if it has children
or to |
| 49 its parent element, if it does not. This feature allows you to apply layout to a
n |
| 50 arbitrary parent. |
| 51 |
| 52 Elements can layout horizontally, such that their items stack |
| 53 left to right or vertically, such that their items stack top to bottom. The |
| 54 default is horizontal. Set `vertical` to true to layout the elements vertically. |
| 55 |
| 56 To make a particular child _flexible_, use the `core-flex` attribute. |
| 57 You can control flexibility from 1 to 3 by giving the attribute a |
| 58 corresponding value. For other values, apply the css manually. |
| 59 |
| 60 It's common in flexbox parlance to hear the terms _main axis_ and _cross axis_. |
| 61 For a horizontal layout the main axis is horizontal and the cross axis is vertic
al. |
| 62 These are exchanged for a vertical layout. |
| 63 |
| 64 To effect alignment in the main axis, use the `justify` attribute. The |
| 65 supported values are `start`, `center`, `end`, and `between`. |
| 66 |
| 67 To effect alignment in the cross axis, use the `align` attribute. The |
| 68 supported values are `start`, `center`, and `end`. |
| 69 |
| 70 Note, it's also possible to include the `core-layout.css` stylesheet separate |
| 71 from the `core-layout` element. Including the element automatically includes |
| 72 the stylesheet. To use the stylesheet independent of the element, css classes |
| 73 should be used of the following form: `core-h`, `core-v`, `core-flex`, |
| 74 `core-justify-start`, and `core-align-start`. |
| 75 |
| 76 The `core-layout` and css file also provide a few commonly needed layout |
| 77 behaviors. Apply the `core-fit` class to fit an element to its container. To |
| 78 ensure a container will contain an element inside it with the `core-fit` class |
| 79 give it the `core-relative` class. |
| 80 |
| 81 More examples: |
| 82 |
| 83 <core-layout vertical> |
| 84 |
| 85 <div>Header</div> |
| 86 <div core-flex>Body</div> |
| 87 <div>Footer</div> |
| 88 |
| 89 </core-layout> |
| 90 |
| 91 ---------- |
| 92 ||------|| |
| 93 ||Header|| |
| 94 ||------|| |
| 95 ||Body || |
| 96 || || |
| 97 || || |
| 98 || || |
| 99 || || |
| 100 || || |
| 101 || || |
| 102 ||------|| |
| 103 ||Footer|| |
| 104 ||------|| |
| 105 ---------- |
| 106 |
| 107 Justify: |
| 108 |
| 109 <core-layout justify="end"> |
| 110 <div core-flex>Left</div> |
| 111 <div>Main</div> |
| 112 <div>Right</div> |
| 113 </core-layout> |
| 114 |
| 115 --------------------------------- |
| 116 |-------------------------------| |
| 117 || Left|Main|Right|| |
| 118 |-------------------------------| |
| 119 --------------------------------- |
| 120 |
| 121 Align: |
| 122 |
| 123 <core-layout align="center"> |
| 124 <div>Left</div> |
| 125 <div core-flex>Main</div> |
| 126 <div>Right</div> |
| 127 </core-layout> |
| 128 |
| 129 --------------------------------- |
| 130 |-------------------------------| |
| 131 || | | || |
| 132 ||Left| Main |Right|| |
| 133 || | | || |
| 134 |-------------------------------| |
| 135 --------------------------------- |
| 136 |
| 137 |
| 138 To layout contents of a parent element, place a `core-layout` inside of it: |
| 139 |
| 140 <some-element> |
| 141 <core-layout></core-layout> |
| 142 <div>Left</div> |
| 143 <div core-flex>Main</div> |
| 144 <div>Right</div> |
| 145 <some-element> |
| 146 |
| 147 --------------------------------- |
| 148 |-------------------------------| |
| 149 ||Left| Main |Right|| |
| 150 |-------------------------------| |
| 151 --------------------------------- |
| 152 |
| 153 You may also use the `core-layout` stylesheet directly: |
| 154 |
| 155 <link rel="stylesheet" href="../core-layout/core-layout.css"> |
| 156 <div class="core-h core-justify-end"> |
| 157 <div core-flex>Left</div> |
| 158 <div>Main</div> |
| 159 <div>Right</div> |
| 160 </div> |
| 161 |
| 162 --------------------------------- |
| 163 |-------------------------------| |
| 164 || Left|Main|Right|| |
| 165 |-------------------------------| |
| 166 --------------------------------- |
| 167 |
| 168 @group Polymer Core Elements |
| 169 @element core-layout |
| 170 |
| 171 --> |
| 172 <link rel="import" href="../polymer/polymer.html"> |
| 173 |
| 174 <polymer-element name="core-layout" attributes="vertical justify align isContain
er reverse" assetpath="../core-layout/"> |
| 175 |
| 176 <template> |
| 177 |
| 178 <style no-shim="">/* |
| 179 Copyright 2013 The Polymer Authors. All rights reserved. |
| 180 Use of this source code is governed by a BSD-style |
| 181 license that can be found in the LICENSE file. |
| 182 */ |
| 183 |
| 184 .core-h, .core-v { |
| 185 display: -webkit-box !important; |
| 186 display: -ms-flexbox !important; |
| 187 display: -moz-flex !important; |
| 188 display: -webkit-flex !important; |
| 189 display: flex !important; |
| 190 } |
| 191 |
| 192 .core-h { |
| 193 -webkit-box-orient: horizontal; |
| 194 -ms-flex-direction: row; |
| 195 -moz-flex-direction: row; |
| 196 -webkit-flex-direction: row; |
| 197 flex-direction: row; |
| 198 } |
| 199 |
| 200 .core-h.core-reverse { |
| 201 -webkit-box-direction: reverse; |
| 202 -ms-flex-direction: row-reverse; |
| 203 -moz-flex-direction: row-reverse; |
| 204 -webkit-flex-direction: row-reverse; |
| 205 flex-direction: row-reverse; |
| 206 } |
| 207 |
| 208 .core-v { |
| 209 -webkit-box-orient: vertical; |
| 210 -ms-flex-direction: column; |
| 211 -moz-flex-direction: column; |
| 212 -webkit-flex-direction: column; |
| 213 flex-direction: column; |
| 214 } |
| 215 |
| 216 .core-v.core-reverse { |
| 217 -webkit-box-direction: reverse; |
| 218 -ms-flex-direction: column-reverse; |
| 219 -moz-flex-direction: column-reverse; |
| 220 -webkit-flex-direction: column-reverse; |
| 221 flex-direction: column-reverse; |
| 222 } |
| 223 |
| 224 .core-relative { |
| 225 position: relative; |
| 226 } |
| 227 |
| 228 .core-fit { |
| 229 position: absolute; |
| 230 top: 0; |
| 231 left: 0; |
| 232 height: 100%; |
| 233 width: 100%; |
| 234 } |
| 235 |
| 236 body.core-fit { |
| 237 margin: 0; |
| 238 } |
| 239 |
| 240 .core-flex, [core-flex] { |
| 241 -webkit-box-flex: 1; |
| 242 -ms-flex: 1; |
| 243 -moz-flex: 1; |
| 244 -webkit-flex: 1; |
| 245 flex: 1; |
| 246 } |
| 247 |
| 248 .core-flex-auto, [core-flex-auto] { |
| 249 -webkit-box-flex: 1; |
| 250 -ms-flex: 1 1 auto; |
| 251 -moz-flex: 1 1 auto; |
| 252 -webkit-flex: 1 1 auto; |
| 253 flex: 1 1 auto; |
| 254 } |
| 255 |
| 256 .core-flex-none, [core-flex-none] { |
| 257 -webkit-box-flex: none; |
| 258 -ms-flex: none; |
| 259 -moz-flex: none; |
| 260 -webkit-flex: none; |
| 261 flex: none; |
| 262 } |
| 263 |
| 264 .core-flex1, [core-flex=1] { |
| 265 -webkit-box-flex: 1; |
| 266 -ms-flex: 1; |
| 267 -moz-flex: 1; |
| 268 -webkit-flex: 1; |
| 269 flex: 1; |
| 270 } |
| 271 |
| 272 .core-flex2, [core-flex=2] { |
| 273 -webkit-box-flex: 2; |
| 274 -ms-flex: 2; |
| 275 -moz-flex: 2; |
| 276 -webkit-flex: 2; |
| 277 flex: 2; |
| 278 } |
| 279 |
| 280 .core-flex3, [core-flex=3] { |
| 281 -webkit-box-flex: 3; |
| 282 -ms-flex: 3; |
| 283 -moz-flex: 3; |
| 284 -webkit-flex: 3; |
| 285 flex: 3; |
| 286 } |
| 287 |
| 288 /* distributed elements */ |
| 289 ::content > .core-flex, ::content > [core-flex] { |
| 290 -webkit-box-flex: 1; |
| 291 -ms-flex: 1; |
| 292 -moz-flex: 1; |
| 293 -webkit-flex: 1; |
| 294 flex: 1; |
| 295 } |
| 296 |
| 297 ::content > .core-flex-auto, ::content > [core-flex-auto] { |
| 298 -webkit-box-flex: 1; |
| 299 -ms-flex: 1 1 auto; |
| 300 -moz-flex: 1 1 auto; |
| 301 -webkit-flex: 1 1 auto; |
| 302 flex: 1 1 auto; |
| 303 } |
| 304 |
| 305 ::content > .core-flex-none, ::content > [core-flex-none] { |
| 306 -webkit-box-flex: none; |
| 307 -ms-flex: none; |
| 308 -moz-flex: none; |
| 309 -webkit-flex: none; |
| 310 flex: none; |
| 311 } |
| 312 |
| 313 ::content > .core-flex1, ::content > [core-flex=1] { |
| 314 -webkit-box-flex: 1; |
| 315 -ms-flex: 1; |
| 316 -moz-flex: 1; |
| 317 -webkit-flex: 1; |
| 318 flex: 1; |
| 319 } |
| 320 |
| 321 ::content > .core-flex2, ::content > [core-flex=2] { |
| 322 -webkit-box-flex: 2; |
| 323 -ms-flex: 2; |
| 324 -moz-flex: 2; |
| 325 -webkit-flex: 2; |
| 326 flex: 2; |
| 327 } |
| 328 |
| 329 ::content > .core-flex3, ::content > [core-flex=3] { |
| 330 -webkit-box-flex: 3; |
| 331 -ms-flex: 3; |
| 332 -moz-flex: 3; |
| 333 -webkit-flex: 3; |
| 334 flex: 3; |
| 335 } |
| 336 |
| 337 /* alignment in main axis */ |
| 338 .core-justify-start { |
| 339 -webkit-box-pack: start; |
| 340 -ms-flex-pack: start; |
| 341 -moz-justify-content: flex-start; |
| 342 -webkit-justify-content: flex-start; |
| 343 justify-content: flex-start; |
| 344 } |
| 345 |
| 346 .core-justify-center { |
| 347 -webkit-box-pack: center; |
| 348 -ms-flex-pack: center; |
| 349 -moz-justify-content: center; |
| 350 -webkit-justify-content: center; |
| 351 justify-content: center; |
| 352 } |
| 353 |
| 354 .core-justify-end { |
| 355 -webkit-box-pack: end; |
| 356 -ms-flex-pack: end; |
| 357 -moz-justify-content: flex-end; |
| 358 -webkit-justify-content: flex-end; |
| 359 justify-content: flex-end; |
| 360 } |
| 361 |
| 362 .core-justify-between { |
| 363 -webkit-box-pack: justify; |
| 364 -ms-flex-pack: justify; |
| 365 -moz-justify-content: space-between; |
| 366 -webkit-justify-content: space-between; |
| 367 justify-content: space-between; |
| 368 } |
| 369 |
| 370 /* alignment in cross axis */ |
| 371 .core-align-start { |
| 372 -webkit-box-align: start; |
| 373 -ms-flex-align: start; |
| 374 -moz-align-items: flex-start; |
| 375 -webkit-align-items: flex-start; |
| 376 align-items: flex-start; |
| 377 } |
| 378 |
| 379 .core-align-center { |
| 380 -webkit-box-align: center; |
| 381 -ms-flex-align: center; |
| 382 -moz-align-items: center; |
| 383 -webkit-align-items: center; |
| 384 align-items: center; |
| 385 } |
| 386 |
| 387 .core-align-end { |
| 388 -webkit-box-align: end; |
| 389 -ms-flex-align: end; |
| 390 -moz-align-items: flex-end; |
| 391 -webkit-align-items: flex-end; |
| 392 align-items: flex-end; |
| 393 } |
| 394 </style> |
| 395 <style no-shim="">/* |
| 396 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 397 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 398 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 399 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 400 Code distributed by Google as part of the polymer project is also |
| 401 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 402 */ |
| 403 |
| 404 :host { |
| 405 display: -webkit-box !important; |
| 406 display: -ms-flexbox !important; |
| 407 display: -moz-flex !important; |
| 408 display: -webkit-flex !important; |
| 409 display: flex !important; |
| 410 } |
| 411 |
| 412 :host(.core-h) { |
| 413 -webkit-box-orient: horizontal; |
| 414 -ms-flex-direction: row; |
| 415 -moz-flex-direction: row; |
| 416 -webkit-flex-direction: row; |
| 417 flex-direction: row; |
| 418 } |
| 419 |
| 420 :host(.core-v) { |
| 421 -webkit-box-orient: vertical; |
| 422 -ms-flex-direction: column; |
| 423 -moz-flex-direction: column; |
| 424 -webkit-flex-direction: column; |
| 425 flex-direction: column; |
| 426 } |
| 427 |
| 428 :host(.core-h.core-reverse) { |
| 429 -webkit-box-direction: reverse; |
| 430 -ms-flex-direction: row-reverse; |
| 431 -moz-flex-direction: row-reverse; |
| 432 -webkit-flex-direction: row-reverse; |
| 433 flex-direction: row-reverse; |
| 434 } |
| 435 |
| 436 :host(.core-v.core-reverse) { |
| 437 -webkit-box-direction: reverse; |
| 438 -ms-flex-direction: column-reverse; |
| 439 -moz-flex-direction: column-reverse; |
| 440 -webkit-flex-direction: column-reverse; |
| 441 flex-direction: column-reverse; |
| 442 } |
| 443 |
| 444 /* alignment in main axis */ |
| 445 :host(.core-justify-start) { |
| 446 -webkit-box-pack: start; |
| 447 -ms-flex-pack: start; |
| 448 -moz-justify-content: flex-start; |
| 449 -webkit-justify-content: flex-start; |
| 450 justify-content: flex-start; |
| 451 } |
| 452 |
| 453 :host(.core-justify-center) { |
| 454 -webkit-box-pack: center; |
| 455 -ms-flex-pack: center; |
| 456 -moz-justify-content: center; |
| 457 -webkit-justify-content: center; |
| 458 justify-content: center; |
| 459 } |
| 460 |
| 461 :host(.core-justify-end) { |
| 462 -webkit-box-pack: end; |
| 463 -ms-flex-pack: end; |
| 464 -moz-justify-content: flex-end; |
| 465 -webkit-justify-content: flex-end; |
| 466 justify-content: flex-end; |
| 467 } |
| 468 |
| 469 :host(.core-justify-between) { |
| 470 -webkit-box-pack: justify; |
| 471 -ms-flex-pack: justify; |
| 472 -moz-justify-content: space-between; |
| 473 -webkit-justify-content: space-between; |
| 474 justify-content: space-between; |
| 475 } |
| 476 |
| 477 /* alignment in cross axis */ |
| 478 :host(.core-align-start) { |
| 479 -webkit-box-align: start; |
| 480 -ms-flex-align: start; |
| 481 -moz-align-items: flex-start; |
| 482 -webkit-align-items: flex-start; |
| 483 align-items: flex-start; |
| 484 } |
| 485 |
| 486 :host(.core-align-center) { |
| 487 -webkit-box-align: center; |
| 488 -ms-flex-align: center; |
| 489 -moz-align-items: center; |
| 490 -webkit-align-items: center; |
| 491 align-items: center; |
| 492 } |
| 493 |
| 494 :host(.core-align-end) { |
| 495 -webkit-box-align: end; |
| 496 -ms-flex-align: end; |
| 497 -moz-align-items: flex-end; |
| 498 -webkit-align-items: flex-end; |
| 499 align-items: flex-end; |
| 500 } |
| 501 </style> |
| 502 |
| 503 </template> |
| 504 |
| 505 |
| 506 |
| 507 </polymer-element> |
| 508 </div> |
| 509 <div hidden> |
| 510 <!-- |
| 511 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 512 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 513 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 514 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 515 Code distributed by Google as part of the polymer project is also |
| 516 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 517 --> |
| 518 <!-- |
| 519 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 520 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 521 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 522 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 523 Code distributed by Google as part of the polymer project is also |
| 524 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 525 --> |
| 526 |
| 527 <!-- |
| 528 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 529 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 530 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 531 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 532 Code distributed by Google as part of the polymer project is also |
| 533 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 534 --> |
| 535 |
| 536 <!-- |
| 537 /** |
| 538 * @group Polymer Core Elements |
| 539 * |
| 540 * The `core-iconset-svg` element allows users to define their own icon sets |
| 541 * that contain svg icons. The svg icon elements should be children of the |
| 542 * `core-iconset-svg` element. Multiple icons should be given distinct id's. |
| 543 * |
| 544 * Using svg elements to create icons has a few advantages over traditional |
| 545 * bitmap graphics like jpg or png. Icons that use svg are vector based so they |
| 546 * are resolution independent and should look good on any device. They are |
| 547 * stylable via css. Icons can be themed, colorized, and even animated. |
| 548 * |
| 549 * Example: |
| 550 * |
| 551 * <core-iconset-svg id="my-svg-icons" iconSize="24"> |
| 552 * <svg> |
| 553 * <defs> |
| 554 * <g id="shape"> |
| 555 * <rect x="50" y="50" width="50" height="50" /> |
| 556 * <circle cx="50" cy="50" r="50" /> |
| 557 * </g> |
| 558 * </defs> |
| 559 * </svg> |
| 560 * </core-iconset-svg> |
| 561 * |
| 562 * This will automatically register the icon set "my-svg-icons" to the iconset |
| 563 * database. To use these icons from within another element, make a |
| 564 * `core-iconset` element and call the `byId` method |
| 565 * to retrieve a given iconset. To apply a particular icon inside an |
| 566 * element use the `applyIcon` method. For example: |
| 567 * |
| 568 * iconset.applyIcon(iconNode, 'car'); |
| 569 * |
| 570 * @element core-iconset-svg |
| 571 * @extends core-meta |
| 572 * @homepage github.io |
| 573 */ |
| 574 --> |
| 575 |
| 576 <!-- |
| 577 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 578 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 579 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 580 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 581 Code distributed by Google as part of the polymer project is also |
| 582 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 583 --> |
| 584 |
| 585 <!-- |
| 586 /** |
| 587 * @group Polymer Core Elements |
| 588 * |
| 589 * The `core-iconset` element allows users to define their own icon sets. |
| 590 * The `src` property specifies the url of the icon image. Multiple icons may |
| 591 * be included in this image and they may be organized into rows. |
| 592 * The `icons` property is a space separated list of names corresponding to the |
| 593 * icons. The names must be ordered as the icons are ordered in the icon image. |
| 594 * Icons are expected to be square and are the size specified by the `iconSize` |
| 595 * property. The `width` property corresponds to the width of the icon image |
| 596 * and must be specified if icons are arranged into multiple rows in the image. |
| 597 * |
| 598 * All `core-iconset` elements are available for use by other `core-iconset` |
| 599 * elements via a database keyed by id. Typically, an element author that wants |
| 600 * to support a set of custom icons uses a `core-iconset` to retrieve |
| 601 * and use another, user-defined iconset. |
| 602 * |
| 603 * Example: |
| 604 * |
| 605 * <core-iconset id="my-icons" src="my-icons.png" width="96" iconSize="24" |
| 606 * icons="location place starta stopb bus car train walk"> |
| 607 * </core-iconset> |
| 608 * |
| 609 * This will automatically register the icon set "my-icons" to the iconset |
| 610 * database. To use these icons from within another element, make a |
| 611 * `core-iconset` element and call the `byId` method to retrieve a |
| 612 * given iconset. To apply a particular icon to an element, use the |
| 613 * `applyIcon` method. For example: |
| 614 * |
| 615 * iconset.applyIcon(iconNode, 'car'); |
| 616 * |
| 617 * Themed icon sets are also supported. The `core-iconset` can contain child |
| 618 * `property` elements that specify a theme with an offsetX and offsetY of the |
| 619 * theme within the icon resource. For example. |
| 620 * |
| 621 * <core-iconset id="my-icons" src="my-icons.png" width="96" iconSize="24" |
| 622 * icons="location place starta stopb bus car train walk"> |
| 623 * <property theme="special" offsetX="256" offsetY="24"></property> |
| 624 * </core-iconset> |
| 625 * |
| 626 * Then a themed icon can be applied like this: |
| 627 * |
| 628 * iconset.applyIcon(iconNode, 'car', 'special'); |
| 629 * |
| 630 * @element core-iconset |
| 631 * @extends core-meta |
| 632 * @homepage github.io |
| 633 */ |
| 634 --> |
| 635 |
| 636 <!-- |
| 637 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 638 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 639 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 640 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 641 Code distributed by Google as part of the polymer project is also |
| 642 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 643 --> |
| 644 |
| 645 <!-- |
| 646 `core-meta` provides a method of constructing a self-organizing database. |
| 647 It is useful to collate element meta-data for things like catalogs and for |
| 648 designer. |
| 649 |
| 650 Example, an element folder has a `metadata.html` file in it, that contains a |
| 651 `core-meta`, something like this: |
| 652 |
| 653 <core-meta id="my-element" label="My Element"> |
| 654 <property name="color" value="blue"></property> |
| 655 </core-meta> |
| 656 |
| 657 An application can import as many of these files as it wants, and then use |
| 658 `core-meta` again to access the collected data. |
| 659 |
| 660 <script> |
| 661 var meta = document.createElement('core-meta'); |
| 662 console.log(meta.list); // dump a list of all meta-data elements that have
been created |
| 663 </script> |
| 664 |
| 665 Use `byId(id)` to retrive a specific core-meta. |
| 666 |
| 667 <script> |
| 668 var meta = document.createElement('core-meta'); |
| 669 console.log(meta.byId('my-element')); |
| 670 </script> |
| 671 |
| 672 By default all meta-data are stored in a single databse. If your meta-data |
| 673 have different types and want them to be stored separately, use `type` to |
| 674 differentiate them. |
| 675 |
| 676 Example: |
| 677 |
| 678 <core-meta id="x-foo" type="xElt"></core-meta> |
| 679 <core-meta id="x-bar" type="xElt"></core-meta> |
| 680 <core-meta id="y-bar" type="yElt"></core-meta> |
| 681 |
| 682 <script> |
| 683 var meta = document.createElement('core-meta'); |
| 684 meta.type = 'xElt'; |
| 685 console.log(meta.list); |
| 686 </script> |
| 687 |
| 688 @group Polymer Core Elements |
| 689 @element core-meta |
| 690 @homepage github.io |
| 691 --> |
| 692 |
| 693 |
| 694 |
| 695 <polymer-element name="core-meta" attributes="list label type" hidden assetpath=
"../core-meta/"> |
| 696 |
| 697 </polymer-element> |
| 698 |
| 699 |
| 700 <polymer-element name="core-iconset" extends="core-meta" attributes="src width i
cons iconSize" assetpath="../core-iconset/"> |
| 701 |
| 702 |
| 703 |
| 704 </polymer-element> |
| 705 |
| 706 |
| 707 <polymer-element name="core-iconset-svg" extends="core-meta" attributes="iconSiz
e" assetpath="../core-iconset-svg/"> |
| 708 |
| 709 |
| 710 |
| 711 </polymer-element> |
| 712 |
| 713 <core-iconset-svg id="icons" iconsize="24"> |
| 714 <svg><defs> |
| 715 <g id="accessibility"><path d="M12,2c1.1,0,2,0.9,2,2s-0.9,2-2,2s-2-0.9-2-2S10.9,
2,12,2z M21,9h-6v13h-2v-6h-2v6H9V9H3V7h18V9z"/></g> |
| 716 <g id="account-box"><path d="M3,5l0,14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5c0-1.
1-0.9-2-2-2H5C3.9,3,3,3.9,3,5z M15,9c0,1.7-1.3,3-3,3c-1.7,0-3-1.3-3-3c0-1.7,1.3-
3,3-3C13.7,6,15,7.3,15,9z M6,17c0-2,4-3.1,6-3.1s6,1.1,6,3.1v1H6V17z"/></g> |
| 717 <g id="account-circle"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5
,10-10S17.5,2,12,2z M12,5c1.7,0,3,1.3,3,3c0,1.7-1.3,3-3,3c-1.7,0-3-1.3-3-3C9,6.3
,10.3,5,12,5z M12,19.2c-2.5,0-4.7-1.3-6-3.2c0-2,4-3.1,6-3.1c2,0,6,1.1,6,3.1C16.7
,17.9,14.5,19.2,12,19.2z"/></g> |
| 718 <g id="add"><path d="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6V13z"/></g> |
| 719 <g id="add-box"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0
.9,2-2V5C21,3.9,20.1,3,19,3z M17,13h-4v4h-2v-4H7v-2h4V7h2v4h4V13z"/></g> |
| 720 <g id="add-circle"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-
10S17.5,2,12,2z M17,13h-4v4h-2v-4H7v-2h4V7h2v4h4V13z"/></g> |
| 721 <g id="add-circle-outline"><path d="M13,7h-2v4H7v2h4v4h2v-4h4v-2h-4V7z M12,2C6.5
,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8
-8s3.6-8,8-8c4.4,0,8,3.6,8,8S16.4,20,12,20z"/></g> |
| 722 <g id="android"><path d="M6,18c0,0.6,0.4,1,1,1h1v3.5C8,23.3,8.7,24,9.5,24c0.8,0,
1.5-0.7,1.5-1.5V19h2v3.5c0,0.8,0.7,1.5,1.5,1.5c0.8,0,1.5-0.7,1.5-1.5V19h1c0.6,0,
1-0.4,1-1V8H6V18z M3.5,8C2.7,8,2,8.7,2,9.5v7C2,17.3,2.7,18,3.5,18C4.3,18,5,17.3,
5,16.5v-7C5,8.7,4.3,8,3.5,8z M20.5,8C19.7,8,19,8.7,19,9.5v7c0,0.8,0.7,1.5,1.5,1.
5c0.8,0,1.5-0.7,1.5-1.5v-7C22,8.7,21.3,8,20.5,8z M15.5,2.2l1.3-1.3c0.2-0.2,0.2-0
.5,0-0.7c-0.2-0.2-0.5-0.2-0.7,0l-1.5,1.5C13.9,1.2,13,1,12,1c-1,0-1.9,0.2-2.7,0.6
L7.9,0.1C7.7,0,7.3,0,7.1,0.1C7,0.3,7,0.7,7.1,0.9l1.3,1.3C7,3.3,6,5,6,7h12C18,5,1
7,3.2,15.5,2.2z M10,5H9V4h1V5z M15,5h-1V4h1V5z"/></g> |
| 723 <g id="apps"><path d="M4,8h4V4H4V8z M10,20h4v-4h-4V20z M4,20h4v-4H4V20z M4,14h4v
-4H4V14z M10,14h4v-4h-4V14z M16,4v4h4V4H16z M10,8h4V4h-4V8z M16,14h4v-4h-4V14z M
16,20h4v-4h-4V20z"/></g> |
| 724 <g id="archive"><path d="M20.5,5.2l-1.4-1.7C18.9,3.2,18.5,3,18,3H6C5.5,3,5.1,3.2
,4.8,3.5L3.5,5.2C3.2,5.6,3,6,3,6.5V19c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V6.5C21,
6,20.8,5.6,20.5,5.2z M12,17.5L6.5,12H10v-2h4v2h3.5L12,17.5z M5.1,5l0.8-1h12l0.9,
1H5.1z"/></g> |
| 725 <g id="arrow-back"><path d="M20,11H7.8l5.6-5.6L12,4l-8,8l8,8l1.4-1.4L7.8,13H20V1
1z"/></g> |
| 726 <g id="arrow-drop-down"><polygon points="7,10 12,15 17,10 "></polygon></g> |
| 727 <g id="arrow-drop-down-circle"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,
0,10-4.5,10-10S17.5,2,12,2z M12,14l-4-4h8L12,14z"/></g> |
| 728 <g id="arrow-drop-up"><polygon points="7,14 12,9 17,14 "></polygon></g> |
| 729 <g id="arrow-forward"><polygon points="12,4 10.6,5.4 16.2,11 4,11 4,13 16.2,13 1
0.6,18.6 12,20 20,12 "></polygon></g> |
| 730 <g id="attachment"><path d="M7.5,18c-3,0-5.5-2.5-5.5-5.5S4.5,7,7.5,7H18c2.2,0,4,
1.8,4,4s-1.8,4-4,4H9.5C8.1,15,7,13.9,7,12.5S8.1,10,9.5,10H17v1.5H9.5c-0.6,0-1,0.
4-1,1s0.4,1,1,1H18c1.4,0,2.5-1.1,2.5-2.5S19.4,8.5,18,8.5H7.5c-2.2,0-4,1.8-4,4s1.
8,4,4,4H17V18H7.5z"/></g> |
| 731 <g id="backspace"><path d="M22,3H7C6.3,3,5.8,3.3,5.4,3.9L0,12l5.4,8.1C5.8,20.6,6
.3,21,7,21h15c1.1,0,2-0.9,2-2V5C24,3.9,23.1,3,22,3z M19,15.6L17.6,17L14,13.4L10.
4,17L9,15.6l3.6-3.6L9,8.4L10.4,7l3.6,3.6L17.6,7L19,8.4L15.4,12L19,15.6z"/></g> |
| 732 <g id="backup"><path d="M19.4,10c-0.7-3.4-3.7-6-7.4-6C9.1,4,6.6,5.6,5.4,8C2.3,8.
4,0,10.9,0,14c0,3.3,2.7,6,6,6h13c2.8,0,5-2.2,5-5C24,12.4,21.9,10.2,19.4,10z M14,
13v4h-4v-4H7l5-5l5,5H14z"/></g> |
| 733 <g id="block"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10S17
.5,2,12,2z M4,12c0-4.4,3.6-8,8-8c1.8,0,3.5,0.6,4.9,1.7L5.7,16.9C4.6,15.5,4,13.8,
4,12z M12,20c-1.8,0-3.5-0.6-4.9-1.7L18.3,7.1C19.4,8.5,20,10.2,20,12C20,16.4,16.4
,20,12,20z"/></g> |
| 734 <g id="book"><path d="M18,22c1.1,0,2-0.9,2-2V4c0-1.1-0.9-2-2-2h-6v7L9.5,7.5L7,9V
2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.9,2,2,2H18z"/></g> |
| 735 <g id="bookmark"><path d="M17,3H7C5.9,3,5,3.9,5,5l0,16l7-3l7,3V5C19,3.9,18.1,3,1
7,3z"/></g> |
| 736 <g id="bookmark-outline"><path d="M17,3H7C5.9,3,5,3.9,5,5l0,16l7-3l7,3V5C19,3.9,
18.1,3,17,3z M17,18l-5-2.2L7,18V5h10V18z"/></g> |
| 737 <g id="bug-report"><path d="M20,8h-2.8c-0.5-0.8-1.1-1.5-1.8-2L17,4.4L15.6,3l-2.2
,2.2C13,5.1,12.5,5,12,5s-1,0.1-1.4,0.2L8.4,3L7,4.4L8.6,6C7.9,6.5,7.3,7.2,6.8,8H4
v2h2.1C6,10.3,6,10.7,6,11v1H4v2h2v1c0,0.3,0,0.7,0.1,1H4v2h2.8c1,1.8,3,3,5.2,3s4.
2-1.2,5.2-3H20v-2h-2.1c0.1-0.3,0.1-0.7,0.1-1v-1h2v-2h-2v-1c0-0.3,0-0.7-0.1-1H20V
8z M14,16h-4v-2h4V16z M14,12h-4v-2h4V12z"/></g> |
| 738 <g id="cancel"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10S1
7.5,2,12,2z M17,15.6L15.6,17L12,13.4L8.4,17L7,15.6l3.6-3.6L7,8.4L8.4,7l3.6,3.6L1
5.6,7L17,8.4L13.4,12L17,15.6z"/></g> |
| 739 <g id="check"><polygon points="9,16.2 4.8,12 3.4,13.4 9,19 21,7 19.6,5.6 "></pol
ygon></g> |
| 740 <g id="check-box"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2
-0.9,2-2V5C21,3.9,20.1,3,19,3z M10,17l-5-5l1.4-1.4l3.6,3.6l7.6-7.6L19,8L10,17z"/
></g> |
| 741 <g id="check-box-blank"><path d="M19,3H5C3.9,3,3,3.9,3,5l0,14c0,1.1,0.9,2,2,2h14
c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z"/></g> |
| 742 <g id="check-box-outline"><path d="M7.9,10.1l-1.4,1.4L11,16L21,6l-1.4-1.4L11,13.
2L7.9,10.1z M19,19L5,19V5h10V3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0
.9,2-2v-8h-2V19z"/></g> |
| 743 <g id="check-box-outline-blank"><path d="M19,5v14L5,19V5H19 M19,3H5C3.9,3,3,3.9,
3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3L19,3z"/></g> |
| 744 <g id="check-circle"><path d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10c5.5,0,10
-4.5,10-10C22,6.5,17.5,2,12,2z M10,17l-5-5l1.4-1.4l3.6,3.6l7.6-7.6L19,8L10,17z"/
></g> |
| 745 <g id="check-circle-blank"><path d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10c5.
5,0,10-4.5,10-10C22,6.5,17.5,2,12,2z"/></g> |
| 746 <g id="check-circle-outline"><path d="M7.9,10.1l-1.4,1.4L11,16L21,6l-1.4-1.4L11,
13.2L7.9,10.1z M20,12c0,4.4-3.6,8-8,8s-8-3.6-8-8s3.6-8,8-8c0.8,0,1.5,0.1,2.2,0.3
l1.6-1.6C14.6,2.3,13.3,2,12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10H20z"/><
/g> |
| 747 <g id="check-circle-outline-blank"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c
5.5,0,10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8c4.4,0,8,3.6,8,
8S16.4,20,12,20z"/></g> |
| 748 <g id="chevron-left"><polygon points="15.4,7.4 14,6 8,12 14,18 15.4,16.6 10.8,12
"></polygon></g> |
| 749 <g id="chevron-right"><polygon points="10,6 8.6,7.4 13.2,12 8.6,16.6 10,18 16,12
"></polygon></g> |
| 750 <g id="clear"><polygon points="19,6.4 17.6,5 12,10.6 6.4,5 5,6.4 10.6,12 5,17.6
6.4,19 12,13.4 17.6,19 19,17.6 13.4,12 "></polygon></g> |
| 751 <g id="close"><polygon points="19,6.4 17.6,5 12,10.6 6.4,5 5,6.4 10.6,12 5,17.6
6.4,19 12,13.4 17.6,19 19,17.6 13.4,12 "></polygon></g> |
| 752 <g id="cloud"><path d="M19.4,10c-0.7-3.4-3.7-6-7.4-6C9.1,4,6.6,5.6,5.4,8C2.3,8.4
,0,10.9,0,14c0,3.3,2.7,6,6,6h13c2.8,0,5-2.2,5-5C24,12.4,21.9,10.2,19.4,10z"/></g
> |
| 753 <g id="cloud-circle"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,1
0-10S17.5,2,12,2z M17,15H8H7.5C6.1,15,5,13.9,5,12.5S6.1,10,7.5,10h0.6c0.4-1.7,2-
3,3.9-3c2.2,0,4,1.8,4,4h1c1.1,0,2,0.9,2,2S18.1,15,17,15z"/></g> |
| 754 <g id="cloud-done"><path d="M19.4,10c-0.7-3.4-3.7-6-7.4-6C9.1,4,6.6,5.6,5.4,8C2.
3,8.4,0,10.9,0,14c0,3.3,2.7,6,6,6h13c2.8,0,5-2.2,5-5C24,12.4,21.9,10.2,19.4,10z
M10,17l-3.5-3.5l1.4-1.4l2.1,2.1L15.2,9l1.4,1.4L10,17z"/></g> |
| 755 <g id="cloud-download"><path d="M19.4,10c-0.7-3.4-3.7-6-7.4-6C9.1,4,6.6,5.6,5.4,
8C2.3,8.4,0,10.9,0,14c0,3.3,2.7,6,6,6h13c2.8,0,5-2.2,5-5C24,12.4,21.9,10.2,19.4,
10z M17,13l-5,5l-5-5h3V9h4v4H17z"/></g> |
| 756 <g id="cloud-off"><path d="M19.4,10c-0.7-3.4-3.7-6-7.4-6c-1.5,0-2.9,0.4-4,1.2l1.
5,1.5C10.2,6.2,11.1,6,12,6c3,0,5.5,2.5,5.5,5.5V12H19c1.7,0,3,1.3,3,3c0,1.1-0.6,2
.1-1.6,2.6l1.5,1.5c1.3-0.9,2.1-2.4,2.1-4.1C24,12.4,21.9,10.2,19.4,10z M3,5.3L5.8
,8C2.6,8.2,0,10.8,0,14c0,3.3,2.7,6,6,6h11.7l2,2l1.3-1.3L4.3,4L3,5.3z M7.7,10l8,8
H6c-2.2,0-4-1.8-4-4c0-2.2,1.8-4,4-4H7.7z"/></g> |
| 757 <g id="cloud-queue"><path d="M19.4,10c-0.7-3.4-3.7-6-7.4-6C9.1,4,6.6,5.6,5.4,8C2
.3,8.4,0,10.9,0,14c0,3.3,2.7,6,6,6h13c2.8,0,5-2.2,5-5C24,12.4,21.9,10.2,19.4,10z
M19,18H6c-2.2,0-4-1.8-4-4c0-2.2,1.8-4,4-4h0.7C7.4,7.7,9.5,6,12,6c3,0,5.5,2.5,5.
5,5.5V12H19c1.7,0,3,1.3,3,3S20.7,18,19,18z"/></g> |
| 758 <g id="cloud-upload"><path d="M19.4,10c-0.7-3.4-3.7-6-7.4-6C9.1,4,6.6,5.6,5.4,8C
2.3,8.4,0,10.9,0,14c0,3.3,2.7,6,6,6h13c2.8,0,5-2.2,5-5C24,12.4,21.9,10.2,19.4,10
z M14,13v4h-4v-4H7l5-5l5,5H14z"/></g> |
| 759 <g id="content-copy"><path d="M16,1H4C2.9,1,2,1.9,2,3v14h2V3h12V1z M19,5H8C6.9,5
,6,5.9,6,7v14c0,1.1,0.9,2,2,2h11c1.1,0,2-0.9,2-2V7C21,5.9,20.1,5,19,5z M19,21H8V
7h11V21z"/></g> |
| 760 <g id="content-cut"><path d="M10,6c0-2.2-1.8-4-4-4S2,3.8,2,6c0,2.2,1.8,4,4,4c0.6
,0,1.1-0.1,1.6-0.4L10,12l-2.4,2.4C7.1,14.1,6.6,14,6,14c-2.2,0-4,1.8-4,4c0,2.2,1.
8,4,4,4s4-1.8,4-4c0-0.6-0.1-1.1-0.4-1.6L12,14l7,7h4L9.6,7.6C9.9,7.1,10,6.6,10,6z
M6,8C4.9,8,4,7.1,4,6s0.9-2,2-2c1.1,0,2,0.9,2,2S7.1,8,6,8z M6,20c-1.1,0-2-0.9-2-
2s0.9-2,2-2c1.1,0,2,0.9,2,2S7.1,20,6,20z M12,11.5c0.3,0,0.5,0.2,0.5,0.5c0,0.3-0.
2,0.5-0.5,0.5c-0.3,0-0.5-0.2-0.5-0.5C11.5,11.7,11.7,11.5,12,11.5z M23,3h-4l-6,6l
2,2L23,3z"/></g> |
| 761 <g id="content-paste"><path d="M19,2h-4.2c-0.4-1.2-1.5-2-2.8-2c-1.3,0-2.4,0.8-2.
8,2H5C3.9,2,3,2.9,3,4v16c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V4C21,2.9,20.1,2,19,2
z M12,2c0.6,0,1,0.4,1,1s-0.4,1-1,1c-0.6,0-1-0.4-1-1S11.4,2,12,2z M19,20H5V4h2v3h
10V4h2V20z"/></g> |
| 762 <g id="create"><path d="M3,17.2V21h3.8L17.8,9.9l-3.8-3.8L3,17.2z M20.7,7c0.4-0.4
,0.4-1,0-1.4l-2.3-2.3c-0.4-0.4-1-0.4-1.4,0l-1.8,1.8l3.8,3.8L20.7,7z"/></g> |
| 763 <g id="credit-card"><path d="M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0
,2-0.9,2-2V6C22,4.9,21.1,4,20,4z M20,18H4v-6h16V18z M20,8H4V6h16V8z"/></g> |
| 764 <g id="delete"><path d="M6,19c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V7H6V19z M19,4h-3
.5l-1-1h-5l-1,1H5v2h14V4z"/></g> |
| 765 <g id="done"><polygon points="9,16.2 4.8,12 3.4,13.4 9,19 21,7 19.6,5.6 "></poly
gon></g> |
| 766 <g id="done-all"><path d="M18,7l-1.4-1.4l-6.3,6.3l1.4,1.4L18,7z M22.2,5.6L11.7,1
6.2L7.5,12l-1.4,1.4l5.6,5.6l12-12L22.2,5.6z M0.4,13.4L6,19l1.4-1.4L1.8,12L0.4,13
.4z"/></g> |
| 767 <g id="drafts"><path d="M22,8c0-0.7-0.4-1.3-0.9-1.7L12,1L2.9,6.3C2.4,6.7,2,7.3,2
,8v10c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2L22,8z M12,13L3.7,7.8L12,3l8.3,4.8L12,13
z"/></g> |
| 768 <g id="drive"><path d="M22.3,14L15.4,2H8.6l0,0l6.9,12H22.3z M9.7,15l-3.4,6h13.1l
3.4-6H9.7z M7.7,3.5L1.2,15l3.4,6l6.6-11.5L7.7,3.5z"/></g> |
| 769 <g id="drawer"><path d="M20,4H4C2.8,4,2,4.8,2,6v12c0,1.2,0.8,2,2,2h16c1,0,2-0.8,
2-2V6C22,4.8,21,4,20,4z M20,18h-6V6h6V18z"/></g> |
| 770 <g id="drive-document"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.
1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,9H7V7h10V9z M17,13H7v-2h10V13z M14,17H7v
-2h7V17z"/></g> |
| 771 <g id="drive-drawing"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1
,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M18,18h-6v-5.8c-0.7,0.6-1.5,1-2.5,1c-2,0-3.7-
1.7-3.7-3.7s1.7-3.7,3.7-3.7c2,0,3.7,1.7,3.7,3.7c0,1-0.4,1.8-1,2.5H18V18z"/></g> |
| 772 <g id="drive-file"><path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2
-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z"/></g> |
| 773 <g id="drive-form"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,
2-0.9,2-2V5C21,3.9,20.1,3,19,3z M9,17H7v-2h2V17z M9,13H7v-2h2V13z M9,9H7V7h2V9z
M17,17h-7v-2h7V17z M17,13h-7v-2h7V13z M17,9h-7V7h7V9z"/></g> |
| 774 <g id="drive-fusiontable"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14
c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,10.2L13,17l-4-4l-4,4v-3l4-4l4,4l6-6.8
V10.2z"/></g> |
| 775 <g id="drive-image"><path d="M21,19V5c0-1.1-0.9-2-2-2H5C3.9,3,3,3.9,3,5v14c0,1.1
,0.9,2,2,2h14C20.1,21,21,20.1,21,19z M8.5,13.5l2.5,3l3.5-4.5l4.5,6H5L8.5,13.5z"/
></g> |
| 776 <g id="drive-ms-excel"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.
1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M16.2,17h-2L12,13.2L9.8,17h-2l3.2-5L7.8,7h2l
2.2,3.8L14.2,7h2L13,12L16.2,17z"/></g> |
| 777 <g id="drive-ms-powerpoint"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h
14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M9.8,13.4V17H8V7h4.3c1.5,0,2.2,0.3,2.8,
0.9c0.7,0.6,0.9,1.4,0.9,2.3c0,1-0.3,1.8-0.9,2.3c-0.6,0.5-1.3,0.8-2.8,0.8H9.8z"/>
<path d="M9.8,12V8.4h2.3c0.7,0,1.2,0.2,1.5,0.6c0.3,0.4,0.5,0.7,0.5,1.2c0,0.6-0.2
,0.9-0.5,1.3c-0.3,0.3-0.7,0.5-1.4,0.5H9.8z"/></g> |
| 778 <g id="drive-ms-word"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1
,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M15.5,17H14l-2-7.5L10,17H8.5L6.1,7h1.7l1.5,7.
5l2-7.5h1.4l2,7.5L16.2,7h1.7L15.5,17z"/></g> |
| 779 <g id="drive-pdf"><path d="M11.3,8.6L11.3,8.6C11.4,8.6,11.4,8.6,11.3,8.6c0.1-0.4
,0.2-0.6,0.2-0.9l0-0.2c0.1-0.5,0.1-0.9,0-1c0,0,0,0,0-0.1l-0.1-0.1c0,0,0,0,0,0c0,
0,0,0,0,0c0,0,0,0.1-0.1,0.1C11.1,7,11.1,7.7,11.3,8.6C11.3,8.6,11.3,8.6,11.3,8.6z
M8.3,15.5c-0.2,0.1-0.4,0.2-0.5,0.3c-0.7,0.6-1.2,1.3-1.3,1.6c0,0,0,0,0,0c0,0,0,0
,0,0c0,0,0,0,0,0C7.1,17.3,7.7,16.7,8.3,15.5C8.4,15.5,8.4,15.5,8.3,15.5C8.4,15.5,
8.3,15.5,8.3,15.5z M17.5,14c-0.1-0.1-0.5-0.4-1.9-0.4c-0.1,0-0.1,0-0.2,0c0,0,0,0,
0,0c0,0,0,0,0,0.1c0.7,0.3,1.4,0.5,1.9,0.5c0.1,0,0.1,0,0.2,0l0,0c0,0,0.1,0,0.1,0c
0,0,0,0,0-0.1c0,0,0,0,0,0C17.6,14.1,17.5,14.1,17.5,14z M19,3H5C3.9,3,3,3.9,3,5v1
4c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17.9,14.8C17.7,14.9,
17.4,15,17,15c-0.8,0-2-0.2-3-0.7c-1.7,0.2-3,0.4-4,0.8c-0.1,0-0.1,0-0.2,0.1c-1.2,
2.1-2.2,3.1-3,3.1c-0.2,0-0.3,0-0.4-0.1l-0.5-0.3l0-0.1c-0.1-0.2-0.1-0.3-0.1-0.5c0
.1-0.5,0.7-1.4,1.9-2.1c0.2-0.1,0.5-0.3,0.9-0.5c0.3-0.5,0.6-1.1,1-1.8c0.5-1,0.8-2
,1.1-2.9l0,0c-0.4-1.2-0.6-1.9-0.2-3.3c0.1-0.4,0.4-0.8,0.8-0.8l0.2,0c0.2,0,0.4,0.
1,0.6,0.2c0.7,0.7,0.4,2.3,0,3.6c0,0.1,0,0.1,0,0.1c0.4,1.1,1,2,1.6,2.6c0.3,0.2,0.
5,0.4,0.9,0.6c0.5,0,0.9-0.1,1.3-0.1c1.2,0,2,0.2,2.3,0.7c0.1,0.2,0.1,0.4,0.1,0.6C
18.2,14.3,18.1,14.6,17.9,14.8z M11.4,10.9c-0.2,0.7-0.6,1.5-1,2.4c-0.2,0.4-0.4,0.
7-0.6,1.1c0,0,0.1,0,0.1,0l0.1,0v0c1.3-0.5,2.5-0.8,3.3-0.9c-0.2-0.1-0.3-0.2-0.4-0
.3C12.4,12.6,11.8,11.8,11.4,10.9z"/></g> |
| 780 <g id="drive-presentation"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h1
4c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,16H5V8h14V16z"/></g> |
| 781 <g id="drive-script"><path d="M19,3H5C3.9,3,3,3.9,3,5l0,4h0v6h0l0,4c0,1.1,0.9,2,
2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M11,17v-3H5v-4h6V7l5,5L11,17z"/></g
> |
| 782 <g id="drive-site"><path d="M19,4H5C3.9,4,3,4.9,3,6l0,12c0,1.1,0.9,2,2,2h14c1.1,
0,2-0.9,2-2V6C21,4.9,20.1,4,19,4z M14,18H5v-4h9V18z M14,13H5V9h9V13z M19,18h-4V9
h4V18z"/></g> |
| 783 <g id="drive-spreadsheet"><path d="M19,3H5C3.9,3,3,3.9,3,5l0,3h0v11c0,1.1,0.9,2,
2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,11h-8v8H9v-8H5V9h4V5h2v4h8V11z"
/></g> |
| 784 <g id="drive-video"><path d="M18,4l2,4h-3l-2-4h-2l2,4h-3l-2-4H8l2,4H7L5,4H4C2.9,
4,2,4.9,2,6l0,12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V4H18z"/></g> |
| 785 <g id="error"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10S17
.5,2,12,2z M13,17h-2v-2h2V17z M13,13h-2V7h2V13z"/></g> |
| 786 <g id="event"><path d="M17,12h-5v5h5V12z M16,1v2H8V1H6v2H5C3.9,3,3,3.9,3,5l0,14c
0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-1V1H16z M19,19H5V8h14V19z"
/></g> |
| 787 <g id="exit-to-app"><path d="M10.1,15.6l1.4,1.4l5-5l-5-5l-1.4,1.4l2.6,2.6H3v2h9.
7L10.1,15.6z M19,3H5C3.9,3,3,3.9,3,5v4h2V5h14v14H5v-4H3v4c0,1.1,0.9,2,2,2h14c1.1
,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z"/></g> |
| 788 <g id="expand-less"><polygon points="12,8 6,14 7.4,15.4 12,10.8 16.6,15.4 18,14
"></polygon></g> |
| 789 <g id="expand-more"><polygon points="16.6,8.6 12,13.2 7.4,8.6 6,10 12,16 18,10 "
></polygon></g> |
| 790 <g id="explore"><path d="M12,10.9c-0.6,0-1.1,0.5-1.1,1.1s0.5,1.1,1.1,1.1c0.6,0,1
.1-0.5,1.1-1.1S12.6,10.9,12,10.9z M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10c5.5,
0,10-4.5,10-10C22,6.5,17.5,2,12,2z M14.2,14.2L6,18l3.8-8.2L18,6L14.2,14.2z"/></g
> |
| 791 <g id="extension"><path d="M20.5,11H19V7c0-1.1-0.9-2-2-2h-4V3.5C13,2.1,11.9,1,10
.5,1C9.1,1,8,2.1,8,3.5V5H4C2.9,5,2,5.9,2,7l0,3.8h1.5c1.5,0,2.7,1.2,2.7,2.7S5,16.
2,3.5,16.2H2L2,20c0,1.1,0.9,2,2,2h3.8v-1.5c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2
.7,2.7V22H17c1.1,0,2-0.9,2-2v-4h1.5c1.4,0,2.5-1.1,2.5-2.5S21.9,11,20.5,11z"/></g
> |
| 792 <g id="favorite"><path d="M12,21.4L10.6,20C5.4,15.4,2,12.3,2,8.5C2,5.4,4.4,3,7.5
,3c1.7,0,3.4,0.8,4.5,2.1C13.1,3.8,14.8,3,16.5,3C19.6,3,22,5.4,22,8.5c0,3.8-3.4,6
.9-8.6,11.5L12,21.4z"/></g> |
| 793 <g id="favorite-outline"><path d="M16.5,3c-1.7,0-3.4,0.8-4.5,2.1C10.9,3.8,9.2,3,
7.5,3C4.4,3,2,5.4,2,8.5c0,3.8,3.4,6.9,8.6,11.5l1.4,1.3l1.4-1.3c5.1-4.7,8.6-7.8,8
.6-11.5C22,5.4,19.6,3,16.5,3z M12.1,18.6L12,18.6l-0.1-0.1C7.1,14.2,4,11.4,4,8.5C
4,6.5,5.5,5,7.5,5c1.5,0,3,1,3.6,2.4h1.9C13.5,6,15,5,16.5,5c2,0,3.5,1.5,3.5,3.5C2
0,11.4,16.9,14.2,12.1,18.6z"/></g> |
| 794 <g id="file-download"><path d="M19,9h-4V3H9v6H5l7,7L19,9z M5,18v2h14v-2H5z"/></g
> |
| 795 <g id="file-upload"><polygon points="9,16 15,16 15,10 19,10 12,3 5,10 9,10 "><re
ct x="5" y="18" width="14" height="2"/></polygon></g> |
| 796 <g id="filter"><path d="M10,18h4v-2h-4V18z M3,6v2h18V6H3z M6,13h12v-2H6V13z"/></
g> |
| 797 <g id="flag"><polygon points="14.4,6 14,4 5,4 5,21 7,21 7,14 12.6,14 13,16 20,16
20,6 "></polygon></g> |
| 798 <g id="flip-to-back"><path d="M9,7H7l0,2h2V7z M9,11H7v2h2V11z M9,3C7.9,3,7,3.9,7
,5h2V3z M13,15h-2v2h2V15z M19,3v2h2C21,3.9,20.1,3,19,3z M13,3h-2v2h2V3z M9,17v-2
H7C7,16.1,7.9,17,9,17z M19,13h2v-2h-2V13z M19,9h2V7h-2V9z M19,17c1.1,0,2-0.9,2-2
h-2V17z M5,7H3v2h0l0,10c0,1.1,0.9,2,2,2h12v-2H5V7z M15,5h2V3h-2V5z M15,17h2v-2h-
2V17z"/></g> |
| 799 <g id="flip-to-front"><path d="M3,13h2v-2H3L3,13z M3,17h2v-2H3V17z M5,21v-2H3C3,
20.1,3.9,21,5,21z M3,9h2V7H3V9z M15,21h2v-2h-2V21z M19,3H9C7.9,3,7,3.9,7,5v2h0v2
v6c0,1.1,0.9,2,2,2h5h4h1c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,15H9V5h10V15z
M11,21h2v-2h-2V21z M7,21h2v-2H7V21z"/></g> |
| 800 <g id="folder"><path d="M10,4H4C2.9,4,2,4.9,2,6l0,12c0,1.1,0.9,2,2,2h16c1.1,0,2-
0.9,2-2V8c0-1.1-0.9-2-2-2h-8L10,4z"/></g> |
| 801 <g id="folder-mydrive"><path d="M20,6h-8l-2-2H4C2.9,4,2,4.9,2,6l0,12c0,1.1,0.9,2
,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M11.7,17l-1.3-2.1l2.8-5l1.5,2.7L12
.3,17H11.7z M18.3,17h-5.5l1.4-2.5h5.1l0.3,0.5L18.3,17z M13.8,9h2.4l2.8,5H16l-2.6
-4.5L13.8,9z"/></g> |
| 802 <g id="folder-shared"><path d="M20,6h-8l-2-2H4C2.9,4,2,4.9,2,6l0,12c0,1.1,0.9,2,
2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M15,9c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2
,2c-1.1,0-2-0.9-2-2C13,9.9,13.9,9,15,9z M19,17h-8v-1c0-1.3,2.7-2,4-2c1.3,0,4,0.7
,4,2V17z"/></g> |
| 803 <g id="forward"><polygon points="12,8 12,4 20,12 12,20 12,16 4,16 4,8 "></polygo
n></g> |
| 804 <g id="fullscreen"><path d="M7,14H5v5h5v-2H7V14z M5,10h2V7h3V5H5V10z M17,17h-3v2
h5v-5h-2V17z M14,5v2h3v3h2V5H14z"/></g> |
| 805 <g id="fullscreen-exit"><path d="M5,16h3v3h2v-5H5V16z M8,8H5v2h5V5H8V8z M14,19h2
v-3h3v-2h-5V19z M16,8V5h-2v5h5V8H16z"/></g> |
| 806 <g id="gesture"><path d="M4.6,6.9C5.3,6.2,6,5.5,6.3,5.7c0.5,0.2,0,1-0.3,1.5c-0.3
,0.4-2.9,3.9-2.9,6.3c0,1.3,0.5,2.3,1.3,3c0.8,0.6,1.7,0.7,2.6,0.5c1.1-0.3,1.9-1.4
,3.1-2.8c1.2-1.5,2.8-3.4,4.1-3.4c1.6,0,1.6,1,1.8,1.8c-3.8,0.6-5.4,3.7-5.4,5.4c0,
1.7,1.4,3.1,3.2,3.1c1.6,0,4.3-1.3,4.7-6.1H21v-2.5h-2.5c-0.2-1.6-1.1-4.2-4-4.2c-2
.2,0-4.2,1.9-4.9,2.8c-0.6,0.7-2.1,2.5-2.3,2.7c-0.3,0.3-0.7,0.8-1.1,0.8c-0.4,0-0.
7-0.8-0.4-1.9c0.4-1.1,1.4-2.9,1.9-3.5C8.4,8,8.9,7.2,8.9,5.9C8.9,3.7,7.3,3,6.4,3C
5.1,3,4,4,3.7,4.3C3.4,4.6,3.1,4.9,2.8,5.2L4.6,6.9z M13.9,18.6c-0.3,0-0.7-0.3-0.7
-0.7c0-0.6,0.7-2.2,2.9-2.8C15.7,17.8,14.6,18.6,13.9,18.6z"/></g> |
| 807 <g id="google"><path d="M16.3,13.4l-1.1-0.8c-0.4-0.3-0.8-0.7-0.8-1.4c0-0.7,0.5-1
.3,1-1.6c1.3-1,2.6-2.1,2.6-4.3c0-2.1-1.3-3.3-2-3.9h1.7L18.9,0h-6.2C8.3,0,6.1,2.8
,6.1,5.8c0,2.3,1.8,4.8,5,4.8h0.8c-0.1,0.3-0.4,0.8-0.4,1.3c0,1,0.4,1.4,0.9,2c-1.4
,0.1-4,0.4-5.9,1.6c-1.8,1.1-2.3,2.6-2.3,3.7c0,2.3,2.1,4.5,6.6,4.5c5.4,0,8-3,8-5.
9C18.8,15.7,17.7,14.6,16.3,13.4z M8.7,4.3c0-2.2,1.3-3.2,2.7-3.2c2.6,0,4,3.5,4,5.
5c0,2.6-2.1,3.1-2.9,3.1C10,9.7,8.7,6.6,8.7,4.3z M12.3,22.3c-3.3,0-5.4-1.5-5.4-3.
7c0-2.2,2-2.9,2.6-3.2c1.3-0.4,3-0.5,3.3-0.5c0.3,0,0.5,0,0.7,0c2.4,1.7,3.4,2.4,3.
4,4C16.9,20.8,15,22.3,12.3,22.3z"/></g> |
| 808 <g id="google-plus"><path d="M21,10V7h-2v3h-3v2h3v3h2v-3h3v-2H21z M13.3,13.4l-1.
1-0.8c-0.4-0.3-0.8-0.7-0.8-1.4c0-0.7,0.5-1.3,1-1.6c1.3-1,2.6-2.1,2.6-4.3c0-2.1-1
.3-3.3-2-3.9h1.7L15.9,0H9.7C5.3,0,3.1,2.8,3.1,5.8c0,2.3,1.8,4.8,5,4.8h0.8c-0.1,0
.3-0.4,0.8-0.4,1.3c0,1,0.4,1.4,0.9,2c-1.4,0.1-4,0.4-5.9,1.6c-1.8,1.1-2.3,2.6-2.3
,3.7c0,2.3,2.1,4.5,6.6,4.5c5.4,0,8-3,8-5.9C15.8,15.7,14.7,14.6,13.3,13.4z M5.7,4
.3c0-2.2,1.3-3.2,2.7-3.2c2.6,0,4,3.5,4,5.5c0,2.6-2.1,3.1-2.9,3.1C7,9.7,5.7,6.6,5
.7,4.3z M9.3,22.3c-3.3,0-5.4-1.5-5.4-3.7c0-2.2,2-2.9,2.6-3.2c1.3-0.4,3-0.5,3.3-0
.5c0.3,0,0.5,0,0.7,0c2.4,1.7,3.4,2.4,3.4,4C13.9,20.8,12,22.3,9.3,22.3z"/></g> |
| 809 <g id="help"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10S17.
5,2,12,2z M13,19h-2v-2h2V19z M15.1,11.3l-0.9,0.9C13.4,12.9,13,13.5,13,15h-2v-0.5
c0-1.1,0.4-2.1,1.2-2.8l1.2-1.3C13.8,10.1,14,9.6,14,9c0-1.1-0.9-2-2-2c-1.1,0-2,0.
9-2,2H8c0-2.2,1.8-4,4-4c2.2,0,4,1.8,4,4C16,9.9,15.6,10.7,15.1,11.3z"/></g> |
| 810 <g id="history"><path opacity="0.9" d="M12.5,2C9,2,5.9,3.9,4.3,6.8L2,4.5V11h6.5L
5.7,8.2C7,5.7,9.5,4,12.5,4c4.1,0,7.5,3.4,7.5,7.5c0,4.1-3.4,7.5-7.5,7.5c-3.3,0-6-
2.1-7.1-5H3.3c1.1,4,4.8,7,9.2,7c5.3,0,9.5-4.3,9.5-9.5S17.7,2,12.5,2z M11,7v5.1l4
.7,2.8l0.8-1.3l-4-2.4V7H11z"/></g> |
| 811 <g id="home"><polygon points="10,20 10,14 14,14 14,20 19,20 19,12 22,12 12,3 2,1
2 5,12 5,20 "></polygon></g> |
| 812 <g id="https"><path d="M18,8h-1V6c0-2.8-2.2-5-5-5C9.2,1,7,3.2,7,6v2H6c-1.1,0-2,0
.9-2,2v10c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V10C20,8.9,19.1,8,18,8z M12,17c-1.1,
0-2-0.9-2-2s0.9-2,2-2c1.1,0,2,0.9,2,2S13.1,17,12,17z M15.1,8H8.9V6c0-1.7,1.4-3.1
,3.1-3.1c1.7,0,3.1,1.4,3.1,3.1V8z"/></g> |
| 813 <g id="inbox"><path d="M19,3H5C3.9,3,3,3.9,3,5l0,14c0,1.1,0.9,2,2,2h14c1.1,0,2-0
.9,2-2V5C21,3.9,20.1,3,19,3z M19,15h-4c0,1.7-1.3,3-3,3c-1.7,0-3-1.3-3-3H5V5h14V1
5z M16,10h-2V7h-4v3H8l4,4L16,10z"/></g> |
| 814 <g id="info"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10S17.
5,2,12,2z M13,17h-2v-6h2V17z M13,9h-2V7h2V9z"/></g> |
| 815 <g id="info-outline"><path d="M11,17h2v-6h-2V17z M12,2C6.5,2,2,6.5,2,12s4.5,10,1
0,10c5.5,0,10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8c4.4,0,8,3
.6,8,8S16.4,20,12,20z M11,9h2V7h-2V9z"/></g> |
| 816 <g id="invert-colors"><path d="M17,12c0-2.8-2.2-5-5-5v10C14.8,17,17,14.8,17,12z
M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19
,3z M19,19h-7v-2c-2.8,0-5-2.2-5-5s2.2-5,5-5V5h7V19z"/></g> |
| 817 <g id="keep"><path d="M16,12V4h1V2H7v2h1v8l-2,2v2h5.2v6h1.6v-6H18v-2L16,12z"/></
g> |
| 818 <g id="label"><path d="M17.6,5.8C17.3,5.3,16.7,5,16,5L5,5C3.9,5,3,5.9,3,7v10c0,1
.1,0.9,2,2,2l11,0c0.7,0,1.3-0.3,1.6-0.8L22,12L17.6,5.8z"/></g> |
| 819 <g id="label-outline"><path d="M17.6,5.8C17.3,5.3,16.7,5,16,5L5,5C3.9,5,3,5.9,3,
7v10c0,1.1,0.9,2,2,2l11,0c0.7,0,1.3-0.3,1.6-0.8L22,12L17.6,5.8z M16,17H5V7h11l3.
5,5L16,17z"/></g> |
| 820 <g id="language"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10
S17.5,2,12,2z M18.9,8H16c-0.3-1.3-0.8-2.4-1.4-3.6C16.4,5.1,18,6.3,18.9,8z M12,4c
0.8,1.2,1.5,2.5,1.9,4h-3.8C10.5,6.6,11.2,5.2,12,4z M4.3,14C4.1,13.4,4,12.7,4,12s
0.1-1.4,0.3-2h3.4c-0.1,0.7-0.1,1.3-0.1,2s0.1,1.3,0.1,2H4.3z M5.1,16H8c0.3,1.3,0.
8,2.4,1.4,3.6C7.6,18.9,6,17.7,5.1,16z M8,8H5.1c1-1.7,2.5-2.9,4.3-3.6C8.8,5.6,8.3
,6.7,8,8z M12,20c-0.8-1.2-1.5-2.5-1.9-4h3.8C13.5,17.4,12.8,18.8,12,20z M14.3,14H
9.7c-0.1-0.7-0.2-1.3-0.2-2s0.1-1.3,0.2-2h4.7c0.1,0.7,0.2,1.3,0.2,2S14.4,13.3,14.
3,14z M14.6,19.6c0.6-1.1,1.1-2.3,1.4-3.6h2.9C18,17.7,16.4,18.9,14.6,19.6z M16.4,
14c0.1-0.7,0.1-1.3,0.1-2s-0.1-1.3-0.1-2h3.4c0.2,0.6,0.3,1.3,0.3,2s-0.1,1.4-0.3,2
H16.4z"/></g> |
| 821 <g id="launch"><path d="M19,19H5V5h7V3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1
.1,0,2-0.9,2-2v-7h-2V19z M14,3v2h3.6l-9.8,9.8l1.4,1.4L19,6.4V10h2V3H14z"/></g> |
| 822 <g id="link"><path d="M8,13h8v-2H8V13z M3.9,12c0-2.3,1.8-4.1,4.1-4.1h3V6H8c-3.3,
0-6,2.7-6,6s2.7,6,6,6h3v-1.9H8C5.7,16.1,3.9,14.3,3.9,12z M16,6h-3v1.9h3c2.3,0,4.
1,1.8,4.1,4.1c0,2.3-1.8,4.1-4.1,4.1h-3V18h3c3.3,0,6-2.7,6-6S19.3,6,16,6z"/></g> |
| 823 <g id="list"><path d="M3,13h2v-2H3V13z M3,17h2v-2H3V17z M3,9h2V7H3V9z M7,13h14v-
2H7V13z M7,17h14v-2H7V17z M7,7v2h14V7H7z"/></g> |
| 824 <g id="lock"><path d="M18,8h-1V6c0-2.8-2.2-5-5-5C9.2,1,7,3.2,7,6v2H6c-1.1,0-2,0.
9-2,2v10c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V10C20,8.9,19.1,8,18,8z M12,17c-1.1,0
-2-0.9-2-2s0.9-2,2-2c1.1,0,2,0.9,2,2S13.1,17,12,17z M15.1,8H8.9V6c0-1.7,1.4-3.1,
3.1-3.1c1.7,0,3.1,1.4,3.1,3.1V8z"/></g> |
| 825 <g id="lock-open"><path d="M12,17c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2S10
.9,17,12,17z M18,8h-1V6c0-2.8-2.2-5-5-5C9.2,1,7,3.2,7,6h1.9c0-1.7,1.4-3.1,3.1-3.
1c1.7,0,3.1,1.4,3.1,3.1v2H6c-1.1,0-2,0.9-2,2v10c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2
-2V10C20,8.9,19.1,8,18,8z M18,20H6V10h12V20z"/></g> |
| 826 <g id="lock-outline"><path d="M18,8h-1V6c0-2.8-2.2-5-5-5C9.2,1,7,3.2,7,6v2H6c-1.
1,0-2,0.9-2,2v10c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V10C20,8.9,19.1,8,18,8z M12,2
.9c1.7,0,3.1,1.4,3.1,3.1v2H9V6H8.9C8.9,4.3,10.3,2.9,12,2.9z M18,20H6V10h12V20z M
12,17c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2S10.9,17,12,17z"/></g> |
| 827 <g id="mail"><path d="M20,4H4C2.9,4,2,4.9,2,6l0,12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.
9,2-2V6C22,4.9,21.1,4,20,4z M20,8l-8,5L4,8V6l8,5l8-5V8z"/></g> |
| 828 <g id="markunread"><path d="M22,6l2-2l-2-2l-2,2l-2-2l-2,2l-2-2l-2,2l-2-2L8,4L6,2
L4,4L2,2L0,4l2,2L0,8l2,2l-2,2l2,2l-2,2l2,2l-2,2l2,2l2-2l2,2l2-2l2,2l2-2l2,2l2-2l
2,2l2-2l2,2l2-2l-2-2l2-2l-2-2l2-2l-2-2l2-2L22,6z M20,8l-8,5L4,8V6l8,5l8-5V8z"/><
/g> |
| 829 <g id="menu"><path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z"/></g> |
| 830 <g id="more-horiz"><path d="M6,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S7.1
,10,6,10z M18,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S19.1,10,18,10z M12,1
0c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,10,12,10z"/></g> |
| 831 <g id="more-vert"><path d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2S10.
9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,10,12,10z M12,1
6c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,16,12,16z"/></g> |
| 832 <g id="polymer"><polygon points="19,4 15,4 7.1,16.6 4.5,12 9,4 5,4 0.5,12 5,20 9
,20 16.9,7.4 19.5,12 15,20 19,20 23.5,12 "></polygon></g> |
| 833 <g id="print"><path d="M19,8H5c-1.7,0-3,1.3-3,3v6h4v4h12v-4h4v-6C22,9.3,20.7,8,1
9,8z M16,19H8v-5h8V19z M19,12c-0.6,0-1-0.4-1-1s0.4-1,1-1c0.6,0,1,0.4,1,1S19.6,12
,19,12z M18,3H6v4h12V3z"/></g> |
| 834 <g id="radio-button-off"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4
.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8c4.4,0,8,3.6,8,8S16.4,20,
12,20z"/></g> |
| 835 <g id="radio-button-on"><path d="M12,7c-2.8,0-5,2.2-5,5s2.2,5,5,5c2.8,0,5-2.2,5-
5S14.8,7,12,7z M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,10-10S17.5,2,12,
2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8c4.4,0,8,3.6,8,8S16.4,20,12,20z"/></g> |
| 836 <g id="receipt"><path d="M18,17H6v-2h12V17z M18,13H6v-2h12V13z M18,9H6V7h12V9z M
3,22l1.5-1.5L6,22l1.5-1.5L9,22l1.5-1.5L12,22l1.5-1.5L15,22l1.5-1.5L18,22l1.5-1.5
L21,22V2l-1.5,1.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2L4.5,
3.5L3,2V22z"/></g> |
| 837 <g id="refresh"><path d="M17.6,6.4C16.2,4.9,14.2,4,12,4c-4.4,0-8,3.6-8,8s3.6,8,8
,8c3.7,0,6.8-2.6,7.7-6h-2.1c-0.8,2.3-3,4-5.6,4c-3.3,0-6-2.7-6-6s2.7-6,6-6c1.7,0,
3.1,0.7,4.2,1.8L13,11h7V4L17.6,6.4z"/></g> |
| 838 <g id="reminder"><path d="M16.9,13c1.3-1.3,2.1-3,2.1-5c0-3.9-3.1-7-7-7C8.1,1,5,4
.1,5,8c0,2,0.8,3.7,2.1,5l0,0l3.5,3.5L6,21.1l1.4,1.4L16.9,13z M15.5,11.5L15.5,11.
5L12,15.1l-3.5-3.5l0,0l0,0C7.6,10.6,7,9.4,7,8c0-2.8,2.2-5,5-5c2.8,0,5,2.2,5,5C17
,9.4,16.4,10.6,15.5,11.5L15.5,11.5z M13.4,19.3l3.2,3.2l1.4-1.4l-3.2-3.2L13.4,19.
3z"/></g> |
| 839 <g id="remove"><path d="M19,13H5v-2h14V13z"/></g> |
| 840 <g id="remove-circle"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4.5,
10-10S17.5,2,12,2z M17,13H7v-2h10V13z"/></g> |
| 841 <g id="remove-circle-outline"><path d="M7,11v2h10v-2H7z M12,2C6.5,2,2,6.5,2,12s4
.5,10,10,10c5.5,0,10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8c4.
4,0,8,3.6,8,8S16.4,20,12,20z"/></g> |
| 842 <g id="reply"><path d="M10,9V5l-7,7l7,7v-4.1c5,0,8.5,1.6,11,5.1C20,15,17,10,10,9
z"/></g> |
| 843 <g id="reply-all"><path d="M7,8V5l-7,7l7,7v-3l-4-4L7,8z M13,9V5l-7,7l7,7v-4.1c5,
0,8.5,1.6,11,5.1C23,15,20,10,13,9z"/></g> |
| 844 <g id="report"><path d="M15.7,3H8.3L3,8.3v7.5L8.3,21h7.5l5.3-5.3V8.3L15.7,3z M12
,17.3c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3c0.7,0,1.3,0.6,1.3,1.3C13.3,16
.7,12.7,17.3,12,17.3z M13,13h-2V7h2V13z"/></g> |
| 845 <g id="rotate-left"><path d="M7.1,8.5L5.7,7.1C4.8,8.3,4.2,9.6,4.1,11h2C6.2,10.1,
6.6,9.3,7.1,8.5z M6.1,13h-2c0.2,1.4,0.7,2.7,1.6,3.9l1.4-1.4C6.6,14.7,6.2,13.9,6.
1,13z M7.1,18.3c1.2,0.9,2.5,1.4,3.9,1.6v-2c-0.9-0.1-1.7-0.5-2.5-1L7.1,18.3z M13,
4.1V1L8.5,5.5L13,10V6.1c2.8,0.5,5,2.9,5,5.9s-2.2,5.4-5,5.9v2c3.9-0.5,7-3.9,7-7.9
S16.9,4.6,13,4.1z"/></g> |
| 846 <g id="rotate-right"><path d="M15.5,5.5L11,1v3.1C7.1,4.6,4,7.9,4,12s3.1,7.4,7,7.
9v-2C8.2,17.4,6,15,6,12s2.2-5.4,5-5.9V10L15.5,5.5z M19.9,11c-0.2-1.4-0.7-2.7-1.6
-3.9l-1.4,1.4c0.5,0.8,0.9,1.6,1,2.5H19.9z M13,17.9v2c1.4-0.2,2.7-0.7,3.9-1.6l-1.
4-1.4C14.7,17.4,13.9,17.8,13,17.9z M16.9,15.5l1.4,1.4c0.9-1.2,1.5-2.5,1.6-3.9h-2
C17.8,13.9,17.4,14.7,16.9,15.5z"/></g> |
| 847 <g id="save"><path d="M17,3H5C3.9,3,3,3.9,3,5l0,14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.
9,2-2V7L17,3z M12,19c-1.7,0-3-1.3-3-3s1.3-3,3-3c1.7,0,3,1.3,3,3S13.7,19,12,19z M
15,9H5V5h10V9z"/></g> |
| 848 <g id="schedule"><path fill-opacity="0.9" d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10
c5.5,0,10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8c4.4,0,8,3.6,8
,8S16.4,20,12,20z"/><polygon fill-opacity="0.9" points="12.5,7 11,7 11,13 16.2,1
6.2 17,14.9 12.5,12.2 "></polygon></g> |
| 849 <g id="search"><path d="M15.5,14h-0.8l-0.3-0.3c1-1.1,1.6-2.6,1.6-4.2C16,5.9,13.1
,3,9.5,3C5.9,3,3,5.9,3,9.5S5.9,16,9.5,16c1.6,0,3.1-0.6,4.2-1.6l0.3,0.3v0.8l5,5l1
.5-1.5L15.5,14z M9.5,14C7,14,5,12,5,9.5S7,5,9.5,5C12,5,14,7,14,9.5S12,14,9.5,14z
"/></g> |
| 850 <g id="select-all"><path d="M3,5h2V3C3.9,3,3,3.9,3,5z M3,13h2v-2H3V13z M7,21h2v-
2H7V21z M3,9h2V7H3V9z M13,3h-2v2h2V3z M19,3v2h2C21,3.9,20.1,3,19,3z M5,21v-2H3C3
,20.1,3.9,21,5,21z M3,17h2v-2H3V17z M9,3H7v2h2V3z M11,21h2v-2h-2V21z M19,13h2v-2
h-2V13z M19,21c1.1,0,2-0.9,2-2h-2V21z M19,9h2V7h-2V9z M19,17h2v-2h-2V17z M15,21h
2v-2h-2V21z M15,5h2V3h-2V5z M7,17h10V7H7V17z M9,9h6v6H9V9z"/></g> |
| 851 <g id="send"><polygon points="2,21 23,12 2,3 2,10 17,12 2,14 "></polygon></g> |
| 852 <g id="settings"><path d="M19.4,13c0-0.3,0.1-0.6,0.1-1s0-0.7-0.1-1l2.1-1.7c0.2-0
.2,0.2-0.4,0.1-0.6l-2-3.5C19.5,5.1,19.3,5,19,5.1l-2.5,1c-0.5-0.4-1.1-0.7-1.7-1l-
0.4-2.6C14.5,2.2,14.2,2,14,2h-4C9.8,2,9.5,2.2,9.5,2.4L9.1,5.1C8.5,5.3,8,5.7,7.4,
6.1L5,5.1C4.7,5,4.5,5.1,4.3,5.3l-2,3.5C2.2,8.9,2.3,9.2,2.5,9.4L4.6,11c0,0.3-0.1,
0.6-0.1,1s0,0.7,0.1,1l-2.1,1.7c-0.2,0.2-0.2,0.4-0.1,0.6l2,3.5C4.5,18.9,4.7,19,5,
18.9l2.5-1c0.5,0.4,1.1,0.7,1.7,1l0.4,2.6c0,0.2,0.2,0.4,0.5,0.4h4c0.2,0,0.5-0.2,0
.5-0.4l0.4-2.6c0.6-0.3,1.2-0.6,1.7-1l2.5,1c0.2,0.1,0.5,0,0.6-0.2l2-3.5c0.1-0.2,0
.1-0.5-0.1-0.6L19.4,13z M12,15.5c-1.9,0-3.5-1.6-3.5-3.5s1.6-3.5,3.5-3.5s3.5,1.6,
3.5,3.5S13.9,15.5,12,15.5z"/></g> |
| 853 <g id="settings-applications"><path d="M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2
-2S13.1,10,12,10z M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V
5C21,3.9,20.1,3,19,3z M17.2,12c0,0.2,0,0.5,0,0.7l1.5,1.2c0.1,0.1,0.2,0.3,0.1,0.4
l-1.4,2.4c-0.1,0.2-0.3,0.2-0.4,0.2l-1.7-0.7c-0.4,0.3-0.8,0.5-1.2,0.7l-0.3,1.9c0,
0.2-0.2,0.3-0.3,0.3h-2.8c-0.2,0-0.3-0.1-0.3-0.3L10,16.9c-0.4-0.2-0.8-0.4-1.2-0.7
l-1.7,0.7c-0.2,0.1-0.3,0-0.4-0.2l-1.4-2.4c-0.1-0.2,0-0.3,0.1-0.4l1.5-1.2c0-0.2,0
-0.5,0-0.7s0-0.5,0-0.7l-1.5-1.2c-0.1-0.1-0.2-0.3-0.1-0.4l1.4-2.4c0.1-0.2,0.3-0.2
,0.4-0.2l1.7,0.7C9.2,7.6,9.6,7.3,10,7.1l0.3-1.9c0-0.2,0.2-0.3,0.3-0.3h2.8c0.2,0,
0.3,0.1,0.3,0.3L14,7.1c0.4,0.2,0.8,0.4,1.2,0.7l1.7-0.7c0.2-0.1,0.3,0,0.4,0.2l1.4
,2.4c0.1,0.2,0,0.3-0.1,0.4l-1.5,1.2C17.2,11.5,17.2,11.8,17.2,12z"/></g> |
| 854 <g id="settings-bluetooth"><path d="M11,24h2v-2h-2V24z M7,24h2v-2H7V24z M15,24h2
v-2h-2V24z M17.7,5.7L12,0h-1v7.6L6.4,3L5,4.4l5.6,5.6L5,15.6L6.4,17l4.6-4.6V20h1l
5.7-5.7L13.4,10L17.7,5.7z M13,3.8l1.9,1.9L13,7.6V3.8z M14.9,14.3L13,16.2v-3.8L14
.9,14.3z"/></g> |
| 855 <g id="settings-cell"><path d="M7,24h2v-2H7V24z M11,24h2v-2h-2V24z M15,24h2v-2h-
2V24z M16,0L8,0C6.9,0,6,0.9,6,2v16c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V2C18,0.9,17
.1,0,16,0z M16,16H8V4h8V16z"/></g> |
| 856 <g id="settings-phone"><path d="M13,9h-2v2h2V9z M17,9h-2v2h2V9z M20,15.5c-1.2,0-
2.4-0.2-3.6-0.6c-0.3-0.1-0.7,0-1,0.2l-2.2,2.2c-2.8-1.4-5.1-3.8-6.6-6.6l2.2-2.2c0
.3-0.3,0.4-0.7,0.2-1C8.7,6.4,8.5,5.2,8.5,4c0-0.6-0.4-1-1-1H4C3.4,3,3,3.4,3,4c0,9
.4,7.6,17,17,17c0.6,0,1-0.4,1-1v-3.5C21,15.9,20.6,15.5,20,15.5z M19,9v2h2V9H19z"
/></g> |
| 857 <g id="settings-power"><path d="M7,24h2v-2H7V24z M11,24h2v-2h-2V24z M13,2h-2v10h
2V2z M16.6,4.4l-1.4,1.4C16.8,6.9,18,8.8,18,11c0,3.3-2.7,6-6,6c-3.3,0-6-2.7-6-6c0
-2.2,1.2-4.1,2.9-5.1L7.4,4.4C5.4,5.9,4,8.3,4,11c0,4.4,3.6,8,8,8c4.4,0,8-3.6,8-8C
20,8.3,18.6,5.9,16.6,4.4z M15,24h2v-2h-2V24z"/></g> |
| 858 <g id="settings-voice"><path d="M7,24h2v-2H7V24z M12,13c1.7,0,3-1.3,3-3l0-6c0-1.
7-1.3-3-3-3c-1.7,0-3,1.3-3,3v6C9,11.7,10.3,13,12,13z M11,24h2v-2h-2V24z M15,24h2
v-2h-2V24z M19,10h-1.7c0,3-2.5,5.1-5.3,5.1c-2.8,0-5.3-2.1-5.3-5.1H5c0,3.4,2.7,6.
2,6,6.7V20h2v-3.3C16.3,16.2,19,13.4,19,10z"/></g> |
| 859 <g id="shopping-basket"><path d="M17.2,9l-4.4-6.6C12.6,2.2,12.3,2,12,2c-0.3,0-0.
6,0.1-0.8,0.4L6.8,9H2c-0.6,0-1,0.4-1,1c0,0.1,0,0.2,0,0.3l2.5,9.3c0.2,0.8,1,1.5,1
.9,1.5h13c0.9,0,1.7-0.6,1.9-1.5l2.5-9.3c0-0.1,0-0.2,0-0.3c0-0.6-0.4-1-1-1H17.2z
M9,9l3-4.4L15,9H9z M12,17c-1.1,0-2-0.9-2-2s0.9-2,2-2c1.1,0,2,0.9,2,2S13.1,17,12,
17z"/></g> |
| 860 <g id="shopping-cart"><path d="M7,18c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S
8.1,18,7,18z M1,2v2h2l3.6,7.6L5.2,14C5.1,14.3,5,14.7,5,15c0,1.1,0.9,2,2,2h12v-2H
7.4c-0.1,0-0.2-0.1-0.2-0.2c0,0,0-0.1,0-0.1L8.1,13h7.4c0.8,0,1.4-0.4,1.7-1l3.6-6.
5C21,5.3,21,5.2,21,5c0-0.6-0.4-1-1-1H5.2L4.3,2H1z M17,18c-1.1,0-2,0.9-2,2s0.9,2,
2,2c1.1,0,2-0.9,2-2S18.1,18,17,18z"/></g> |
| 861 <g id="sort"><path d="M3,18h6v-2H3V18z M3,6v2h18V6H3z M3,13h12v-2H3V13z"/></g> |
| 862 <g id="star"><polygon points="12,17.273 18.18,21 16.545,13.971 22,9.244 14.809,8
.627 12,2 9.191,8.627 2,9.244 7.455,13.971 5.82,21 "></polygon></g> |
| 863 <g id="star-half"><path d="M22,9.744l-7.191-0.617L12,2.5L9.191,9.127L2,9.744v0l0
,0l5.455,4.727L5.82,21.5L12,17.772l0,0l6.18,3.727l-1.635-7.029L22,9.744z M12,15.
896V6.595l1.71,4.036l4.38,0.376l-3.322,2.878l0.996,4.281L12,15.896z"/></g> |
| 864 <g id="star-outline"><path d="M22,9.244l-7.191-0.617L12,2L9.191,8.627L2,9.244l5.
455,4.727L5.82,21L12,17.272L18.18,21l-1.635-7.029L22,9.244z M12,15.396l-3.763,2.
27l0.996-4.281L5.91,10.507l4.38-0.376L12,6.095l1.71,4.036l4.38,0.376l-3.322,2.87
8l0.996,4.281L12,15.396z"/></g> |
| 865 <g id="star-rate"><polygon points="12,14.3 15.7,17 14.3,12.6 18,10 13.5,10 12,5.
5 10.5,10 6,10 9.7,12.6 8.3,17 "></polygon></g> |
| 866 <g id="store"><path d="M20,4H4v2h16V4z M21,14v-2l-1-5H4l-1,5v2h1v6h10v-6h4v6h2v-
6H21z M12,18H6v-4h6V18z"/></g> |
| 867 <g id="swap-driving-apps"><circle cx="6.5" cy="15.5" r="1.5"/><circle cx="17.5"
cy="15.5" r="1.5"/><path d="M18.9,7c-0.2-0.6-0.8-1-1.4-1H16H6V4L3,7l2,2l1,1V8h11
.7l1.3,4H3v9c0,0.6,0.4,1,1,1h1c0.6,0,1-0.4,1-1v-1h12v1c0,0.6,0.4,1,1,1h1c0.6,0,1
-0.4,1-1v-8L18.9,7z M6.5,17C5.7,17,5,16.3,5,15.5S5.7,14,6.5,14C7.3,14,8,14.7,8,1
5.5S7.3,17,6.5,17z M17.5,17c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5c0.8,0,1.5,0.7
,1.5,1.5S18.3,17,17.5,17z M16,0v2H8v2h8v2l3-3L16,0z"/></g> |
| 868 <g id="swap-horiz"><path d="M7,11l-4,4l4,4v-3h7v-2H7V11z M21,9l-4-4v3h-7v2h7v3L2
1,9z"/></g> |
| 869 <g id="swap-vert"><path d="M16,17v-7h-2v7h-3l4,4l4-4H16z M9,3L5,7h3v7h2V7h3L9,3z
"/></g> |
| 870 <g id="swap-vert-circle"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c5.5,0,10-4
.5,10-10S17.5,2,12,2z M6.5,9L10,5.5L13.5,9H11v4H9V9H6.5z M17.5,15L14,18.5L10.5,1
5H13v-4h2v4H17.5z"/></g> |
| 871 <g id="tab"><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2
-2V5C21,3.9,20.1,3,19,3z M19,19L5,19V5h7v4h7V19z"/></g> |
| 872 <g id="tab-unselected"><path d="M3,9h2V7H3V9z M3,13h2v-2H3V13z M3,5h2V3C3.9,3,3,
3.9,3,5z M7,21h2v-2l-2,0V21z M3,17h2v-2H3V17z M5,21v-2H3C3,20.1,3.9,21,5,21z M19
,3h-8v6h10V5C21,3.9,20.1,3,19,3z M19,17h2v-2h-2V17z M7,5h2V3H7V5z M19,21c1.1,0,2
-0.9,2-2h-2V21z M19,13h2v-2h-2V13z M11,21h2v-2l-2,0V21z M15,21h2v-2l-2,0V21z"/><
/g> |
| 873 <g id="text-format"><path d="M5,17v2h14v-2H5z M9.5,12.8h5l0.9,2.2h2.1L12.8,4h-1.
5L6.5,15h2.1L9.5,12.8z M12,6l1.9,5h-3.7L12,6z"/></g> |
| 874 <g id="theaters"><path d="M18,3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3H18z M8
,17H6v-2h2V17z M8,13H6v-2h2V13z M8,9H6V7h2V9z M18,17h-2v-2h2V17z M18,13h-2v-2h2V
13z M18,9h-2V7h2V9z"/></g> |
| 875 <g id="thumb-down"><path d="M15,3H6C5.2,3,4.5,3.5,4.2,4.2l-3,7.1C1.1,11.5,1,11.7
,1,12v1.9l0,0c0,0,0,0.1,0,0.1c0,1.1,0.9,2,2,2h6.3l-1,4.6c0,0.1,0,0.2,0,0.3c0,0.4
,0.2,0.8,0.4,1.1L9.8,23l6.6-6.6c0.4-0.4,0.6-0.9,0.6-1.4V5C17,3.9,16.1,3,15,3z M1
9,3v12h4V3H19z"/></g> |
| 876 <g id="thumb-up"><path d="M1,21h4V9H1V21z M23,10c0-1.1-0.9-2-2-2h-6.3l1-4.6c0-0.
1,0-0.2,0-0.3c0-0.4-0.2-0.8-0.4-1.1L14.2,1L7.6,7.6C7.2,7.9,7,8.4,7,9v10c0,1.1,0.
9,2,2,2h9c0.8,0,1.5-0.5,1.8-1.2l3-7.1c0.1-0.2,0.1-0.5,0.1-0.7V10L23,10C23,10.1,2
3,10,23,10z"/></g> |
| 877 <g id="today"><path d="M19,3h-1V1h-2v2H8V1H6v2H5C3.9,3,3,3.9,3,5l0,14c0,1.1,0.9,
2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,19H5V8h14V19z"/><rect x="7" y
="10" width="5" height="5"/></g> |
| 878 <g id="translate"><path d="M3,17.2V21h3.8L17.8,9.9l-3.8-3.8L3,17.2z M20.7,7c0.4-
0.4,0.4-1,0-1.4l-2.3-2.3c-0.4-0.4-1-0.4-1.4,0l-1.8,1.8l3.8,3.8L20.7,7z M12,19l-2
,2h13v-2H12z"/></g> |
| 879 <g id="undo"><path d="M12,5V1.5l-5,5l5,5V7c3.3,0,6,2.7,6,6s-2.7,6-6,6c-3.3,0-6-2
.7-6-6H4c0,4.4,3.6,8,8,8c4.4,0,8-3.6,8-8S16.4,5,12,5z"/></g> |
| 880 <g id="unfold-less"><path d="M7.4,18.6L8.8,20l3.2-3.2l3.2,3.2l1.4-1.4L12,14L7.4,
18.6z M16.6,5.4L15.2,4L12,7.2L8.8,4L7.4,5.4L12,10L16.6,5.4z"/></g> |
| 881 <g id="unfold-more"><path d="M12,5.8L15.2,9l1.4-1.4L12,3L7.4,7.6L8.8,9L12,5.8z M
12,18.2L8.8,15l-1.4,1.4L12,21l4.6-4.6L15.2,15L12,18.2z"/></g> |
| 882 <g id="view-array"><path d="M4,18h3V5H4V18z M18,5v13h3V5H18z M8,18h9V5H8V18z"/><
/g> |
| 883 <g id="view-column"><path d="M10,18h5V5h-5V18z M4,18h5V5H4V18z M16,5v13h5V5H16z"
/></g> |
| 884 <g id="view-headline"><path d="M4,15h17v-2H4V15z M4,19h17v-2H4V19z M4,11h17V9H4V
11z M4,5v2h17V5H4z"/></g> |
| 885 <g id="view-list"><path d="M4,14h4v-4H4V14z M4,19h4v-4H4V19z M4,9h4V5H4V9z M9,14
h12v-4H9V14z M9,19h12v-4H9V19z M9,5v4h12V5H9z"/></g> |
| 886 <g id="view-module"><path d="M4,11h5V5H4V11z M4,18h5v-6H4V18z M10,18h5v-6h-5V18z
M16,18h5v-6h-5V18z M10,11h5V5h-5V11z M16,5v6h5V5H16z"/></g> |
| 887 <g id="view-quilt"><path d="M10,18h5v-6h-5V18z M4,18h5V5H4V18z M16,18h5v-6h-5V18
z M10,5v6h11V5H10z"/></g> |
| 888 <g id="view-stream"><path d="M4,18h17v-6H4V18z M4,5v6h17V5H4z"/></g> |
| 889 <g id="visibility"><path d="M12,4.5C7,4.5,2.7,7.6,1,12c1.7,4.4,6,7.5,11,7.5c5,0,
9.3-3.1,11-7.5C21.3,7.6,17,4.5,12,4.5z M12,17c-2.8,0-5-2.2-5-5s2.2-5,5-5c2.8,0,5
,2.2,5,5S14.8,17,12,17z M12,9c-1.7,0-3,1.3-3,3s1.3,3,3,3c1.7,0,3-1.3,3-3S13.7,9,
12,9z"/></g> |
| 890 <g id="visibility-off"><path d="M12,7c2.8,0,5,2.2,5,5c0,0.6-0.1,1.3-0.4,1.8l2.9,
2.9c1.5-1.3,2.7-2.9,3.4-4.7c-1.7-4.4-6-7.5-11-7.5c-1.4,0-2.7,0.3-4,0.7l2.2,2.2C1
0.7,7.1,11.4,7,12,7z M2,4.3l2.3,2.3L4.7,7c-1.7,1.3-3,3-3.7,5c1.7,4.4,6,7.5,11,7.
5c1.5,0,3-0.3,4.4-0.8l0.4,0.4l2.9,2.9l1.3-1.3L3.3,3L2,4.3z M7.5,9.8l1.5,1.5C9,11
.6,9,11.8,9,12c0,1.7,1.3,3,3,3c0.2,0,0.4,0,0.7-0.1l1.5,1.5C13.5,16.8,12.8,17,12,
17c-2.8,0-5-2.2-5-5C7,11.2,7.2,10.5,7.5,9.8z M11.8,9l3.1,3.1c0-0.1,0-0.1,0-0.2c0
-1.7-1.3-3-3-3C11.9,9,11.9,9,11.8,9z"/></g> |
| 891 <g id="warning"><path d="M1,21h22L12,2L1,21z M13,18h-2v-2h2V18z M13,14h-2v-4h2V1
4z"/></g> |
| 892 <g id="work"><path d="M20,6h-4V4l-2-2h-4L8,4v2H4C2.9,6,2,6.9,2,8l0,11c0,1.1,0.9,
2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z M14,6h-4V4h4V6z"/></g> |
| 893 </defs></svg> |
| 894 </core-iconset-svg> |
| 895 |
| 896 <!-- import core-icon for convenience |
| 897 TODO(sorvell): we'd rather do this in core-iconset but we can't until |
| 898 crbug.com/373461 is addressed |
| 899 --> |
| 900 <!-- |
| 901 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 902 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 903 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 904 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 905 Code distributed by Google as part of the polymer project is also |
| 906 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 907 --> |
| 908 <!-- |
| 909 |
| 910 The `core-icon` element displays an icon using CSS background image. By default
an icon renders as 24px square. |
| 911 |
| 912 Example using src: |
| 913 |
| 914 <core-icon src="star.png"></core-icon> |
| 915 |
| 916 Example setting size to 32px x 32px: |
| 917 |
| 918 <core-icon src="big_star.png" size="32"></core-icon> |
| 919 |
| 920 Example using icon from default iconset: |
| 921 |
| 922 <core-icon icon="menu"></core-icon> |
| 923 |
| 924 Example using icon `cherry` from custom iconset `fruit`: |
| 925 |
| 926 <core-icon icon="fruit:cherry"></core-icon> |
| 927 |
| 928 See [core-iconset](#core-iconset) and [core-iconset-svg](#core-iconset-svg) for
more information about |
| 929 how to use a custom iconset. |
| 930 |
| 931 See [core-icons](#core-icons) for the default set of icons. To use the default s
et of icons you'll need to include an import for `core-icons.html`. |
| 932 |
| 933 @group Polymer Core Elements |
| 934 @element core-icon |
| 935 @homepage polymer.github.io |
| 936 --> |
| 937 |
| 938 |
| 939 <style shim-shadowdom="">/* Copyright (c) 2014 The Polymer Project Authors. All
rights reserved. |
| 940 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 941 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 942 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 943 Code distributed by Google as part of the polymer project is also |
| 944 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt */ |
| 945 |
| 946 html /deep/ core-icon { |
| 947 display: inline-block; |
| 948 vertical-align: middle; |
| 949 background-repeat: no-repeat; |
| 950 } |
| 951 |
| 952 html /deep/ core-icon[size=""] { |
| 953 position: relative; |
| 954 } |
| 955 |
| 956 html /deep/ core-icon[size=""] > svg { |
| 957 position: absolute; |
| 958 top: 0; |
| 959 right: 0; |
| 960 bottom: 0; |
| 961 left: 0; |
| 962 } |
| 963 </style> |
| 964 |
| 965 <polymer-element name="core-icon" attributes="src size icon" assetpath="../core-
icon/"> |
| 966 |
| 967 |
| 968 </polymer-element> |
| 969 |
| 970 |
| 971 <!-- |
| 972 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 973 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 974 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 975 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 976 Code distributed by Google as part of the polymer project is also |
| 977 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 978 --> |
| 979 |
| 980 <!-- |
| 981 `core-icon-button` is an icon with button behaviors. |
| 982 |
| 983 <core-icon-button src="star.png"></core-icon-button> |
| 984 |
| 985 `core-icon-button` includes a default icon set. Use `icon` to specify |
| 986 which icon from the icon set to use. |
| 987 |
| 988 <core-icon-button icon="menu"></core-icon-button> |
| 989 |
| 990 See [`core-iconset`](#core-iconset) for more information about |
| 991 how to use a custom icon set. |
| 992 |
| 993 @group Polymer Core Elements |
| 994 @element core-icon-button |
| 995 @homepage github.io |
| 996 --> |
| 997 |
| 998 |
| 999 |
| 1000 |
| 1001 <polymer-element name="core-icon-button" attributes="src icon active" assetpath=
"../core-icon-button/"> |
| 1002 |
| 1003 <template> |
| 1004 |
| 1005 <style>/* |
| 1006 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 1007 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE |
| 1008 The complete set of authors may be found at http://polymer.github.io/AUTHORS |
| 1009 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS |
| 1010 Code distributed by Google as part of the polymer project is also |
| 1011 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS |
| 1012 */ |
| 1013 |
| 1014 :host { |
| 1015 display: inline-block; |
| 1016 box-sizing: border-box; |
| 1017 -moz-box-sizing: border-box; |
| 1018 width: 38px; |
| 1019 height: 38px; |
| 1020 background-image: none; |
| 1021 border-radius: 2px; |
| 1022 padding: 7px; |
| 1023 margin: 2px; |
| 1024 vertical-align: middle; |
| 1025 font-size: 1rem; |
| 1026 cursor: pointer; |
| 1027 } |
| 1028 |
| 1029 :host([disabled]) { |
| 1030 opacity: 0.6; |
| 1031 pointer-events: none; |
| 1032 } |
| 1033 |
| 1034 :host(.outline) { |
| 1035 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); |
| 1036 } |
| 1037 |
| 1038 :host(:hover:not([disabled])) { |
| 1039 box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.1); |
| 1040 } |
| 1041 |
| 1042 :host(.selected:not([disabled])) { |
| 1043 background-color: rgba(0, 0, 0, 0.05); |
| 1044 box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.12)
; |
| 1045 } |
| 1046 |
| 1047 :host(:active:not([disabled]), .selected:active:not([disabled])) { |
| 1048 background-color: rgba(0, 0, 0, 0.05); |
| 1049 box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.12); |
| 1050 } |
| 1051 |
| 1052 :host(.core-dark-theme.outline) { |
| 1053 background-color: rgba(200, 200, 200, 0.05); |
| 1054 box-shadow: 0 0 0 1px rgba(200, 200, 200, 0.1); |
| 1055 } |
| 1056 |
| 1057 :host(.core-dark-theme:hover) { |
| 1058 background-color: rgba(200, 200, 200, 0.05); |
| 1059 box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.12), 0 0 0 1px rgba(200, 200, 200,
0.1); |
| 1060 } |
| 1061 |
| 1062 :host(.core-dark-theme.selected) { |
| 1063 background-color: rgba(220, 220, 220, 0.05); |
| 1064 box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.05), 0 0 0 1px rgba(200, 200
, 200, 0.12); |
| 1065 } |
| 1066 |
| 1067 :host(.core-dark-theme:active, .core-dark-theme.selected:active) { |
| 1068 background-color: rgba(200, 200, 200, 0.05); |
| 1069 box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.1), 0 0 0 1px rgba(200, 200,
200, 0.12); |
| 1070 } |
| 1071 |
| 1072 core-icon { |
| 1073 pointer-events: none; |
| 1074 } |
| 1075 </style> |
| 1076 |
| 1077 <core-icon src="{{src}}" icon="{{icon}}"><content></content></core-icon> |
| 1078 |
| 1079 </template> |
| 1080 |
| 1081 |
| 1082 |
| 1083 </polymer-element> |
| 1084 |
| 1085 <!-- |
| 1086 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 1087 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 1088 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 1089 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 1090 Code distributed by Google as part of the polymer project is also |
| 1091 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 1092 --> |
| 1093 |
| 1094 <!-- |
| 1095 `core-toolbar` is a horizontal bar containing elements that can be used for |
| 1096 label, navigation, search and actions. |
| 1097 |
| 1098 <core-toolbar> |
| 1099 <core-icon-button icon="menu" on-tap="{{menuAction}}"></core-icon-button> |
| 1100 <div flex>Title</div> |
| 1101 <core-icon-button icon="more" on-tap="{{moreAction}}"></core-icon-button> |
| 1102 </core-toolbar> |
| 1103 |
| 1104 `core-toolbar` has a standard height, but can made be taller by setting `tall` |
| 1105 class on the `core-toolbar`. This will make the toolbar 3x the normal height. |
| 1106 |
| 1107 <core-toolbar class="tall"> |
| 1108 <core-icon-button icon="menu"></core-icon-button> |
| 1109 </core-toolbar> |
| 1110 |
| 1111 Apply `medium-tall` class to make the toolbar medium tall. This will make the |
| 1112 toolbar 2x the normal height. |
| 1113 |
| 1114 <core-toolbar class="medium-tall"> |
| 1115 <core-icon-button icon="menu"></core-icon-button> |
| 1116 </core-toolbar> |
| 1117 |
| 1118 When taller, elements can pin to either the top (default), middle or bottom. |
| 1119 |
| 1120 <core-toolbar class="tall"> |
| 1121 <core-icon-button icon="menu"></core-icon-button> |
| 1122 <div class="middle indent">Middle Title</div> |
| 1123 <div class="bottom indent">Bottom Title</div> |
| 1124 </core-toolbar> |
| 1125 |
| 1126 To make an element completely fit at the bottom of the toolbar, use `fit` along |
| 1127 with `bottom`. |
| 1128 |
| 1129 <core-toolbar class="tall"> |
| 1130 <div id="progressBar" class="bottom fit"></div> |
| 1131 </core-toolbar> |
| 1132 |
| 1133 @group Polymer Core Elements |
| 1134 @element core-toolbar |
| 1135 @homepage github.io |
| 1136 --> |
| 1137 |
| 1138 |
| 1139 |
| 1140 <polymer-element name="core-toolbar" assetpath="../core-toolbar/"> |
| 1141 <template> |
| 1142 |
| 1143 <style>/* |
| 1144 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 1145 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 1146 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 1147 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 1148 Code distributed by Google as part of the polymer project is also |
| 1149 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 1150 */ |
| 1151 |
| 1152 :host { |
| 1153 /* technical */ |
| 1154 display: block; |
| 1155 position: relative; |
| 1156 box-sizing: border-box; |
| 1157 -moz-box-sizing: border-box; |
| 1158 /* size */ |
| 1159 height: 64px; |
| 1160 /* typography */ |
| 1161 font-size: 1.3em; |
| 1162 /* background */ |
| 1163 background-color: #CFD8DC; |
| 1164 } |
| 1165 |
| 1166 :host(.animate) { |
| 1167 /* transition */ |
| 1168 transition: height 0.18s ease-in; |
| 1169 } |
| 1170 |
| 1171 :host(.medium-tall) { |
| 1172 height: 128px; |
| 1173 } |
| 1174 |
| 1175 :host(.tall) { |
| 1176 height: 192px; |
| 1177 } |
| 1178 |
| 1179 .toolbar-tools { |
| 1180 height: 64px; |
| 1181 padding: 0 8px; |
| 1182 pointer-events: none; |
| 1183 } |
| 1184 |
| 1185 /* narrow layout */ |
| 1186 :host(.narrow) { |
| 1187 height: 56px; |
| 1188 } |
| 1189 |
| 1190 :host(.narrow.medium-tall) { |
| 1191 height: 112px; |
| 1192 } |
| 1193 |
| 1194 :host(.narrow.tall) { |
| 1195 height: 168px; |
| 1196 } |
| 1197 |
| 1198 :host(.narrow) .toolbar-tools { |
| 1199 height: 56px; |
| 1200 padding: 0; |
| 1201 } |
| 1202 |
| 1203 /* middle bar */ |
| 1204 #middleBar { |
| 1205 position: absolute; |
| 1206 top: 0; |
| 1207 right: 0; |
| 1208 left: 0; |
| 1209 } |
| 1210 |
| 1211 :host(.tall, .medium-tall) #middleBar { |
| 1212 -webkit-transform: translateY(100%); |
| 1213 transform: translateY(100%); |
| 1214 } |
| 1215 |
| 1216 /* bottom bar */ |
| 1217 #bottomBar { |
| 1218 position: absolute; |
| 1219 right: 0; |
| 1220 bottom: 0; |
| 1221 left: 0; |
| 1222 } |
| 1223 |
| 1224 /* shows bottom bar only when in normal height (!tall && !medium-tall) */ |
| 1225 :host(.animate.no-overlap) > #topBar, |
| 1226 :host(.animate.no-overlap) > #middleBar { |
| 1227 transition: -webkit-transform 0.18s ease-in; |
| 1228 transition: transform 0.18s ease-in; |
| 1229 } |
| 1230 |
| 1231 :host(.no-overlap:not(.medium-tall):not(.tall)) > #topBar { |
| 1232 -webkit-transform: translateY(-100%); |
| 1233 transform: translateY(-100%); |
| 1234 } |
| 1235 |
| 1236 :host(.no-overlap:not(.medium-tall):not(.tall)) > #middleBar { |
| 1237 -webkit-transform: translateY(-200%); |
| 1238 transform: translateY(-200%); |
| 1239 } |
| 1240 |
| 1241 /* make elements (e.g. buttons) respond to mouse/touch events */ |
| 1242 polyfill-next-selector { content: '.toolbar-tools > *'; } |
| 1243 ::content > * { |
| 1244 pointer-events: auto; |
| 1245 } |
| 1246 |
| 1247 /* elements spacing */ |
| 1248 polyfill-next-selector { content: '.toolbar-tools > *'; } |
| 1249 ::content > * { |
| 1250 margin: 0px 8px; |
| 1251 } |
| 1252 |
| 1253 /* misc helpers */ |
| 1254 polyfill-next-selector { content: '.toolbar-tools > .fit'; } |
| 1255 ::content > .fit { |
| 1256 position: absolute; |
| 1257 top: auto; |
| 1258 right: 0; |
| 1259 bottom: 0; |
| 1260 left: 0; |
| 1261 width: auto; |
| 1262 margin: 0; |
| 1263 } |
| 1264 |
| 1265 polyfill-next-selector { content: ':host .indent'; } |
| 1266 ::content > .indent { |
| 1267 margin-left: 60px; |
| 1268 } |
| 1269 </style> |
| 1270 |
| 1271 <div id="bottomBar" class="toolbar-tools" center="" horizontal="" layout=""> |
| 1272 <content select=".bottom"></content> |
| 1273 </div> |
| 1274 |
| 1275 <div id="middleBar" class="toolbar-tools" center="" horizontal="" layout=""> |
| 1276 <content select=".middle"></content> |
| 1277 </div> |
| 1278 |
| 1279 <div id="topBar" class="toolbar-tools" center="" horizontal="" layout=""> |
| 1280 <content></content> |
| 1281 </div> |
| 1282 |
| 1283 </template> |
| 1284 </polymer-element> |
| 1285 |
| 1286 <!-- |
| 1287 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 1288 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 1289 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 1290 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 1291 Code distributed by Google as part of the polymer project is also |
| 1292 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 1293 --> |
| 1294 |
| 1295 <!-- |
| 1296 `core-header-panel` contains a header section and a content panel section. |
| 1297 |
| 1298 __Important:__ The `core-header-panel` will not display if its parent does not h
ave a height. |
| 1299 |
| 1300 Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-att
rs.html), you can easily make the `core-header-panel` fill the screen |
| 1301 |
| 1302 <body fullbleed layout vertical> |
| 1303 <core-header-panel flex> |
| 1304 <core-toolbar> |
| 1305 <div>Hello World!</div> |
| 1306 </core-toolbar> |
| 1307 </core-header-panel> |
| 1308 </body> |
| 1309 |
| 1310 or, if you would prefer to do it in CSS, just give `html`, `body`, and `core-hea
der-panel` a height of 100%: |
| 1311 |
| 1312 html, body { |
| 1313 height: 100%; |
| 1314 margin: 0; |
| 1315 } |
| 1316 core-header-panel { |
| 1317 height: 100%; |
| 1318 } |
| 1319 |
| 1320 Special |
| 1321 support is provided for scrolling modes when one uses a core-toolbar or equivale
nt |
| 1322 for the header section. |
| 1323 |
| 1324 Example: |
| 1325 |
| 1326 <core-header-panel> |
| 1327 <core-toolbar>Header</core-toolbar> |
| 1328 <div>Content goes here...</div> |
| 1329 </core-header-panel> |
| 1330 |
| 1331 If you want to use other than `core-toolbar` for the header, add |
| 1332 `core-header` class to that element. |
| 1333 |
| 1334 Example: |
| 1335 |
| 1336 <core-header-panel> |
| 1337 <div class="core-header">Header</div> |
| 1338 <div>Content goes here...</div> |
| 1339 </core-header-panel> |
| 1340 |
| 1341 Use `mode` to control the header and scrolling behavior. |
| 1342 |
| 1343 @group Polymer Core Elements |
| 1344 @element core-header-panel |
| 1345 @homepage github.io |
| 1346 --> |
| 1347 |
| 1348 |
| 1349 |
| 1350 <polymer-element name="core-header-panel" assetpath="../core-header-panel/"> |
| 1351 <template> |
| 1352 |
| 1353 <style>/* |
| 1354 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 1355 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 1356 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 1357 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 1358 Code distributed by Google as part of the polymer project is also |
| 1359 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 1360 */ |
| 1361 |
| 1362 :host { |
| 1363 display: block; |
| 1364 position: relative; |
| 1365 } |
| 1366 |
| 1367 #outerContainer { |
| 1368 position: absolute; |
| 1369 top: 0; |
| 1370 right: 0; |
| 1371 bottom: 0; |
| 1372 left: 0; |
| 1373 overflow-y: auto; |
| 1374 overflow-x: hidden; |
| 1375 -webkit-overflow-scrolling: touch; |
| 1376 } |
| 1377 |
| 1378 #mainPanel { |
| 1379 position: relative; |
| 1380 } |
| 1381 |
| 1382 #mainContainer { |
| 1383 position: relative; |
| 1384 overflow-y: auto; |
| 1385 overflow-x: hidden; |
| 1386 -webkit-overflow-scrolling: touch; |
| 1387 } |
| 1388 |
| 1389 #dropShadow { |
| 1390 position: absolute; |
| 1391 top: 0; |
| 1392 left: 0; |
| 1393 right: 0; |
| 1394 height: 6px; |
| 1395 box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4); |
| 1396 } |
| 1397 |
| 1398 #dropShadow.hidden { |
| 1399 display: none; |
| 1400 } |
| 1401 |
| 1402 /* |
| 1403 mode: scroll |
| 1404 */ |
| 1405 :host([mode=scroll]) #mainContainer { |
| 1406 overflow: visible; |
| 1407 } |
| 1408 |
| 1409 /* |
| 1410 mode: cover |
| 1411 */ |
| 1412 :host([mode=cover]) #mainPanel { |
| 1413 position: static; |
| 1414 } |
| 1415 |
| 1416 :host([mode=cover]) #mainContainer { |
| 1417 position: absolute; |
| 1418 top: 0; |
| 1419 right: 0; |
| 1420 bottom: 0; |
| 1421 left: 0; |
| 1422 } |
| 1423 |
| 1424 :host([mode=cover]) #dropShadow { |
| 1425 position: static; |
| 1426 width: 100%; |
| 1427 } |
| 1428 </style> |
| 1429 |
| 1430 <div id="outerContainer" on-scroll="{{scroll}}" vertical="" layout=""> |
| 1431 |
| 1432 <content id="headerContent" select="core-toolbar, .core-header"></content> |
| 1433 |
| 1434 <div id="mainPanel" flex="" vertical="" layout=""> |
| 1435 |
| 1436 <div id="mainContainer" flex?="{{mode !== 'cover'}}" on-scroll="
{{scroll}}"> |
| 1437 <content id="mainContent" select="*"></content> |
| 1438 </div> |
| 1439 |
| 1440 <div id="dropShadow"></div> |
| 1441 |
| 1442 </div> |
| 1443 |
| 1444 </div> |
| 1445 |
| 1446 </template> |
| 1447 |
| 1448 </polymer-element> |
| 1449 |
| 1450 <!-- |
| 1451 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 1452 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 1453 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 1454 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 1455 Code distributed by Google as part of the polymer project is also |
| 1456 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 1457 --> |
| 1458 |
| 1459 |
| 1460 |
| 1461 |
| 1462 |
| 1463 <!-- |
| 1464 Element wrapper for the `marked` (http://marked.org/) library. |
| 1465 |
| 1466 @class marked-element |
| 1467 @blurb Element wrapper for the marked library. |
| 1468 @status alpha |
| 1469 @snap snap.png |
| 1470 --> |
| 1471 <polymer-element name="marked-element" attributes="text" assetpath="../marked-el
ement/"> |
| 1472 |
| 1473 </polymer-element> |
| 1474 |
| 1475 |
| 1476 |
| 1477 |
| 1478 |
| 1479 <!-- |
| 1480 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 1481 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 1482 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 1483 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 1484 Code distributed by Google as part of the polymer project is also |
| 1485 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 1486 --> |
| 1487 |
| 1488 <!-- |
| 1489 @group Polymer Core Elements |
| 1490 |
| 1491 The `core-ajax` element exposes `XMLHttpRequest` functionality. |
| 1492 |
| 1493 <core-ajax |
| 1494 auto |
| 1495 url="http://gdata.youtube.com/feeds/api/videos/" |
| 1496 params='{"alt":"json", "q":"chrome"}' |
| 1497 handleAs="json" |
| 1498 on-core-response="{{handleResponse}}"></core-ajax> |
| 1499 |
| 1500 With `auto` set to `true`, the element performs a request whenever |
| 1501 its `url` or `params` properties are changed. |
| 1502 |
| 1503 Note: The `params` attribute must be double quoted JSON. |
| 1504 |
| 1505 You can trigger a request explicitly by calling `go` on the |
| 1506 element. |
| 1507 |
| 1508 @element core-ajax |
| 1509 @status beta |
| 1510 @homepage github.io |
| 1511 --> |
| 1512 <!-- |
| 1513 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 1514 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 1515 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 1516 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 1517 Code distributed by Google as part of the polymer project is also |
| 1518 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 1519 --> |
| 1520 <!-- |
| 1521 /** |
| 1522 * @group Polymer Core Elements |
| 1523 * |
| 1524 * core-xhr can be used to perform XMLHttpRequests. |
| 1525 * |
| 1526 * <core-xhr id="xhr"></core-xhr> |
| 1527 * ... |
| 1528 * this.$.xhr.request({url: url, params: params, callback: callback}); |
| 1529 * |
| 1530 * @element core-xhr |
| 1531 */ |
| 1532 --> |
| 1533 |
| 1534 |
| 1535 |
| 1536 <polymer-element name="core-xhr" hidden assetpath="../core-ajax/"> |
| 1537 |
| 1538 |
| 1539 |
| 1540 </polymer-element> |
| 1541 |
| 1542 <polymer-element name="core-ajax" attributes="url handleAs auto params response
method headers body contentType withCredentials" assetpath="../core-ajax/"> |
| 1543 |
| 1544 </polymer-element> |
| 1545 |
| 1546 |
| 1547 <!-- |
| 1548 Scrapes source documentation data from input text or url. |
| 1549 |
| 1550 @class context-free-parser |
| 1551 --> |
| 1552 <polymer-element name="context-free-parser" attributes="url text data" assetpath
="../context-free-parser/"> |
| 1553 <template> |
| 1554 |
| 1555 <core-ajax url="{{url}}" response="{{text}}" auto=""></core-ajax> |
| 1556 |
| 1557 </template> |
| 1558 |
| 1559 </polymer-element> |
| 1560 |
| 1561 |
| 1562 <!-- |
| 1563 |
| 1564 Displays formatted source documentation scraped from input urls. |
| 1565 |
| 1566 @element core-doc-page |
| 1567 --> |
| 1568 |
| 1569 <polymer-element name="core-doc-page" attributes="data" assetpath="../core-doc-v
iewer/elements/"> |
| 1570 |
| 1571 <!-- |
| 1572 |
| 1573 Set url to add documentation from that location to the view. |
| 1574 |
| 1575 @attribute url |
| 1576 @type String |
| 1577 --> |
| 1578 |
| 1579 <template> |
| 1580 |
| 1581 <style>:host { |
| 1582 display: block; |
| 1583 position: relative; |
| 1584 } |
| 1585 |
| 1586 #panel { |
| 1587 position: absolute; |
| 1588 top: 0; |
| 1589 left: 0; |
| 1590 height: 100%; |
| 1591 width: 100%; |
| 1592 } |
| 1593 |
| 1594 .main { |
| 1595 padding: 0 72px; |
| 1596 max-width: 832px; |
| 1597 margin: 0 auto; |
| 1598 } |
| 1599 |
| 1600 markedjs-element { |
| 1601 display: block; |
| 1602 } |
| 1603 |
| 1604 h1 { |
| 1605 font-size: 52px; |
| 1606 color: #E91E63 |
| 1607 } |
| 1608 |
| 1609 .element { |
| 1610 font-size: 21px; |
| 1611 } |
| 1612 |
| 1613 .name { |
| 1614 /* typography */ |
| 1615 color: white; |
| 1616 /* font-size: 14px; */ |
| 1617 font-size: 12px; |
| 1618 font-weight: bold; |
| 1619 text-decoration: none; |
| 1620 /* colors / effects */ |
| 1621 background-color: #999; |
| 1622 box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1); |
| 1623 box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1); |
| 1624 border-radius: 2px; |
| 1625 cursor: pointer; |
| 1626 /* metrics */ |
| 1627 display: inline-block; |
| 1628 padding: 4px 12px 5px 12px; |
| 1629 margin: 4px 0; |
| 1630 } |
| 1631 |
| 1632 .ntitle { |
| 1633 font-size: 26px; |
| 1634 padding-bottom: 4px; |
| 1635 border-bottom: 1px solid whitesmoke; |
| 1636 } |
| 1637 |
| 1638 .box { |
| 1639 margin-bottom: 40px; |
| 1640 } |
| 1641 |
| 1642 .top pre { |
| 1643 padding: 12px 13px; |
| 1644 background-color: #f8f8f8; |
| 1645 } |
| 1646 |
| 1647 code { |
| 1648 font-family: Consolas, monospace; |
| 1649 border: 1px solid #ddd; |
| 1650 background-color: #f8f8f8; |
| 1651 border-radius: 3px; |
| 1652 padding: 0 3px; |
| 1653 } |
| 1654 |
| 1655 pre code { |
| 1656 max-width: 832px; |
| 1657 white-space: pre-wrap; |
| 1658 overflow: hidden; |
| 1659 border: none; |
| 1660 } |
| 1661 |
| 1662 /**/ |
| 1663 |
| 1664 .details { |
| 1665 display: flex; |
| 1666 } |
| 1667 |
| 1668 .details-name { |
| 1669 flex: 1; |
| 1670 } |
| 1671 |
| 1672 .details-info { |
| 1673 flex: 2; |
| 1674 } |
| 1675 |
| 1676 .attribute-box { |
| 1677 } |
| 1678 |
| 1679 .attribute-box .details { |
| 1680 background-color: #FFF9C4; |
| 1681 padding: 8px 16px; |
| 1682 border-bottom: 1px solid #D1CCA1; |
| 1683 } |
| 1684 |
| 1685 .attribute-box .ntitle { |
| 1686 padding: 24px 16px; |
| 1687 } |
| 1688 |
| 1689 .attribute-box code { |
| 1690 color: #FFAB40; |
| 1691 border: none; |
| 1692 background-color: transparent; |
| 1693 border-radius: none; |
| 1694 padding: 0; |
| 1695 font-size: 1.2em; |
| 1696 } |
| 1697 |
| 1698 .property-box .ntitle { |
| 1699 padding: 24px 16px; |
| 1700 } |
| 1701 |
| 1702 .property-box code { |
| 1703 color: #4285F4; |
| 1704 border: none; |
| 1705 background-color: transparent; |
| 1706 border-radius: none; |
| 1707 padding: 0; |
| 1708 font-size: 1.2em; |
| 1709 } |
| 1710 |
| 1711 .property-box .details { |
| 1712 background-color: lightblue; |
| 1713 padding: 8px 16px; |
| 1714 border-bottom: 1px solid #D1CCA1; |
| 1715 } |
| 1716 |
| 1717 .method-box { |
| 1718 } |
| 1719 |
| 1720 .method-box .details { |
| 1721 background-color: #F0F4C3; |
| 1722 padding: 8px 16px; |
| 1723 border-bottom: 1px solid #D1CCA1; |
| 1724 } |
| 1725 |
| 1726 .method-box .ntitle { |
| 1727 background-color: #9E9D24; |
| 1728 padding: 24px 16px; |
| 1729 } |
| 1730 |
| 1731 .method-box code { |
| 1732 color: #9E9D24; |
| 1733 border: none; |
| 1734 background-color: transparent; |
| 1735 border-radius: none; |
| 1736 padding: 0; |
| 1737 font-size: 1.2em; |
| 1738 } |
| 1739 |
| 1740 .event-box { |
| 1741 } |
| 1742 |
| 1743 .event-box .details { |
| 1744 background-color: #B2DFDB; |
| 1745 padding: 8px 16px; |
| 1746 border-bottom: 1px solid #92B7B3; |
| 1747 } |
| 1748 |
| 1749 .event-box .ntitle { |
| 1750 background-color: #009688; |
| 1751 padding: 24px 16px; |
| 1752 } |
| 1753 |
| 1754 .event-box code { |
| 1755 color: #009688; |
| 1756 border: none; |
| 1757 background-color: transparent; |
| 1758 border-radius: none; |
| 1759 padding: 0; |
| 1760 font-size: 1.2em; |
| 1761 } |
| 1762 |
| 1763 code, pre { |
| 1764 color: #9f499b; |
| 1765 font-family: "Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace; |
| 1766 } |
| 1767 |
| 1768 pre .typ,pre .inline,.prettyprint .typ,.prettyprint .inline { |
| 1769 color: #6b499f |
| 1770 } |
| 1771 pre .pun,.prettyprint .pun { |
| 1772 color: #5c6bc0 |
| 1773 } |
| 1774 pre .str,pre .string,.prettyprint .str,.prettyprint .string { |
| 1775 color: #ff4081 |
| 1776 } |
| 1777 pre .pln,.prettyprint .pln { |
| 1778 color: #7986cb |
| 1779 } |
| 1780 pre .kwd,.prettyprint .kwd { |
| 1781 color: #d61a7f |
| 1782 } |
| 1783 pre .atn,pre .attribute-name,.prettyprint .atn,.prettyprint .attribute-name { |
| 1784 color: #6b499f |
| 1785 } |
| 1786 pre .atv,pre .attribute-value,.prettyprint .atv,.prettyprint .attribute-value { |
| 1787 color: #7986cb |
| 1788 } |
| 1789 pre .com,pre .comment,.prettyprint .com,.prettyprint .comment { |
| 1790 color: #8a8a8a |
| 1791 }</style> |
| 1792 |
| 1793 <core-header-panel id="panel" mode="waterfall"> |
| 1794 |
| 1795 <!--<core-toolbar> |
| 1796 <span style="margin: 0 72px;">{{data.name}}</span> |
| 1797 </core-toolbar>--> |
| 1798 |
| 1799 <div class="main" on-marked-js-highlight="{{hilight}}"> |
| 1800 |
| 1801 <h1 style="font-size: 52px; color: #E91E63;"> |
| 1802 {{data.name}} |
| 1803 </h1> |
| 1804 |
| 1805 <p> |
| 1806 <core-icon icon="home"></core-icon> <a href="{{data | homepageFil
ter}}">Home Page</a> |
| 1807 </p> |
| 1808 |
| 1809 <template if="{{data.extends}}"> |
| 1810 <section class="box"> |
| 1811 <div class="ntitle">Extends</div> |
| 1812 <p><a href="#{{data.extends}}">{{data.extends}}</a></p> |
| 1813 </section> |
| 1814 </template> |
| 1815 |
| 1816 <template if="{{data.description}}"> |
| 1817 <section class="box top"> |
| 1818 <div class="ntitle">Summary</div> |
| 1819 <marked-element text="{{data.description}}"></marked-element> |
| 1820 </section> |
| 1821 </template> |
| 1822 |
| 1823 <template if="{{data.attributes.length}}"> |
| 1824 <section class="box attribute-box"> |
| 1825 <div class="ntitle" style="background-color: #FFAB40; color: white;"
>Attributes</div> |
| 1826 <template repeat="{{data.attributes}}"> |
| 1827 <div class="details"> |
| 1828 <div class="details-name"> |
| 1829 <p><code>{{name}}</code></p> |
| 1830 </div> |
| 1831 <div class="details-info"> |
| 1832 <p><code>{{type}}</code></p> |
| 1833 <marked-element text="{{description}}"></marked-element> |
| 1834 </div> |
| 1835 </div> |
| 1836 </template> |
| 1837 </section> |
| 1838 </template> |
| 1839 |
| 1840 <template if="{{data.properties.length}}"> |
| 1841 <section class="box property-box"> |
| 1842 <div class="ntitle" style="background-color: #4285F4; color: white;"
>Properties</div> |
| 1843 <template repeat="{{data.properties}}"> |
| 1844 <div class="details"> |
| 1845 <div class="details-name"> |
| 1846 <p><code>{{name}}</code></p> |
| 1847 </div> |
| 1848 <div class="details-info"> |
| 1849 <p><code>{{type}}</code></p> |
| 1850 <marked-element text="{{description}}"></marked-element> |
| 1851 </div> |
| 1852 </div> |
| 1853 </template> |
| 1854 </section> |
| 1855 </template> |
| 1856 |
| 1857 <template if="{{data.events.length}}"> |
| 1858 <section class="box event-box"> |
| 1859 <div class="ntitle" style="color: white;">Events</div> |
| 1860 <template repeat="{{data.events}}"> |
| 1861 <div class="details"> |
| 1862 <div class="details-name"> |
| 1863 <p><code>{{name}}</code></p> |
| 1864 </div> |
| 1865 <div class="details-info"> |
| 1866 <marked-element text="{{description}}"></marked-element> |
| 1867 </div> |
| 1868 </div> |
| 1869 </template> |
| 1870 </section> |
| 1871 </template> |
| 1872 |
| 1873 <template if="{{data.methods.length}}"> |
| 1874 <section class="box method-box"> |
| 1875 <div class="ntitle" style="color: white;">Methods</div> |
| 1876 <template repeat="{{data.methods}}"> |
| 1877 <div class="details"> |
| 1878 <div class="details-name"> |
| 1879 <p><code>{{name}}</code></p> |
| 1880 </div> |
| 1881 <div class="details-info"> |
| 1882 <marked-element text="{{description}}"></marked-element> |
| 1883 </div> |
| 1884 </div> |
| 1885 </template> |
| 1886 </section> |
| 1887 </template> |
| 1888 |
| 1889 </div> |
| 1890 |
| 1891 </core-header-panel> |
| 1892 |
| 1893 </template> |
| 1894 |
| 1895 |
| 1896 |
| 1897 </polymer-element> |
| 1898 |
| 1899 |
| 1900 |
| 1901 |
| 1902 <!-- |
| 1903 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 1904 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 1905 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 1906 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 1907 Code distributed by Google as part of the polymer project is also |
| 1908 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 1909 --> |
| 1910 |
| 1911 <!-- |
| 1912 `core-menu` is a selector which styles to looks like a menu. |
| 1913 |
| 1914 <core-menu selected="0"> |
| 1915 <core-item icon="settings" label="Settings"></core-item> |
| 1916 <core-item icon="dialog" label="Dialog"></core-item> |
| 1917 <core-item icon="search" label="Search"></core-item> |
| 1918 </core-menu> |
| 1919 |
| 1920 When an item is selected the `core-selected` class is added to it. The user can |
| 1921 use the class to add more stylings to the selected item. |
| 1922 |
| 1923 core-item.core-selected { |
| 1924 color: red; |
| 1925 } |
| 1926 |
| 1927 The `selectedItem` property references the selected item. |
| 1928 |
| 1929 <core-menu selected="0" selectedItem="{{item}}"> |
| 1930 <core-item icon="settings" label="Settings"></core-item> |
| 1931 <core-item icon="dialog" label="Dialog"></core-item> |
| 1932 <core-item icon="search" label="Search"></core-item> |
| 1933 </core-menu> |
| 1934 |
| 1935 <div>selected label: {{item.label}}</div> |
| 1936 |
| 1937 The `core-select` event signals selection change. |
| 1938 |
| 1939 <core-menu selected="0" on-core-select="{{selectAction}}"> |
| 1940 <core-item icon="settings" label="Settings"></core-item> |
| 1941 <core-item icon="dialog" label="Dialog"></core-item> |
| 1942 <core-item icon="search" label="Search"></core-item> |
| 1943 </core-menu> |
| 1944 |
| 1945 ... |
| 1946 |
| 1947 selectAction: function(e, detail) { |
| 1948 if (detail.isSelected) { |
| 1949 var selectedItem = detail.item; |
| 1950 ... |
| 1951 } |
| 1952 } |
| 1953 |
| 1954 @group Polymer Core Elements |
| 1955 @element core-menu |
| 1956 @extends core-selector |
| 1957 --> |
| 1958 |
| 1959 <!-- |
| 1960 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 1961 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 1962 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 1963 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 1964 Code distributed by Google as part of the polymer project is also |
| 1965 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 1966 --> |
| 1967 |
| 1968 <!-- |
| 1969 @group Polymer Core Elements |
| 1970 |
| 1971 `<core-selector>` is used to manage a list of elements that can be selected. |
| 1972 |
| 1973 The attribute `selected` indicates which item element is being selected. |
| 1974 The attribute `multi` indicates if multiple items can be selected at once. |
| 1975 Tapping on the item element would fire `core-activate` event. Use |
| 1976 `core-select` event to listen for selection changes. |
| 1977 |
| 1978 Example: |
| 1979 |
| 1980 <core-selector selected="0"> |
| 1981 <div>Item 1</div> |
| 1982 <div>Item 2</div> |
| 1983 <div>Item 3</div> |
| 1984 </core-selector> |
| 1985 |
| 1986 `<core-selector>` is not styled. Use the `core-selected` CSS class to style the
selected element. |
| 1987 |
| 1988 <style> |
| 1989 .item.core-selected { |
| 1990 background: #eee; |
| 1991 } |
| 1992 </style> |
| 1993 ... |
| 1994 <core-selector> |
| 1995 <div class="item">Item 1</div> |
| 1996 <div class="item">Item 2</div> |
| 1997 <div class="item">Item 3</div> |
| 1998 </core-selector> |
| 1999 |
| 2000 @element core-selector |
| 2001 @status stable |
| 2002 @homepage github.io |
| 2003 --> |
| 2004 |
| 2005 <!-- |
| 2006 Fired when an item's selection state is changed. This event is fired both |
| 2007 when an item is selected or deselected. The `isSelected` detail property |
| 2008 contains the selection state. |
| 2009 |
| 2010 @event core-select |
| 2011 @param {Object} detail |
| 2012 @param {boolean} detail.isSelected true for selection and false for deselectio
n |
| 2013 @param {Object} detail.item the item element |
| 2014 --> |
| 2015 <!-- |
| 2016 Fired when an item element is tapped. |
| 2017 |
| 2018 @event core-activate |
| 2019 @param {Object} detail |
| 2020 @param {Object} detail.item the item element |
| 2021 --> |
| 2022 |
| 2023 |
| 2024 <!-- |
| 2025 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 2026 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 2027 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 2028 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 2029 Code distributed by Google as part of the polymer project is also |
| 2030 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 2031 --> |
| 2032 <!-- |
| 2033 @group Polymer Core Elements |
| 2034 |
| 2035 The `<core-selection>` element is used to manage selection state. It has no |
| 2036 visual appearance and is typically used in conjunction with another element. |
| 2037 For example, [core-selector](#core-selector) |
| 2038 use a `<core-selection>` to manage selection. |
| 2039 |
| 2040 To mark an item as selected, call the `select(item)` method on |
| 2041 `<core-selection>`. The item itself is an argument to this method. |
| 2042 |
| 2043 The `<core-selection>`element manages selection state for any given set of |
| 2044 items. When an item is selected, the `core-select` event is fired. |
| 2045 |
| 2046 The attribute `multi` indicates if multiple items can be selected at once. |
| 2047 |
| 2048 Example: |
| 2049 |
| 2050 <polymer-element name="selection-example"> |
| 2051 <template> |
| 2052 <style> |
| 2053 polyfill-next-selector { content: ':host > .selected'; } |
| 2054 ::content > .selected { |
| 2055 font-weight: bold; |
| 2056 font-style: italic; |
| 2057 } |
| 2058 </style> |
| 2059 <ul on-tap="{{itemTapAction}}"> |
| 2060 <content></content> |
| 2061 </ul> |
| 2062 <core-selection id="selection" multi |
| 2063 on-core-select="{{selectAction}}"></core-selection> |
| 2064 </template> |
| 2065 <script> |
| 2066 Polymer('selection-example', { |
| 2067 itemTapAction: function(e, detail, sender) { |
| 2068 this.$.selection.select(e.target); |
| 2069 }, |
| 2070 selectAction: function(e, detail, sender) { |
| 2071 detail.item.classList.toggle('selected', detail.isSelected); |
| 2072 } |
| 2073 }); |
| 2074 </script> |
| 2075 </polymer-element> |
| 2076 |
| 2077 <selection-example> |
| 2078 <li>Red</li> |
| 2079 <li>Green</li> |
| 2080 <li>Blue</li> |
| 2081 </selection-example> |
| 2082 |
| 2083 @element core-selection |
| 2084 --> |
| 2085 |
| 2086 <!-- |
| 2087 Fired when an item's selection state is changed. This event is fired both |
| 2088 when an item is selected or deselected. The `isSelected` detail property |
| 2089 contains the selection state. |
| 2090 |
| 2091 @event core-select |
| 2092 @param {Object} detail |
| 2093 @param {boolean} detail.isSelected true for selection and false for de-selecti
on |
| 2094 @param {Object} detail.item the item element |
| 2095 --> |
| 2096 |
| 2097 |
| 2098 <polymer-element name="core-selection" attributes="multi" hidden assetpath="../c
ore-selection/"> |
| 2099 |
| 2100 </polymer-element> |
| 2101 |
| 2102 |
| 2103 <polymer-element name="core-selector" attributes="selected multi valueattr selec
tedClass selectedProperty selectedAttribute selectedItem selectedModel selectedI
ndex notap target itemsSelector activateEvent" assetpath="../core-selector/"> |
| 2104 |
| 2105 <template> |
| 2106 <core-selection id="selection" multi="{{multi}}" on-core-select="{{selection
Select}}"></core-selection> |
| 2107 <content id="items" select="*"></content> |
| 2108 </template> |
| 2109 |
| 2110 |
| 2111 </polymer-element> |
| 2112 |
| 2113 |
| 2114 <style shim-shadowdom="">/* |
| 2115 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 2116 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 2117 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 2118 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 2119 Code distributed by Google as part of the polymer project is also |
| 2120 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 2121 */ |
| 2122 |
| 2123 html /deep/ core-menu { |
| 2124 display: block; |
| 2125 margin: 12px; |
| 2126 } |
| 2127 |
| 2128 polyfill-next-selector { content: 'core-menu > core-item'; } |
| 2129 html /deep/ core-menu::shadow ::content > core-item { |
| 2130 cursor: default; |
| 2131 } |
| 2132 </style> |
| 2133 |
| 2134 <polymer-element name="core-menu" extends="core-selector" assetpath="../core-men
u/"> |
| 2135 |
| 2136 </polymer-element> |
| 2137 |
| 2138 <!-- |
| 2139 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 2140 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 2141 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 2142 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 2143 Code distributed by Google as part of the polymer project is also |
| 2144 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 2145 --> |
| 2146 |
| 2147 <!-- |
| 2148 `core-item` is a simple line-item object: a label and/or an icon that can also |
| 2149 act as a link. |
| 2150 |
| 2151 Example: |
| 2152 |
| 2153 <core-item icon="settings" label="Settings"></core-item> |
| 2154 |
| 2155 To use as a link, put <a> element in the item. |
| 2156 |
| 2157 Example: |
| 2158 |
| 2159 <core-item icon="settings" label="Settings"> |
| 2160 <a href="#settings" target="_self"></a> |
| 2161 </core-item> |
| 2162 |
| 2163 @group Polymer Core Elements |
| 2164 @element core-item |
| 2165 @homepage github.io |
| 2166 --> |
| 2167 |
| 2168 |
| 2169 |
| 2170 <style shim-shadowdom="">/* |
| 2171 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 2172 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 2173 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 2174 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 2175 Code distributed by Google as part of the polymer project is also |
| 2176 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 2177 */ |
| 2178 |
| 2179 html /deep/ core-item { |
| 2180 display: block; |
| 2181 position: relative; |
| 2182 min-height: 40px; |
| 2183 white-space: nowrap; |
| 2184 } |
| 2185 |
| 2186 html /deep/ core-item.core-selected { |
| 2187 font-weight: bold; |
| 2188 } |
| 2189 |
| 2190 html /deep/ core-item::shadow core-icon { |
| 2191 margin: 0 16px 0 4px; |
| 2192 } |
| 2193 |
| 2194 html /deep/ core-item::shadow ::content > a { |
| 2195 position: absolute; |
| 2196 top: 0; |
| 2197 right: 0; |
| 2198 bottom: 0; |
| 2199 left: 0; |
| 2200 } |
| 2201 </style> |
| 2202 |
| 2203 <polymer-element name="core-item" attributes="label icon src" horizontal="" cent
er="" layout="" assetpath="../core-item/"> |
| 2204 <template> |
| 2205 |
| 2206 <core-icon src="{{src}}" icon="{{icon}}" hidden?="{{!src && !icon}}"><
/core-icon>{{label}}<content></content> |
| 2207 |
| 2208 </template> |
| 2209 |
| 2210 </polymer-element> |
| 2211 |
| 2212 |
| 2213 <!-- |
| 2214 @class core-doc-toc |
| 2215 --> |
| 2216 |
| 2217 <polymer-element name="core-doc-toc" attributes="data selected" assetpath="../co
re-doc-viewer/elements/"> |
| 2218 |
| 2219 <template> |
| 2220 |
| 2221 <style>:host { |
| 2222 display: block; |
| 2223 position: relative; |
| 2224 border-right: 1px solid silver; |
| 2225 } |
| 2226 |
| 2227 core-header-panel { |
| 2228 position: absolute; |
| 2229 top: 0; |
| 2230 left: 0; |
| 2231 height: 100%; |
| 2232 width: 100%; |
| 2233 } |
| 2234 |
| 2235 core-toolbar { |
| 2236 background-color: #eeeeee; |
| 2237 } |
| 2238 </style> |
| 2239 |
| 2240 <core-header-panel mode="waterfall"> |
| 2241 |
| 2242 <!-- <core-toolbar theme="core-light-theme"> |
| 2243 <core-icon-button icon="menu"></core-icon-button> |
| 2244 <span core-flex>Topics</span> |
| 2245 <core-icon-button icon="search" on-tap="{{searchAction}}"></core-icon-bu
tton> |
| 2246 </core-toolbar> |
| 2247 |
| 2248 <core-toolbar id="searchBar" style="background-color: #C2185B; position: a
bsolute; top: 0; left: 0; right: 0; opacity: 0; display: none;" class="seamed" t
heme="core-dark-theme"> |
| 2249 <core-icon-button icon="search"></core-icon-button> |
| 2250 <core-icon-button icon="close" on-tap="{{closeSearchAction}}"></core-ico
n-button> |
| 2251 </core-toolbar>--> |
| 2252 |
| 2253 <core-menu selected="{{selected}}"> |
| 2254 <template repeat="{{data}}"> |
| 2255 <core-item><a href="#{{name}}">{{name}}</a></core-item> |
| 2256 </template> |
| 2257 </core-menu> |
| 2258 |
| 2259 </core-header-panel> |
| 2260 |
| 2261 </template> |
| 2262 |
| 2263 |
| 2264 |
| 2265 </polymer-element> |
| 2266 |
| 2267 |
| 2268 |
| 2269 <!-- |
| 2270 Displays formatted source documentation scraped from input urls. |
| 2271 |
| 2272 Documentation can be encoded into html comments (<!-- ... -->) or using Js
Doc notation (/** ... */). |
| 2273 |
| 2274 When using JsDoc notation, remember that the left-margin includes an asterisk an
d a single space. |
| 2275 This is important for markdown constructs that count spaces. Code blocks for exa
mple, must be |
| 2276 five spaces from the first asterisk. |
| 2277 |
| 2278 ## Markdown |
| 2279 |
| 2280 Markdown format is supported. |
| 2281 |
| 2282 ### Links |
| 2283 |
| 2284 Arbitrary links can be encoded using [standard markdown format](http://daringfir
eball.net/projects/markdown/syntax). |
| 2285 [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-mark
down) is also supported. |
| 2286 |
| 2287 Links to other topics can be made with hash-links [core-doc-viewer](#core-doc-vi
ewer). |
| 2288 |
| 2289 ### Code |
| 2290 |
| 2291 Example |
| 2292 |
| 2293 Four space indents indicate code blocks. |
| 2294 |
| 2295 <code>blocks are syntax highlighted</code> |
| 2296 |
| 2297 <script> |
| 2298 while(true) { |
| 2299 javascript('is highlighted also'); |
| 2300 } |
| 2301 </script> |
| 2302 |
| 2303 ### Blockquote |
| 2304 |
| 2305 > Blockquote is supported for long text that needs to wrap with a common left s
ide indent. |
| 2306 > Blockquote is supported for long text that needs to wrap with a common left s
ide indent. |
| 2307 |
| 2308 ### Lists |
| 2309 |
| 2310 1. enumerated |
| 2311 1. lists |
| 2312 |
| 2313 Use - or + for bullet points: |
| 2314 |
| 2315 - bullet |
| 2316 - lists |
| 2317 |
| 2318 ### Tables |
| 2319 |
| 2320 | First Header | Second Header | |
| 2321 | ------------- | ------------- | |
| 2322 | Content Cell | Content Cell | |
| 2323 | Content Cell | Content Cell | |
| 2324 |
| 2325 ### HTML |
| 2326 |
| 2327 Arbitrary HTML is also supported |
| 2328 |
| 2329 <input><button>Button</button><hr/> |
| 2330 |
| 2331 @class core-doc-viewer |
| 2332 @homepage github.io |
| 2333 --> |
| 2334 |
| 2335 <polymer-element name="core-doc-viewer" attributes="sources route url" assetpath
="../core-doc-viewer/"> |
| 2336 |
| 2337 <template> |
| 2338 |
| 2339 <style> |
| 2340 |
| 2341 core-doc-toc { |
| 2342 display: none; |
| 2343 width: 332px; |
| 2344 overflow-x: hidden; |
| 2345 } |
| 2346 |
| 2347 </style> |
| 2348 |
| 2349 <context-free-parser url="{{url}}" on-data-ready="{{parserDataReady}}"></con
text-free-parser> |
| 2350 |
| 2351 <template repeat="{{sources}}"> |
| 2352 <context-free-parser url="{{}}" on-data-ready="{{parserDataReady}}"></cont
ext-free-parser> |
| 2353 </template> |
| 2354 |
| 2355 <core-layout></core-layout> |
| 2356 <core-doc-toc id="toc" data="{{classes}}" selected="{{selected}}"></core-doc
-toc> |
| 2357 <core-doc-page core-flex="" data="{{data}}"></core-doc-page> |
| 2358 |
| 2359 </template> |
| 2360 |
| 2361 |
| 2362 |
| 2363 </polymer-element> |
| 2364 </div> |
| 2365 <div hidden>undefined</div> |
| 2366 |
| 2367 <!-- |
| 2368 |
| 2369 Implements the default landing page for Polymer components. |
| 2370 |
| 2371 `<core-component-page>` can render an information page for any component. |
| 2372 Polymer components use this component in `index.html` to provide the standard la
nding page. |
| 2373 |
| 2374 `<core-component-page>` is _vulcanized_, which means it contains all it's depend
encies baked in. |
| 2375 Therefore, this component is intended to be used only by itself in a page. |
| 2376 |
| 2377 This *-dev package contains the raw source and the dependency manifest necessary |
| 2378 to reconstruct `core-component-page\core-component-page.html` via vulcanize. |
| 2379 |
| 2380 `<core-component-page>` will set the page title automatically. |
| 2381 |
| 2382 @group Polymer Core Elements |
| 2383 @element core-component-page |
| 2384 |
| 2385 --> |
| 2386 |
| 2387 <polymer-element name="core-component-page" attributes="moduleName sources" asse
tpath="../core-component-page-dev/"> |
| 2388 |
| 2389 <template> |
| 2390 |
| 2391 <style>/* |
| 2392 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 2393 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 2394 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 2395 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 2396 Code distributed by Google as part of the polymer project is also |
| 2397 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 2398 */ |
| 2399 |
| 2400 :host { |
| 2401 font-family: Arial, sans-serif; |
| 2402 height: 100vh; |
| 2403 } |
| 2404 |
| 2405 h2 { |
| 2406 display: inline-block; |
| 2407 margin: 8px 6px; |
| 2408 vertical-align: middle; |
| 2409 } |
| 2410 |
| 2411 .choiceB, .choiceC, .choiceD { |
| 2412 /* typography */ |
| 2413 color: white; |
| 2414 /* font-size: 14px; */ |
| 2415 font-size: 12px; |
| 2416 font-weight: bold; |
| 2417 text-decoration: none; |
| 2418 /* colors / effects */ |
| 2419 background-color: #4285F4; |
| 2420 box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1); |
| 2421 box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1); |
| 2422 border-radius: 2px; |
| 2423 cursor: pointer; |
| 2424 /* metrics */ |
| 2425 display: inline-block; |
| 2426 padding: 4px 12px 5px 12px; |
| 2427 margin: 4px 0; |
| 2428 } |
| 2429 |
| 2430 .appbar { |
| 2431 background-color: #E91E63; |
| 2432 color: white; |
| 2433 } |
| 2434 </style> |
| 2435 |
| 2436 <core-layout vertical=""></core-layout> |
| 2437 |
| 2438 <core-toolbar class="appbar"> |
| 2439 <span>{{moduleName}}</span> |
| 2440 <a class="choiceC" target="_blank" href="../{{moduleName}}/demo.html">demo
</a> |
| 2441 </core-toolbar> |
| 2442 |
| 2443 <core-doc-viewer core-flex="" url="{{url}}" sources="{{sources}}"></core-doc
-viewer> |
| 2444 |
| 2445 </template> |
| 2446 |
| 2447 |
| 2448 |
| 2449 </polymer-element> |
| 2450 <script src="core-component-page-extracted.js"></script> |
OLD | NEW |