diff --git a/src/components/ha-clickable-list-item.ts b/src/components/ha-clickable-list-item.ts index 032a2be2ed..71f207a129 100644 --- a/src/components/ha-clickable-list-item.ts +++ b/src/components/ha-clickable-list-item.ts @@ -60,15 +60,18 @@ export class HaClickableListItem extends ListItemBase { padding-right: var(--mdc-list-side-padding, 20px); overflow: hidden; } - :host-context([style*="direction: rtl;"]) - span.material-icons:first-of-type { - margin-left: var(--mdc-list-item-graphic-margin, 16px) !important; - margin-right: 0px !important; + span.material-icons:first-of-type { + margin-inline-start: 0px !important; + margin-inline-end: var( + --mdc-list-item-graphic-margin, + 16px + ) !important; + direction: var(--direction); } - :host-context([style*="direction: rtl;"]) - span.material-icons:last-of-type { - margin-left: 0px !important; - margin-right: auto !important; + span.material-icons:last-of-type { + margin-inline-start: auto !important; + margin-inline-end: 0px !important; + direction: var(--direction); } `, ]; diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts index fb28ab211c..0e29a8d8fc 100644 --- a/src/components/ha-combo-box.ts +++ b/src/components/ha-combo-box.ts @@ -241,6 +241,9 @@ export class HaComboBox extends LitElement { .toggle-button { right: 12px; top: -10px; + inset-inline-start: initial; + inset-inline-end: 12px; + direction: var(--direction); } :host([opened]) .toggle-button { color: var(--primary-color); @@ -249,18 +252,9 @@ export class HaComboBox extends LitElement { --mdc-icon-size: 20px; top: -7px; right: 36px; - } - - :host-context([style*="direction: rtl;"]) .toggle-button { - left: 12px; - right: auto; - top: -10px; - } - :host-context([style*="direction: rtl;"]) .clear-button { - --mdc-icon-size: 20px; - top: -7px; - left: 36px; - right: auto; + inset-inline-start: initial; + inset-inline-end: 36px; + direction: var(--direction); } `; } diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index 3f33a4e349..2744d1eeed 100644 --- a/src/components/ha-dialog.ts +++ b/src/components/ha-dialog.ts @@ -3,7 +3,6 @@ import { styles } from "@material/mwc-dialog/mwc-dialog.css"; import { mdiClose } from "@mdi/js"; import { css, html, TemplateResult } from "lit"; import { customElement } from "lit/decorators"; -import { computeRTLDirection } from "../common/util/compute_rtl"; import type { HomeAssistant } from "../types"; import "./ha-icon-button"; @@ -17,7 +16,6 @@ export const createCloseHeading = ( .path=${mdiClose} dialogAction="close" class="header_button" - dir=${computeRTLDirection(hass)} > `; @@ -89,18 +87,18 @@ export class HaDialog extends DialogBase { } .header_title { margin-right: 40px; + margin-inline-end: 40px; + direction: var(--direction); } - [dir="rtl"].header_button { - right: auto; - left: 16px; + .header_button { + inset-inline-start: initial; + inset-inline-end: 16px; + direction: var(--direction); } - [dir="rtl"].header_title { - margin-left: 40px; - margin-right: 0px; - } - :host-context([style*="direction: rtl;"]) .dialog-actions { - left: 0px !important; - right: auto !important; + .dialog-actions { + inset-inline-start: initial !important; + inset-inline-end: 0px !important; + direction: var(--direction); } `, ]; diff --git a/src/components/ha-file-upload.ts b/src/components/ha-file-upload.ts index 6e90308ee4..fa85894bfc 100644 --- a/src/components/ha-file-upload.ts +++ b/src/components/ha-file-upload.ts @@ -175,24 +175,23 @@ export class HaFileUpload extends LitElement { } .mdc-text-field__icon--leading { margin-bottom: 12px; - } - :host-context([style*="direction: rtl;"]) - .mdc-text-field__icon--leading { - margin-right: 0px; + inset-inline-start: initial; + inset-inline-end: 0px; + direction: var(--direction); } .mdc-text-field--filled .mdc-floating-label--float-above { transform: scale(0.75); top: 8px; } - :host-context([style*="direction: rtl;"]) .mdc-floating-label { - left: initial; - right: 16px; + .mdc-floating-label { + inset-inline-start: 16px !important; + inset-inline-end: initial !important; + direction: var(--direction); } - :host-context([style*="direction: rtl;"]) - .mdc-text-field--filled - .mdc-floating-label { - left: initial; - right: 48px; + .mdc-text-field--filled .mdc-floating-label { + inset-inline-start: 48px !important; + inset-inline-end: initial !important; + direction: var(--direction); } .dragged:before { position: var(--layout-fit_-_position); diff --git a/src/components/ha-form/ha-form-string.ts b/src/components/ha-form/ha-form-string.ts index 04cdd3d182..93d8c247c4 100644 --- a/src/components/ha-form/ha-form-string.ts +++ b/src/components/ha-form/ha-form-string.ts @@ -133,9 +133,10 @@ export class HaFormString extends LitElement implements HaFormElement { color: var(--secondary-text-color); } - :host-context([style*="direction: rtl;"]) ha-icon-button { - right: auto; - left: 12px; + ha-icon-button { + inset-inline-start: initial; + inset-inline-end: 12px; + direction: var(--direction); } `; } diff --git a/src/components/ha-select.ts b/src/components/ha-select.ts index 148ffcd21d..f432bcb280 100644 --- a/src/components/ha-select.ts +++ b/src/components/ha-select.ts @@ -47,9 +47,10 @@ export class HaSelect extends SelectBase { .mdc-select__anchor { width: var(--ha-select-min-width, 200px); } - :host-context([style*="direction: rtl;"]) .mdc-floating-label { - right: 16px !important; - left: initial !important; + .mdc-floating-label { + inset-inline-start: 16px !important; + inset-inline-end: initial !important; + direction: var(--direction); } `, ]; diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts index 825b828cd2..adeba08722 100644 --- a/src/components/ha-target-picker.ts +++ b/src/components/ha-target-picker.ts @@ -616,9 +616,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) { opacity: var(--light-disabled-opacity); pointer-events: none; } - :host-context([style*="direction: rtl;"]) .mdc-chip__icon { - margin-right: -14px !important; - margin-left: 4px !important; + .mdc-chip__icon { + margin-inline-start: -14px !important; + margin-inline-end: 4px !important; + direction: var(--direction); } `; } diff --git a/src/components/ha-textfield.ts b/src/components/ha-textfield.ts index 0e2c5a8cf8..98d85e56b4 100644 --- a/src/components/ha-textfield.ts +++ b/src/components/ha-textfield.ts @@ -92,17 +92,18 @@ export class HaTextField extends TextFieldBase { overflow: var(--text-field-overflow); } - :host-context([style*="direction: rtl;"]) .mdc-floating-label { - right: 10px !important; - left: initial !important; + .mdc-floating-label { + inset-inline-start: 16px !important; + inset-inline-end: initial !important; + direction: var(--direction); } - :host-context([style*="direction: rtl;"]) - .mdc-text-field--with-leading-icon.mdc-text-field--filled + .mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label { max-width: calc(100% - 48px); - right: 48px !important; - left: initial !important; + inset-inline-start: 48px !important; + inset-inline-end: initial !important; + direction: var(--direction); } `, ]; diff --git a/src/components/media-player/dialog-media-manage.ts b/src/components/media-player/dialog-media-manage.ts index ef2af8e57e..2761436bd4 100644 --- a/src/components/media-player/dialog-media-manage.ts +++ b/src/components/media-player/dialog-media-manage.ts @@ -314,9 +314,10 @@ class DialogMediaManage extends LitElement { vertical-align: middle; } - :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] { - margin-left: 8px !important; - margin-right: 0px !important; + ha-svg-icon[slot="icon"] { + margin-inline-start: 0px !important; + margin-inline-end: 8px !important; + direction: var(--direction); } .refresh { diff --git a/src/components/media-player/ha-media-manage-button.ts b/src/components/media-player/ha-media-manage-button.ts index aeb9d7b2bc..ab12d1aa07 100644 --- a/src/components/media-player/ha-media-manage-button.ts +++ b/src/components/media-player/ha-media-manage-button.ts @@ -60,9 +60,10 @@ class MediaManageButton extends LitElement { vertical-align: middle; } - :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] { - margin-left: 8px; - margin-right: 0px; + ha-svg-icon[slot="icon"] { + margin-inline-start: 0px; + margin-inline-end: 8px; + direction: var(--direction); } `; } diff --git a/src/components/media-player/ha-media-upload-button.ts b/src/components/media-player/ha-media-upload-button.ts index 413952b9a3..a28f3cfa5b 100644 --- a/src/components/media-player/ha-media-upload-button.ts +++ b/src/components/media-player/ha-media-upload-button.ts @@ -120,9 +120,10 @@ class MediaUploadButton extends LitElement { vertical-align: middle; } - :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] { - margin-left: 8px; - margin-right: 0px; + ha-svg-icon[slot="icon"] { + margin-inline-start: 0px; + margin-inline-end: 8px; + direction: var(--direction); } `; } diff --git a/src/dialogs/config-flow/dialog-data-entry-flow.ts b/src/dialogs/config-flow/dialog-data-entry-flow.ts index d0a7d28d13..415be7f833 100644 --- a/src/dialogs/config-flow/dialog-data-entry-flow.ts +++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts @@ -518,10 +518,9 @@ class DataEntryFlowDialog extends LitElement { position: absolute; top: 0; right: 0; - } - :host-context([style*="direction: rtl;"]) .dialog-actions { - right: auto; - left: 0; + inset-inline-start: initial; + inset-inline-end: 0px; + direction: var(--direction); } .dialog-actions > * { color: var(--secondary-text-color); diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts index 1b0c8b4c1b..6b1926e31f 100644 --- a/src/dialogs/config-flow/step-flow-form.ts +++ b/src/dialogs/config-flow/step-flow-form.ts @@ -192,11 +192,8 @@ class StepFlowForm extends LitElement { } h2 { word-break: break-word; - padding-right: 72px; - } - :host-context([style*="direction: rtl;"]) h2 { - padding-right: auto !important; - padding-left: 72px !important; + padding-inline-end: 72px; + direction: var(--direction); } `, ]; diff --git a/src/dialogs/config-flow/step-flow-pick-flow.ts b/src/dialogs/config-flow/step-flow-pick-flow.ts index 1b7d401e8e..cb942fe3da 100644 --- a/src/dialogs/config-flow/step-flow-pick-flow.ts +++ b/src/dialogs/config-flow/step-flow-pick-flow.ts @@ -104,11 +104,8 @@ class StepFlowPickFlow extends LitElement { margin: 16px 0; } h2 { - padding-right: 66px; - } - :host-context([style*="direction: rtl;"]) h2 { - padding-right: auto !important; - padding-left: 66px !important; + padding-inline-end: 66px; + direction: var(--direction); } @media all and (max-height: 900px) { div { diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts index c71ccb338f..797ae3c4af 100644 --- a/src/dialogs/config-flow/step-flow-pick-handler.ts +++ b/src/dialogs/config-flow/step-flow-pick-handler.ts @@ -311,11 +311,8 @@ class StepFlowPickHandler extends LitElement { border-bottom-color: var(--divider-color); } h2 { - padding-right: 66px; - } - :host-context([style*="direction: rtl;"]) h2 { - padding-right: auto !important; - padding-left: 66px !important; + padding-inline-end: 66px; + direction: var(--direction); } @media all and (max-height: 900px) { mwc-list { diff --git a/src/dialogs/config-flow/styles.ts b/src/dialogs/config-flow/styles.ts index e8257b92c8..3d93386476 100644 --- a/src/dialogs/config-flow/styles.ts +++ b/src/dialogs/config-flow/styles.ts @@ -3,7 +3,11 @@ import { css } from "lit"; export const configFlowContentStyles = css` h2 { margin: 24px 38px 0 0; + margin-inline-start: 0px; + margin-inline-end: 38px; padding: 0 24px; + padding-inline-start: 24px; + padding-inline-end: 24px; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: var( diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index ce98a213e7..7d7d9bbd86 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -460,17 +460,13 @@ export default class HaAutomationActionRow extends LitElement { border-top-left-radius: var(--ha-card-border-radius); } .card-menu { - float: right; + float: var(--float-end, right); z-index: 3; margin: 4px; --mdc-theme-text-primary-on-background: var(--primary-text-color); display: flex; align-items: center; } - :host-context([style*="direction: rtl;"]) .card-menu { - right: initial; - left: 16px; - } mwc-list-item[disabled] { --mdc-theme-text-primary-on-background: var(--disabled-text-color); } diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index 02509f76d2..f5450196e0 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -288,16 +288,13 @@ export default class HaAutomationConditionRow extends LitElement { border-top-left-radius: var(--ha-card-border-radius); } .card-menu { - float: right; + float: var(--float-end, right); z-index: 3; margin: 4px; --mdc-theme-text-primary-on-background: var(--primary-text-color); display: flex; align-items: center; } - :host-context([style*="direction: rtl;"]) .card-menu { - float: left; - } mwc-list-item[disabled] { --mdc-theme-text-primary-on-background: var(--disabled-text-color); } diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index 459877933c..b7a2a6de2e 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -487,16 +487,13 @@ export default class HaAutomationTriggerRow extends LitElement { border-top-left-radius: var(--ha-card-border-radius); } .card-menu { - float: right; + float: var(--float-end, right); z-index: 3; margin: 4px; --mdc-theme-text-primary-on-background: var(--primary-text-color); display: flex; align-items: center; } - :host-context([style*="direction: rtl;"]) .card-menu { - float: left; - } .triggered { cursor: pointer; position: absolute; diff --git a/src/panels/config/integrations/ha-integration-header.ts b/src/panels/config/integrations/ha-integration-header.ts index 05506898cc..84988ab146 100644 --- a/src/panels/config/integrations/ha-integration-header.ts +++ b/src/panels/config/integrations/ha-integration-header.ts @@ -135,17 +135,19 @@ export class HaIntegrationHeader extends LitElement { .header { display: flex; position: relative; - padding: 0 8px 8px 16px; + padding-top: 0px; + padding-bottom: 8px; + padding-inline-start: 16px; + padding-inline-end: 8px; + direction: var(--direction); } .header img { - margin-right: 16px; margin-top: 16px; + margin-inline-start: initial; + margin-inline-end: 16px; width: 40px; height: 40px; - } - :host-context([style*="direction: rtl;"]) .header img { - margin-right: auto !important; - margin-left: 16px; + direction: var(--direction); } .header .info { flex: 1; diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts index 7bbbf3ff3c..d540d23474 100644 --- a/src/panels/config/logs/error-log-card.ts +++ b/src/panels/config/logs/error-log-card.ts @@ -16,7 +16,6 @@ import "../../../components/ha-ansi-to-html"; import "../../../components/ha-card"; import "../../../components/ha-icon-button"; import "../../../components/ha-select"; -import { computeRTLDirection } from "../../../common/util/compute_rtl"; import { fetchErrorLog } from "../../../data/error_log"; import { extractApiErrorMessage } from "../../../data/hassio/common"; import { fetchHassioLogs } from "../../../data/hassio/supervisor"; @@ -64,11 +63,7 @@ class ErrorLogCard extends LitElement { : ""} ${!this._logHTML ? html` - + ${this.hass.localize("ui.panel.config.logs.load_logs")} ` diff --git a/src/panels/config/logs/system-log-card.ts b/src/panels/config/logs/system-log-card.ts index f774a657c3..8286791f25 100644 --- a/src/panels/config/logs/system-log-card.ts +++ b/src/panels/config/logs/system-log-card.ts @@ -18,7 +18,6 @@ import { import { HomeAssistant } from "../../../types"; import { showSystemLogDetailDialog } from "./show-dialog-system-log-detail"; import { formatSystemLogTime } from "./util"; -import { computeRTLDirection } from "../../../common/util/compute_rtl"; @customElement("system-log-card") export class SystemLogCard extends LitElement { @@ -86,7 +85,7 @@ export class SystemLogCard extends LitElement { : html` ${this._items.length === 0 ? html` -
+
${this.hass.localize("ui.panel.config.logs.no_issues")}
` @@ -132,7 +131,7 @@ export class SystemLogCard extends LitElement { ` )} -
+
>(superClass: T) => this.style.direction = direction; document.dir = direction; this.style.setProperty("--direction", direction); + this.style.setProperty("--float-end", "left"); } /**