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