OLD | NEW |
1 <link rel="import" href="chrome://resources/html/polymer.html"> | 1 <link rel="import" href="chrome://resources/html/polymer.html"> |
2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm
l"> | 2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.htm
l"> |
3 <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.htm
l"> | 3 <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.htm
l"> |
4 <link rel="import" href="chrome://resources/cr_elements/network/network_icons.ht
ml"> | 4 <link rel="import" href="chrome://resources/cr_elements/network/network_icons.ht
ml"> |
5 | 5 |
6 <dom-module id="cr-network-icon"> | 6 <dom-module id="cr-network-icon"> |
7 <template> | 7 <template> |
8 <style> | 8 <style> |
9 :host { | 9 :host { |
10 display: inline-flex; | 10 display: inline-flex; |
11 overflow: hidden; | 11 overflow: hidden; |
12 padding: 2px; | 12 padding: 2px; |
13 position: relative; | 13 position: relative; |
14 } | 14 } |
15 | 15 |
16 /* Included for options UI. TODO(stevenjb): Remove. */ | 16 /* Included for options UI. TODO(stevenjb): Remove. */ |
17 [hidden] { | 17 [hidden] { |
18 display: none !important; | 18 display: none !important; |
19 } | 19 } |
20 | 20 |
21 #icon { | 21 #icon { |
22 height: 20px; | 22 height: 20px; |
23 opacity: .65; /* Equivalent to #5a5a5a */ | 23 opacity: .65; /* Equivalent to #5a5a5a */ |
24 width: 20px; | 24 width: 20px; |
25 } | 25 } |
26 | 26 |
27 /* Upper-left corner */ | 27 /* Upper-left corner */ |
28 #technology { | 28 #technology { |
| 29 --iron-icon-fill-color: #5a5a5a; |
29 height: 20px; | 30 height: 20px; |
30 left: 0; | 31 left: 0; |
31 position: absolute; | 32 position: absolute; |
32 top: 1px; | 33 top: 1px; |
33 width: 20px; | 34 width: 20px; |
34 } | 35 } |
35 | 36 |
36 /* Lower-right corner */ | 37 /* Lower-right corner */ |
37 #secure { | 38 #secure { |
38 height: 20px; | 39 --iron-icon-fill-color: #5a5a5a; |
| 40 height: 8px; |
39 left: 16px; | 41 left: 16px; |
40 position: absolute; | 42 position: absolute; |
41 top: 16px; | 43 top: 16px; |
42 width: 20px; | 44 width: 8px; |
43 } | 45 } |
44 | 46 |
45 /* Images */ | 47 /* Images */ |
46 #icon.ethernet { | 48 #icon.ethernet { |
47 background: url(ethernet.svg); | 49 background: url(ethernet.svg); |
48 } | 50 } |
49 | 51 |
50 #icon.vpn { | 52 #icon.vpn { |
51 background: url(vpn.svg); | 53 background: url(vpn.svg); |
52 } | 54 } |
(...skipping 71 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
124 75% { background: url(cellular_3.svg); } | 126 75% { background: url(cellular_3.svg); } |
125 100% { background: url(cellular_4.svg); } | 127 100% { background: url(cellular_4.svg); } |
126 } | 128 } |
127 </style> | 129 </style> |
128 <div id="icon" class$="[[getIconClass_(networkState, isListItem)]]"> | 130 <div id="icon" class$="[[getIconClass_(networkState, isListItem)]]"> |
129 </div> | 131 </div> |
130 <iron-icon id="technology" hidden="[[!showTechnology_(networkState)]]" | 132 <iron-icon id="technology" hidden="[[!showTechnology_(networkState)]]" |
131 icon="[[getTechnology_(networkState)]]"> | 133 icon="[[getTechnology_(networkState)]]"> |
132 </iron-icon> | 134 </iron-icon> |
133 <iron-icon id="secure" hidden="[[!showSecure_(networkState)]]" | 135 <iron-icon id="secure" hidden="[[!showSecure_(networkState)]]" |
134 icon="network:badge-secure"> | 136 icon="network8:badge-secure"> |
135 </iron-icon> | 137 </iron-icon> |
136 </template> | 138 </template> |
137 <script src="cr_network_icon.js"></script> | 139 <script src="cr_network_icon.js"></script> |
138 </dom-module> | 140 </dom-module> |
OLD | NEW |