third_party/polymer/components/core-icons/demo.html

   1 <!doctype html>
   2 <!--
   3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10
  11 <html>
  12 <head>
  13
  14   <title>core-icons</title>
  15   <script src="../webcomponentsjs/webcomponents.js"></script>
  16   <!-- load default set -->
  17   <link rel="import" href="core-icons.html">
  18   <!-- load the rest -->
  19   <link rel="import" href="av-icons.html">
  20   <link rel="import" href="communication-icons.html">
  21   <link rel="import" href="device-icons.html">
  22   <link rel="import" href="editor-icons.html">
  23   <link rel="import" href="hardware-icons.html">
  24   <link rel="import" href="image-icons.html">
  25   <link rel="import" href="maps-icons.html">
  26   <link rel="import" href="notification-icons.html">
  27   <link rel="import" href="social-icons.html">
  28   <style>
  29     body {
  30       font-family: 'Helvetica Neue', Helvetica, Arial;
  31     }
  32
  33     h2 {
  34       text-transform: capitalize;
  35     }
  36
  37     core-icon {
  38       transition: all 0.2s;
  39       -webkit-transition: all 0.2s;
  40     }
  41
  42     core-icon:hover {
  43       fill: #fb8c00;
  44     }
  45
  46     .set {
  47       padding: 1em 0;
  48       border-bottom: 1px solid silver;
  49     }
  50
  51     .set:nth-of-type(4n-3) {
  52       color: #656565;
  53     }
  54
  55     .set:nth-of-type(4n-2) {
  56       color: #FDD835;
  57     }
  58
  59     .set:nth-of-type(4n-1) {
  60       color: #0D904F;
  61     }
  62
  63     .set:nth-of-type(4n) {
  64       color: #3B78E7;
  65     }
  66
  67     .container {
  68       min-width: 10em;
  69       padding: 1em;
  70     }
  71
  72     .container > div {
  73       color: black;
  74     }
  75   </style>
  76 </head>
  77 <body unresolved>
  78
  79   <template is="auto-binding">
  80     <template repeat="{{iconset in $.meta.metaArray}}">
  81       <h2>{{iconset.id}}</h2>
  82       <h5>{{iconset.id === 'icons' ? 'The Default Set' : 'Import ' + iconset.id + '-icons.html'}}</h5>
  83       <div class="set" horizontal wrap justified layout>
  84         <template repeat="{{ icon in iconset.iconNames }}">
  85           <span class="container" vertical center layout>
  86             <core-icon icon="{{ iconset.id }}:{{ icon }}"></core-icon>
  87             <div>{{ icon }}</div>
  88           </span>
  89         </template>
  90       </div>
  91     </template>
  92     <core-iconset id="meta"></core-iconset>
  93   </template>
  94
  95 </body>
  96 </html>