mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 07:16:39 +00:00
Smaller text in label badge if long value
This commit is contained in:
parent
b26ee9b9a6
commit
6aa46e06f3
@ -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>
|
||||||
|
@ -25,4 +25,8 @@ export default new Polymer({
|
|||||||
observe: 'imageChanged',
|
observe: 'imageChanged',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
computeClasses(value) {
|
||||||
|
return value && value.length > 5 ? 'value big' : 'value';
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user