OLD | NEW |
1 /* Copyright 2015 The Chromium Authors. All rights reserved. | 1 /* Copyright 2015 The Chromium Authors. All rights reserved. |
2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
4 | 4 |
5 :host { | 5 :host { |
6 display: inline-block; | 6 display: inline-block; |
| 7 height: 50px; |
7 overflow: hidden; | 8 overflow: hidden; |
8 position: relative; | 9 position: relative; |
| 10 width: 50px; |
9 } | 11 } |
10 | 12 |
11 #icon { | 13 #icon { |
12 height: 100%; | 14 height: 100%; |
13 position: absolute; | 15 position: absolute; |
14 width: 100%; | 16 width: 100%; |
15 } | 17 } |
16 | 18 |
17 #icon.multi-level { | 19 #icon.multi-level { |
18 height: 500%; | 20 height: 500%; |
(...skipping 12 matching lines...) Expand all Loading... |
31 } | 33 } |
32 | 34 |
33 #icon.level3 { | 35 #icon.level3 { |
34 top: -300%; | 36 top: -300%; |
35 } | 37 } |
36 | 38 |
37 #icon.level4 { | 39 #icon.level4 { |
38 top: -400%; | 40 top: -400%; |
39 } | 41 } |
40 | 42 |
| 43 /* Connecting animation */ |
| 44 |
| 45 #icon.connecting { |
| 46 -webkit-animation: levels 1s infinite; |
| 47 -webkit-animation-timing-function: steps(4, start); |
| 48 } |
| 49 |
| 50 @-webkit-keyframes levels { |
| 51 from { |
| 52 top: 0%; |
| 53 } |
| 54 to { |
| 55 top: -400%; |
| 56 } |
| 57 } |
| 58 |
| 59 /* Badges. */ |
| 60 /* Note: These use left/right because we do not reverse the badges for RTL. */ |
| 61 |
| 62 /* Upper-left corner */ |
| 63 #technology { |
| 64 height: 40%; |
| 65 left: 0px; |
| 66 position: absolute; |
| 67 top: 0px; |
| 68 } |
| 69 |
| 70 /* Lower-right corner */ |
| 71 #roaming, |
41 #secure { | 72 #secure { |
42 height: 40%; | 73 height: 40%; |
43 margin-left: 60%; | 74 left: 60%; |
44 margin-top: 60%; | |
45 position: absolute; | 75 position: absolute; |
| 76 top: 60%; |
46 width: 40%; | 77 width: 40%; |
47 } | 78 } |
OLD | NEW |