jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-16 13:56:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace host-context with css properties

Browse Source
This commit is contained in:
Yosi Levy 2022-05-07 06:39:39 +03:00
parent 552c474feb
commit 6c73ae5bf7
3 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ha-fab.ts
View File

@ -11,11 +11,9 @@ export class HaFab extends Fab {
static override styles = Fab.styles.concat([
css`
:host-context([style*="direction: rtl;"])
.mdc-fab--extended
.mdc-fab__icon {
margin-left: 12px !important;
margin-right: calc(12px - 20px) !important;
.mdc-fab--extended .mdc-fab__icon {
margin-left: var(--rtl-12px, calc(12px - 20px)) !important;
margin-right: var(--rtl--8px, 12px) !important;
}
`,
]);

4
src/panels/config/logs/error-log-card.ts
View File

@ -235,8 +235,8 @@ class ErrorLogCard extends LitElement {
color: var(--warning-color);
}
:host-context([style*="direction: rtl;"]) mwc-button {
direction: rtl;
mwc-button {
direction: var(--rtl-dir, ltr);
}
`;
}

19
src/state/translations-mixin.ts
View File

@ -180,12 +180,29 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
private _applyTranslations(hass: HomeAssistant) {
document.querySelector("html")!.setAttribute("lang", hass.language);
this.style.direction = computeRTL(hass) ? "rtl" : "ltr";
this._applyDirection(hass);
this._loadCoreTranslations(hass.language);
this.__loadedFragmetTranslations = new Set();
this._loadFragmentTranslations(hass.language, hass.panelUrl);
}
private _applyDirection(hass: HomeAssistant) {
if (computeRTL(hass)) {
this.style.direction = "rtl";
// apply custom properties used to fix RTL appearance throughout the system
this.style.setProperty("--rtl-12px", "12px");
this.style.setProperty("--rtl--8px", "-8px");
this.style.setProperty("--rtl-dir", "rtl");
} else {
// clear all custom properties (can't use "all" for this)
for (let i = this.style.length; i--; ) {
this.style.removeProperty(this.style[i]);
}
this.style.direction = "ltr";
}
}
/**
* Load translations from the backend
* @param language language to fetch