jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

correct max width. give small text some more space. vertical centering. (#1083)

Browse Source
This commit is contained in:
NovapaX 2018-04-14 03:25:17 +02:00 committed by Paulus Schoutsen
parent 2cf508e0b0
commit 961f43e4a5
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/ha-label-badge.html
View File

@ -38,19 +38,20 @@
.label-badge .label { .label-badge .label {
position: absolute; position: absolute;
bottom: -1em; bottom: -1em;
/* Make the label as wide as container+border. */ /* Make the label as wide as container+border. (parent_borderwidth / font-size) */
left: -0.1em; left: -0.2em;
right: -0.1em; right: -0.2em;
line-height: 1em; line-height: 1em;
font-size: 0.5em; font-size: 0.5em;
} }
.label-badge .label span { .label-badge .label span {
max-width: 68%; /* Parent width minus two times 16% padding */ box-sizing: border-box;
max-width: 100%;
display: inline-block; display: inline-block;
background-color: var(--ha-label-badge-color, var(--primary-color)); background-color: var(--ha-label-badge-color, var(--primary-color));
color: var(--ha-label-badge-label-color, white); color: var(--ha-label-badge-label-color, white);
border-radius: 1em; border-radius: 1em;
padding: 8% 16%; padding: 9% 16% 8% 16%; /* mostly apitalized text, not much descenders => bit more top margin */
font-weight: 500; font-weight: 500;
overflow: hidden; overflow: hidden;
text-transform: uppercase; text-transform: uppercase;
@ -60,6 +61,7 @@
} }
.label-badge .label.big span { .label-badge .label.big span {
font-size: 90%; font-size: 90%;
padding: 10% 12% 7% 12%; /* push smaller text a bit down to center vertically */
} }
.badge-container .title { .badge-container .title {
margin-top: 1em; margin-top: 1em;