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 30 matching lines...) Expand all Loading... |
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 | 45 |
46 #value[loading] { | 46 #value[loading] { |
47 font-size: 30px; | 47 font-size: 30px; |
48 } | 48 } |
49 | 49 |
50 #value[loading]:after { | 50 #value[loading]:after { |
51 -webkit-animation: ellipsis steps(4,end) 900ms infinite; | |
52 animation: ellipsis steps(4,end) 900ms infinite; | 51 animation: ellipsis steps(4,end) 900ms infinite; |
53 content: "\2026"; /* ascii code for the ellipsis character */ | 52 content: "\2026"; /* ascii code for the ellipsis character */ |
54 display: inline-block; | 53 display: inline-block; |
55 overflow: hidden; | 54 overflow: hidden; |
56 vertical-align: bottom; | 55 vertical-align: bottom; |
57 width: 0px; | 56 width: 0px; |
58 } | 57 } |
59 | 58 |
60 @keyframes ellipsis { | 59 @keyframes ellipsis { |
61 to { | 60 to { |
62 width: 1.25em; | 61 width: 1.25em; |
63 } | 62 } |
64 } | 63 } |
65 | 64 |
66 @-webkit-keyframes ellipsis { | 65 @keyframes ellipsis { |
67 to { | 66 to { |
68 width: 1.25em; | 67 width: 1.25em; |
69 } | 68 } |
70 } | 69 } |
71 </style> | 70 </style> |
72 <template> | 71 <template> |
73 <div id="box" hidden="[[!value]]"> | 72 <div id="box" hidden="[[!value]]"> |
74 <div id="padding"></div> | 73 <div id="padding"></div> |
75 <div id="key">[[key]]</div> | 74 <div id="key">[[key]]</div> |
76 <div id="value" loading$="{{loading}}"><div hidden="[[loading]]">[[value]]
</div></div> | 75 <div id="value" loading$="{{loading}}"><div hidden="[[loading]]">[[value]]
</div></div> |
77 </div> | 76 </div> |
78 </template> | 77 </template> |
79 </dom-module> | 78 </dom-module> |
80 | 79 |
81 <script src="files_metadata_entry.js"></script> | 80 <script src="files_metadata_entry.js"></script> |
OLD | NEW |