OLD | NEW |
1 <!-- Copyright 2016 The Chromium Authors. All rights reserved. | 1 <!-- Copyright 2016 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 | 5 |
6 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html"> | 6 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html"> |
7 | 7 |
8 <dom-module id="files-metadata-entry"> | 8 <dom-module id="files-metadata-entry"> |
9 <style> | 9 <style> |
10 div { | 10 div { |
(...skipping 24 matching lines...) Expand all Loading... |
35 width: 96px; | 35 width: 96px; |
36 } | 36 } |
37 | 37 |
38 #value { | 38 #value { |
39 color: white; | 39 color: white; |
40 opacity: 0.8; | 40 opacity: 0.8; |
41 overflow-wrap: break-word; | 41 overflow-wrap: break-word; |
42 vertical-align: bottom; | 42 vertical-align: bottom; |
43 width: 128px; | 43 width: 128px; |
44 } | 44 } |
| 45 |
| 46 #value[loading] { |
| 47 font-size: 30px; |
| 48 } |
| 49 |
| 50 #value[loading]:after { |
| 51 -webkit-animation: ellipsis steps(4,end) 900ms infinite; |
| 52 animation: ellipsis steps(4,end) 900ms infinite; |
| 53 content: "\2026"; /* ascii code for the ellipsis character */ |
| 54 display: inline-block; |
| 55 overflow: hidden; |
| 56 vertical-align: bottom; |
| 57 width: 0px; |
| 58 } |
| 59 |
| 60 @keyframes ellipsis { |
| 61 to { |
| 62 width: 1.25em; |
| 63 } |
| 64 } |
| 65 |
| 66 @-webkit-keyframes ellipsis { |
| 67 to { |
| 68 width: 1.25em; |
| 69 } |
| 70 } |
45 </style> | 71 </style> |
46 <template> | 72 <template> |
47 <div id="box" hidden="[[!value]]"> | 73 <div id="box" hidden="[[!value]]"> |
48 <div id="padding"></div> | 74 <div id="padding"></div> |
49 <div id="key">[[key]]</div> | 75 <div id="key">[[key]]</div> |
50 <div id="value">[[value]]</div> | 76 <div id="value" loading$="{{loading}}"><div hidden="[[loading]]">[[value]]
</div></div> |
51 </div> | 77 </div> |
52 </template> | 78 </template> |
53 </dom-module> | 79 </dom-module> |
54 | 80 |
55 <script src="files_metadata_entry.js"></script> | 81 <script src="files_metadata_entry.js"></script> |
OLD | NEW |