Ensure state is vertically centered in more-info (#12780)

This commit is contained in:
Philip Allgaier 2022-05-25 18:40:04 +02:00 committed by GitHub
parent 5217f5c50c
commit 19d014307a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 6 deletions

View File

@ -155,7 +155,7 @@ class HuiGenericEntityRow extends LitElement {
</div>` </div>`
: html``} : html``}
${this.catchInteraction ?? !DOMAINS_INPUT_ROW.includes(domain) ${this.catchInteraction ?? !DOMAINS_INPUT_ROW.includes(domain)
? html` <div ? html`<div
class="text-content ${classMap({ class="text-content ${classMap({
pointer, pointer,
})}" })}"
@ -165,7 +165,7 @@ class HuiGenericEntityRow extends LitElement {
hasDoubleClick: hasAction(this.config!.double_tap_action), hasDoubleClick: hasAction(this.config!.double_tap_action),
})} })}
> >
<slot></slot> <div class="state"><slot></slot></div>
</div>` </div>`
: html`<slot></slot>`} : html`<slot></slot>`}
`; `;
@ -230,6 +230,12 @@ class HuiGenericEntityRow extends LitElement {
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
.state {
text-align: right;
}
.state.rtl {
text-align: left;
}
`; `;
} }
} }

View File

@ -90,6 +90,8 @@ export class StateCardDisplay extends LitElement {
text-align: right; text-align: right;
flex: 0 0 auto; flex: 0 0 auto;
overflow-wrap: break-word; overflow-wrap: break-word;
display: flex;
align-items: center;
} }
:host([rtl]) .state { :host([rtl]) .state {
margin-right: 16px; margin-right: 16px;

View File

@ -24,8 +24,9 @@ class StateCardInputNumber extends mixinBehaviors(
@apply --paper-font-body1; @apply --paper-font-body1;
color: var(--primary-text-color); color: var(--primary-text-color);
text-align: right; display: flex;
line-height: 40px; align-items: center;
justify-content: end;
} }
.sliderstate { .sliderstate {
min-width: 45px; min-width: 45px;

View File

@ -23,8 +23,9 @@ class StateCardNumber extends mixinBehaviors(
@apply --paper-font-body1; @apply --paper-font-body1;
color: var(--primary-text-color); color: var(--primary-text-color);
text-align: right; display: flex;
line-height: 40px; align-items: center;
justify-content: end;
} }
.sliderstate { .sliderstate {
min-width: 45px; min-width: 45px;