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>
|