Fix icon color in select (#11842)

This commit is contained in:
Bram Kragten 2022-02-24 21:35:09 +01:00 committed by GitHub
parent fc31929f41
commit 48355aa98e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 3 deletions

View File

@ -1,6 +1,6 @@
import { SelectBase } from "@material/mwc-select/mwc-select-base"; import { SelectBase } from "@material/mwc-select/mwc-select-base";
import { styles } from "@material/mwc-select/mwc-select.css"; import { styles } from "@material/mwc-select/mwc-select.css";
import { html, nothing } from "lit"; import { css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { debounce } from "../common/util/debounce"; import { debounce } from "../common/util/debounce";
import { nextRender } from "../common/util/render-status"; import { nextRender } from "../common/util/render-status";
@ -20,8 +20,6 @@ export class HaSelect extends SelectBase {
></span>`; ></span>`;
} }
static override styles = [styles];
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
window.addEventListener("translations-updated", this._translationsUpdated); window.addEventListener("translations-updated", this._translationsUpdated);
@ -39,6 +37,15 @@ export class HaSelect extends SelectBase {
await nextRender(); await nextRender();
this.layoutOptions(); this.layoutOptions();
}, 500); }, 500);
static override styles = [
styles,
css`
.mdc-select:not(.mdc-select--disabled) .mdc-select__icon {
color: var(--secondary-text-color);
}
`,
];
} }
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {

View File

@ -53,6 +53,10 @@ export class HaTextField extends TextFieldBase {
padding-right: var(--text-field-suffix-padding-right, 0px); padding-right: var(--text-field-suffix-padding-right, 0px);
} }
.mdc-text-field__icon {
color: var(--secondary-text-color);
}
input { input {
text-align: var(--text-field-text-align); text-align: var(--text-field-text-align);
} }