Smaller text in label badge if long value

This commit is contained in:
Paulus Schoutsen 2015-08-26 00:01:15 -07:00
parent b26ee9b9a6
commit 6aa46e06f3
2 changed files with 8 additions and 1 deletions

View File

@ -32,6 +32,9 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.label-badge .value.big {
font-size: 70%;
}
.label-badge .label { .label-badge .label {
position: absolute; position: absolute;
bottom: -1em; bottom: -1em;
@ -70,7 +73,7 @@
<template> <template>
<div class='badge-container'> <div class='badge-container'>
<div class='label-badge' id='badge'> <div class='label-badge' id='badge'>
<div class='value'> <div class$='[[computeClasses(value)]]'>
<template is='dom-if' if='[[icon]]'> <template is='dom-if' if='[[icon]]'>
<iron-icon icon='[[icon]]'></iron-icon> <iron-icon icon='[[icon]]'></iron-icon>
</template> </template>

View File

@ -25,4 +25,8 @@ export default new Polymer({
observe: 'imageChanged', observe: 'imageChanged',
}, },
}, },
computeClasses(value) {
return value && value.length > 5 ? 'value big' : 'value';
},
}); });