diff --git a/src/components/ha-water_heater-control.js b/src/components/ha-water_heater-control.js
index f92034266e..a2521e5d8a 100644
--- a/src/components/ha-water_heater-control.js
+++ b/src/components/ha-water_heater-control.js
@@ -26,6 +26,7 @@ class HaWaterHeaterControl extends EventsMixin(PolymerElement) {
#target_temperature {
@apply --layout-self-center;
font-size: 200%;
+ direction: ltr;
}
.control-buttons {
font-size: 200%;
diff --git a/src/components/ha-water_heater-state.js b/src/components/ha-water_heater-state.js
index c9bd1147ac..4fb1330fcb 100644
--- a/src/components/ha-water_heater-state.js
+++ b/src/components/ha-water_heater-state.js
@@ -31,11 +31,16 @@ class HaWaterHeaterState extends LocalizeMixin(PolymerElement) {
font-weight: bold;
text-transform: capitalize;
}
+
+ .label {
+ direction: ltr;
+ display: inline-block;
+ }
- [[_localizeState(stateObj)]]
- [[computeTarget(hass, stateObj)]]
+ [[_localizeState(stateObj)]]
+ [[computeTarget(hass, stateObj)]]
diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts
index 7a49575171..8b62007c9a 100644
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -1,6 +1,5 @@
import "@lit-labs/virtualizer";
import "@material/mwc-list/mwc-list";
-import "@material/mwc-list/mwc-list-item";
import type { ListItem } from "@material/mwc-list/mwc-list-item";
import {
mdiClose,
@@ -34,6 +33,7 @@ import "../../components/ha-circular-progress";
import "../../components/ha-header-bar";
import "../../components/ha-icon-button";
import "../../components/ha-textfield";
+import "../../components/ha-list-item";
import { fetchHassioAddonsInfo } from "../../data/hassio/addon";
import { domainToName } from "../../data/integration";
import { getPanelNameTranslationKey } from "../../data/panel";
@@ -282,7 +282,7 @@ export class QuickBar extends LitElement {
private _renderEntityItem(item: EntityItem, index?: number) {
return html`
-
`
: null}
-
+
`;
}
private _renderCommandItem(item: CommandItem, index?: number) {
return html`
-
${item.primaryText}
-
+
`;
}
@@ -363,7 +363,7 @@ export class QuickBar extends LitElement {
}
private _getItemAtIndex(index: number): ListItem | null {
- return this.renderRoot.querySelector(`mwc-list-item[index="${index}"]`);
+ return this.renderRoot.querySelector(`ha-list-item[index="${index}"]`);
}
private _addSpinnerToCommandItem(index: number): void {
@@ -457,7 +457,7 @@ export class QuickBar extends LitElement {
}
private _handleItemClick(ev) {
- const listItem = ev.target.closest("mwc-list-item");
+ const listItem = ev.target.closest("ha-list-item");
this.processItemAndCloseDialog(
listItem.item,
Number(listItem.getAttribute("index"))
@@ -771,11 +771,6 @@ export class QuickBar extends LitElement {
}
}
- ha-icon.entity,
- ha-svg-icon.entity {
- margin-left: 20px;
- }
-
ha-svg-icon.prefix {
color: var(--primary-text-color);
}
@@ -809,11 +804,12 @@ export class QuickBar extends LitElement {
direction: var(--direction);
}
- mwc-list-item {
+ ha-list-item {
width: 100%;
+ --mdc-list-item-graphic-margin: 20px;
}
- mwc-list-item.command-item {
+ ha-list-item.command-item {
text-transform: capitalize;
}
diff --git a/src/state-summary/state-card-display.ts b/src/state-summary/state-card-display.ts
index 48800fb2dd..bda437929d 100755
--- a/src/state-summary/state-card-display.ts
+++ b/src/state-summary/state-card-display.ts
@@ -75,30 +75,21 @@ export class StateCardDisplay extends LitElement {
return [
haStyle,
css`
- :host([rtl]) {
- direction: rtl;
- text-align: right;
- }
-
state-info {
flex: 1 1 auto;
min-width: 0;
}
.state {
color: var(--primary-text-color);
- margin-left: 16px;
- text-align: right;
+ margin-inline-start: 16px;
+ margin-inline-end: initial;
+ text-align: var(--float-end, right);
flex: 0 0 auto;
overflow-wrap: break-word;
display: flex;
align-items: center;
+ direction: ltr;
}
- :host([rtl]) .state {
- margin-right: 16px;
- margin-left: 0;
- text-align: left;
- }
-
.state.has-unit_of_measurement {
white-space: nowrap;
}