Select + target picker Rtl fixes (#12711)

This commit is contained in:
Yosi Levy 2022-05-19 17:28:56 +03:00 committed by GitHub
parent 6f19ea1d84
commit f6411dce66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 8 deletions

View File

@ -47,11 +47,19 @@ export class HaSelect extends SelectBase {
.mdc-select__anchor {
width: var(--ha-select-min-width, 200px);
}
.mdc-floating-label {
inset-inline-start: 16px !important;
inset-inline-end: initial !important;
.mdc-select--filled .mdc-floating-label {
inset-inline-start: 12px;
inset-inline-end: initial;
direction: var(--direction);
}
.mdc-select .mdc-select__anchor {
padding-inline-start: 12px;
padding-inline-end: 0px;
direction: var(--direction);
}
.mdc-select__anchor .mdc-floating-label--float-above {
transform-origin: var(--float-start);
}
`,
];
}

View File

@ -569,6 +569,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
height: 16px;
--mdc-icon-size: 14px;
color: var(--secondary-text-color);
margin-inline-start: 4px !important;
margin-inline-end: -4px !important;
direction: var(--direction);
}
.mdc-chip__icon--leading {
display: flex;
@ -578,6 +581,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
border-radius: 50%;
padding: 6px;
margin-left: -14px !important;
margin-inline-start: -14px !important;
margin-inline-end: 4px !important;
direction: var(--direction);
}
.expand-btn {
margin-right: 0;
@ -616,11 +622,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
opacity: var(--light-disabled-opacity);
pointer-events: none;
}
.mdc-chip__icon {
margin-inline-start: -14px !important;
margin-inline-end: 4px !important;
direction: var(--direction);
}
`;
}
}

View File

@ -198,6 +198,9 @@ export class HuiActionEditor extends LitElement {
position: absolute;
right: 40px;
top: 16px;
inset-inline-start: initial;
inset-inline-end: 40px;
direction: var(--direction);
}
ha-select,
ha-textfield {

View File

@ -191,6 +191,10 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
this.style.direction = direction;
document.dir = direction;
this.style.setProperty("--direction", direction);
this.style.setProperty(
"--float-start",
direction === "ltr" ? "left" : "right"
);
this.style.setProperty(
"--float-end",
direction === "ltr" ? "right" : "left"