Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(177)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: polymer_1.2.3/bower_components/iron-icons/demo/index.html

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: 1.2.3 Created 4 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « polymer_1.2.3/bower_components/iron-icons/communication-icons.html ('k') | polymer_1.2.3/bower_components/iron-icons/device-icons.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!doctype html> 1 <!doctype html>
2 <!-- 2 <!--
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.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/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 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/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 10
11 <html> 11 <html>
12 <head> 12 <head>
13 13
14 <title>iron-icons</title> 14 <title>iron-icons demo</title>
15
16 <!-- polyfill WebComponents, if needed -->
17 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 15 <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
18 16 <link rel="import" href="../../paper-styles/demo-pages.html">
19 <!-- styles for the demo --> 17 <link rel="import" href="../../paper-styles/color.html">
20 <link href="../../paper-styles/demo-pages.html" rel="import"> 18 <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
21
22 <!-- load layout classes -->
23 <link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html" >
24 19
25 <!-- load default iconset --> 20 <!-- load default iconset -->
26 <link rel="import" href="../iron-icons.html"> 21 <link rel="import" href="../iron-icons.html">
27 22
28 <!-- load the rest --> 23 <!-- load the rest -->
29 <link rel="import" href="../av-icons.html"> 24 <link rel="import" href="../av-icons.html">
30 <link rel="import" href="../communication-icons.html"> 25 <link rel="import" href="../communication-icons.html">
31 <link rel="import" href="../device-icons.html"> 26 <link rel="import" href="../device-icons.html">
32 <link rel="import" href="../editor-icons.html"> 27 <link rel="import" href="../editor-icons.html">
33 <link rel="import" href="../hardware-icons.html"> 28 <link rel="import" href="../hardware-icons.html">
34 <link rel="import" href="../image-icons.html"> 29 <link rel="import" href="../image-icons.html">
35 <link rel="import" href="../maps-icons.html"> 30 <link rel="import" href="../maps-icons.html">
36 <link rel="import" href="../notification-icons.html"> 31 <link rel="import" href="../notification-icons.html">
37 <link rel="import" href="../social-icons.html"> 32 <link rel="import" href="../social-icons.html">
33 <link rel="import" href="../places-icons.html">
38 34
39 <style is="custom-style"> 35 <style is="custom-style">
40 36
41 h2 { 37 h2 {
42 text-transform: capitalize; 38 text-transform: capitalize;
43 } 39 }
44 40
45 iron-icon { 41 iron-icon {
46 transition: all 0.2s; 42 transition: all 0.2s;
47 -webkit-transition: all 0.2s; 43 -webkit-transition: all 0.2s;
48 } 44 }
49 45
50 iron-icon:hover { 46 iron-icon:hover {
51 fill: var(--google-yellow-700); 47 fill: var(--google-yellow-700);
52 } 48 }
53 49
54 .set { 50 .set {
55 margin: auto; 51 margin: auto;
56 padding: 1em 0; 52 padding: 1em 0;
57 border-bottom: 1px solid silver; 53 border-bottom: 1px solid silver;
54 @apply(--layout-horizontal);
55 @apply(--layout-wrap);
58 } 56 }
59 57
60 .set:last-of-type { 58 .set:last-of-type {
61 border-bottom: none; 59 border-bottom: none;
62 } 60 }
63 61
64 .set:nth-of-type(4n-3) { 62 .set:nth-of-type(4n-3) {
65 color: var(--paper-grey-700); 63 color: var(--paper-grey-700);
66 } 64 }
67 65
68 .set:nth-of-type(4n-2) { 66 .set:nth-of-type(4n-2) {
69 color: var(--google-yellow-300); 67 color: var(--paper-pink-500);
70 } 68 }
71 69
72 .set:nth-of-type(4n-1) { 70 .set:nth-of-type(4n-1) {
73 color: var(--google-green-500); 71 color: var(--google-green-500);
74 } 72 }
75 73
76 .set:nth-of-type(4n) { 74 .set:nth-of-type(4n) {
77 color: var( --google-blue-500); 75 color: var( --google-blue-500);
78 } 76 }
79 77
80 .container { 78 .container {
81 min-width: 10em; 79 min-width: 10em;
82 padding: 1em 0.5em; 80 padding: 1em 0.5em;
83 text-align: center; 81 text-align: center;
82 @apply(--layout-vertical);
83 @apply(--layout-center);
84 @apply(--layout-flex-1);
84 } 85 }
85 86
86 .container > div { 87 .container > div {
87 margin-top: 0.5em; 88 margin-top: 0.5em;
88 color: black; 89 color: black;
89 font-size: 10px; 90 font-size: 10px;
90 } 91 }
91 92
92 </style> 93 </style>
93 94
94 </head> 95 </head>
95 <body> 96 <body>
96 97
97
98 <template is="dom-bind"> 98 <template is="dom-bind">
99 99
100 <iron-meta type="iconset" list="{{iconsets}}"></iron-meta> 100 <iron-meta type="iconset" list="{{iconsets}}"></iron-meta>
101 101
102 <template is="dom-repeat" items="{{iconsets}}"> 102 <template is="dom-repeat" items="{{iconsets}}">
103 103
104 <h2>{{item.name}}</h2> 104 <h2>{{item.name}}</h2>
105 105
106 <div class="set horizontal wrap layout"> 106 <div class="set">
107 107
108 <template is="dom-repeat" items="{{getIconNames(item)}}"> 108 <template is="dom-repeat" items="{{getIconNames(item)}}">
109 109
110 <span class="container vertical center layout flex-1"> 110 <span class="container">
111 <iron-icon icon="{{item}}"></iron-icon> 111 <iron-icon icon="{{item}}"></iron-icon>
112 <div>{{item}}</div> 112 <div>{{item}}</div>
113 </span> 113 </span>
114 114
115 </template> 115 </template>
116 116
117 </div> 117 </div>
118 118
119 </template> 119 </template>
120 120
121 </template> 121 </template>
122 122
123 <script> 123 <script>
124 124
125 document.querySelector('[is=dom-bind]').getIconNames = function(iconset) { 125 document.querySelector('[is=dom-bind]').getIconNames = function(iconset) {
126 return iconset.getIconNames(); 126 return iconset.getIconNames();
127 }; 127 };
128 128
129 </script> 129 </script>
130 130
131 </body> 131 </body>
132 </html> 132 </html>
OLDNEW
« no previous file with comments | « polymer_1.2.3/bower_components/iron-icons/communication-icons.html ('k') | polymer_1.2.3/bower_components/iron-icons/device-icons.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698