WebCompDev / COMPONENTS

Blame view

bower_components/iron-icons/demo/index.html 2.99 KB
Edit Raw Normal View History
e619a3b0   Luigi Serra   Controllet cross ... 
1
2
3
4
5
6
7
8
9
10
11
12
13
 
  <!doctype html>
  <!--
  Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  Code distributed by Google as part of the polymer project is also
  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  -->
  
  <html>
  <head>
c5169e0e   Renato De Donato   a new hope 
14
15
16
 
    <title>iron-icons</title>
  
    <!-- polyfill WebComponents, if needed -->
e619a3b0   Luigi Serra   Controllet cross ... 
17
 
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
c5169e0e   Renato De Donato   a new hope 
18
19
20
21
22
23
 
  
    <!-- styles for the demo -->
    <link href="../../paper-styles/demo-pages.html" rel="import">
  
    <!-- load layout classes -->
    <link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html">
e619a3b0   Luigi Serra   Controllet cross ... 
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
  
    <!-- load default iconset -->
    <link rel="import" href="../iron-icons.html">
  
    <!-- load the rest -->
    <link rel="import" href="../av-icons.html">
    <link rel="import" href="../communication-icons.html">
    <link rel="import" href="../device-icons.html">
    <link rel="import" href="../editor-icons.html">
    <link rel="import" href="../hardware-icons.html">
    <link rel="import" href="../image-icons.html">
    <link rel="import" href="../maps-icons.html">
    <link rel="import" href="../notification-icons.html">
    <link rel="import" href="../social-icons.html">
e619a3b0   Luigi Serra   Controllet cross ... 
38
39
 
  
    <style is="custom-style">
c5169e0e   Renato De Donato   a new hope 
40
e619a3b0   Luigi Serra   Controllet cross ... 
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
      h2 {
        text-transform: capitalize;
      }
  
      iron-icon {
        transition: all 0.2s;
        -webkit-transition: all 0.2s;
      }
  
      iron-icon:hover {
        fill: var(--google-yellow-700);
      }
  
      .set {
        margin: auto;
        padding: 1em 0;
        border-bottom: 1px solid silver;
e619a3b0   Luigi Serra   Controllet cross ... 
58
59
60
61
62
63
64
65
66
67
68
 
      }
  
      .set:last-of-type {
        border-bottom: none;
      }
  
      .set:nth-of-type(4n-3) {
        color: var(--paper-grey-700);
      }
  
      .set:nth-of-type(4n-2) {
c5169e0e   Renato De Donato   a new hope 
69
 
        color: var(--google-yellow-300);
e619a3b0   Luigi Serra   Controllet cross ... 
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
      }
  
      .set:nth-of-type(4n-1) {
        color: var(--google-green-500);
      }
  
      .set:nth-of-type(4n) {
        color: var( --google-blue-500);
      }
  
      .container {
        min-width: 10em;
        padding: 1em 0.5em;
        text-align: center;
e619a3b0   Luigi Serra   Controllet cross ... 
84
85
86
87
88
89
90
91
92
93
94
95
96
 
      }
  
      .container > div {
        margin-top: 0.5em;
        color: black;
        font-size: 10px;
      }
  
    </style>
  
  </head>
  <body>
c5169e0e   Renato De Donato   a new hope 
97
e619a3b0   Luigi Serra   Controllet cross ... 
98
99
100
101
102
103
104
105
 
    <template is="dom-bind">
  
     <iron-meta type="iconset" list="{{iconsets}}"></iron-meta>
  
      <template is="dom-repeat" items="{{iconsets}}">
  
        <h2>{{item.name}}</h2>
c5169e0e   Renato De Donato   a new hope 
106
 
        <div class="set horizontal wrap layout">
e619a3b0   Luigi Serra   Controllet cross ... 
107
108
109
 
  
          <template is="dom-repeat" items="{{getIconNames(item)}}">
c5169e0e   Renato De Donato   a new hope 
110
 
            <span class="container vertical center layout flex-1">
e619a3b0   Luigi Serra   Controllet cross ... 
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
 
              <iron-icon icon="{{item}}"></iron-icon>
              <div>{{item}}</div>
            </span>
  
          </template>
  
        </div>
  
      </template>
  
    </template>
  
    <script>
  
      document.querySelector('[is=dom-bind]').getIconNames = function(iconset) {
        return iconset.getIconNames();
      };
  
    </script>
  
  </body>
  </html>