blob: d97b9a9f2004e219a1b803835da9baaee45adcb8 [file] [log] [blame]
<!-- Copyright 2016 The Chromium Authors. All rights reserved.
-- Use of this source code is governed by a BSD-style license that can be
-- found in the LICENSE file.
-->
<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
<dom-module id="files-metadata-entry">
<template>
<style>
div {
margin: 0;
}
#box {
display: flex;
margin: 12px 0;
min-height: 14px;
width: 320px;
}
#box[hidden] {
display: none;
}
#padding {
width: 32px;
}
#key {
-webkit-margin-end: 32px;
color: white;
font-weight: 500;
overflow-wrap: break-word;
vertical-align: bottom;
width: 96px;
}
#value {
color: white;
opacity: 0.8;
overflow-wrap: break-word;
vertical-align: bottom;
width: 128px;
}
#value[loading] {
font-size: 30px;
}
#value[loading]:after {
animation: ellipsis steps(4,end) 900ms infinite;
content: "\2026"; /* ascii code for the ellipsis character */
display: inline-block;
overflow: hidden;
vertical-align: bottom;
width: 0px;
}
@keyframes ellipsis {
to {
width: 1.25em;
}
}
@keyframes ellipsis {
to {
width: 1.25em;
}
}
</style>
<div id="box" hidden="[[!value]]">
<div id="padding"></div>
<div id="key">[[key]]</div>
<div id="value" loading$="{{loading}}"><div hidden="[[loading]]">[[value]]</div></div>
</div>
</template>
</dom-module>
<script src="files_metadata_entry.js"></script>