jeans/esp-web-tools
jeans/esp-web-tools
1
0
Fork 0
mirror of https://github.com/esphome/esp-web-tools.git synced 2025-07-29 06:36:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make input select/textfield work better when bad REM defined (#219)

Browse Source
This commit is contained in:
Paulus Schoutsen 2022-04-13 14:01:56 -07:00 committed by GitHub
parent d87f076071
commit 627b106e18
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/ewt-select.ts
View File

@ -1,5 +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 { css } from "lit";
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
@ -8,7 +9,15 @@ declare global {
} }
export class EwtSelect extends SelectBase { export class EwtSelect extends SelectBase {
static override styles = [styles]; static override styles = [
styles,
// rem -> em conversion
css`
.mdc-floating-label {
line-height: 1.15em;
}
`,
];
} }
customElements.define("ewt-select", EwtSelect); customElements.define("ewt-select", EwtSelect);

11
src/components/ewt-textfield.ts
View File

@ -1,5 +1,6 @@
import { TextFieldBase } from "@material/mwc-textfield/mwc-textfield-base"; import { TextFieldBase } from "@material/mwc-textfield/mwc-textfield-base";
import { styles } from "@material/mwc-textfield/mwc-textfield.css"; import { styles } from "@material/mwc-textfield/mwc-textfield.css";
import { css } from "lit";
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
@ -8,7 +9,15 @@ declare global {
} }
export class EwtTextfield extends TextFieldBase { export class EwtTextfield extends TextFieldBase {
static override styles = [styles]; static override styles = [
styles,
// rem -> em conversion
css`
.mdc-floating-label {
line-height: 1.15em;
}
`,
];
} }
customElements.define("ewt-textfield", EwtTextfield); customElements.define("ewt-textfield", EwtTextfield);

2
src/styles.ts
View File

@ -20,6 +20,8 @@ export const dialogStyles = css`
--mdc-typography-body1-line-height: 1.5em; --mdc-typography-body1-line-height: 1.5em;
--mdc-typography-button-font-size: 0.875em; --mdc-typography-button-font-size: 0.875em;
--mdc-typography-button-line-height: 2.25em; --mdc-typography-button-line-height: 2.25em;
--mdc-typography-subtitle1-font-size: 1em;
--mdc-typography-subtitle1-line-height: 1.75em;
} }
a { a {