WebCompDev / COMPONENTS

Blame view

bower_components/iron-icons/demo/index.html 3.08 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>
2fc589e3   root   animated-button, ... 
14
 
    <title>iron-icons demo</title>
e619a3b0   Luigi Serra   Controllet cross ... 
15
 
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
2fc589e3   root   animated-button, ... 
16
17
18
 
    <link rel="import" href="../../paper-styles/demo-pages.html">
    <link rel="import" href="../../paper-styles/color.html">
    <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
e619a3b0   Luigi Serra   Controllet cross ... 
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
  
    <!-- 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">
2fc589e3   root   animated-button, ... 
33
 
    <link rel="import" href="../places-icons.html">
e619a3b0   Luigi Serra   Controllet cross ... 
34
35
 
  
    <style is="custom-style">
2fc589e3   root   animated-button, ... 
36
e619a3b0   Luigi Serra   Controllet cross ... 
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
      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;
2fc589e3   root   animated-button, ... 
54
55
 
        @apply(--layout-horizontal);
        @apply(--layout-wrap);
e619a3b0   Luigi Serra   Controllet cross ... 
56
57
58
59
60
61
62
63
64
65
66
 
      }
  
      .set:last-of-type {
        border-bottom: none;
      }
  
      .set:nth-of-type(4n-3) {
        color: var(--paper-grey-700);
      }
  
      .set:nth-of-type(4n-2) {
2fc589e3   root   animated-button, ... 
67
 
        color: var(--paper-pink-500);
e619a3b0   Luigi Serra   Controllet cross ... 
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
      }
  
      .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;
2fc589e3   root   animated-button, ... 
82
83
84
 
        @apply(--layout-vertical);
        @apply(--layout-center);
        @apply(--layout-flex-1);
e619a3b0   Luigi Serra   Controllet cross ... 
85
86
87
88
89
90
91
92
93
94
95
96
97
 
      }
  
      .container > div {
        margin-top: 0.5em;
        color: black;
        font-size: 10px;
      }
  
    </style>
  
  </head>
  <body>
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>
2fc589e3   root   animated-button, ... 
106
 
        <div class="set">
e619a3b0   Luigi Serra   Controllet cross ... 
107
108
109
 
  
          <template is="dom-repeat" items="{{getIconNames(item)}}">
2fc589e3   root   animated-button, ... 
110
 
            <span class="container">
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>