Make data table and checkbox themeable (#3712)

Added rgb vars, not sure we want to go that way, but otherwise we will get a lot of styles...
This commit is contained in:
Bram Kragten
2019-09-14 14:56:16 +02:00
committed by Paulus Schoutsen
parent a2c2f6a1e2
commit 4bb65b8ae1
3 changed files with 167 additions and 6 deletions

View File

@@ -1,7 +1,8 @@
import { Constructor, customElement } from "lit-element";
import { Constructor, customElement, CSSResult, css } from "lit-element";
import "@material/mwc-checkbox";
// tslint:disable-next-line
import { Checkbox } from "@material/mwc-checkbox";
import { style } from "@material/mwc-checkbox/mwc-checkbox-css";
// tslint:disable-next-line
const MwcCheckbox = customElements.get("mwc-checkbox") as Constructor<Checkbox>;
@@ -11,6 +12,18 @@ export class HaCheckbox extends MwcCheckbox {
super.firstUpdated();
this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
}
protected static get styles(): CSSResult[] {
return [
style,
css`
.mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate)
~ .mdc-checkbox__background {
border-color: rgba(var(--rgb-primary-text-color), 0.54);
}
`,
];
}
}
declare global {