Improve password show/hide buttons (#18176)

This commit is contained in:
Kendell R 2023-10-10 06:26:54 -07:00 committed by GitHub
parent b3f1783269
commit 8f1a6ef1b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 21 deletions

View File

@ -26,14 +26,13 @@ export class HaAuthFormString extends HaFormString {
} }
ha-auth-form-string ha-icon-button { ha-auth-form-string ha-icon-button {
position: absolute; position: absolute;
top: 1em; top: 8px;
right: 12px; right: 8px;
--mdc-icon-button-size: 24px;
color: var(--secondary-text-color);
}
ha-auth-form-string ha-icon-button {
inset-inline-start: initial; inset-inline-start: initial;
inset-inline-end: 12px; inset-inline-end: 8px;
--mdc-icon-button-size: 40px;
--mdc-icon-size: 20px;
color: var(--secondary-text-color);
direction: var(--direction); direction: var(--direction);
} }
</style> </style>
@ -63,7 +62,7 @@ export class HaAuthFormString extends HaFormString {
.validationMessage=${this.schema.required ? "Required" : undefined} .validationMessage=${this.schema.required ? "Required" : undefined}
@input=${this._valueChanged} @input=${this._valueChanged}
@change=${this._valueChanged} @change=${this._valueChanged}
></ha-auth-textfield> ></ha-auth-textfield>
${this.renderIcon()} ${this.renderIcon()}
</ha-auth-textfield> </ha-auth-textfield>
`; `;

View File

@ -138,15 +138,13 @@ export class HaFormString extends LitElement implements HaFormElement {
} }
ha-icon-button { ha-icon-button {
position: absolute; position: absolute;
top: 1em; top: 8px;
right: 12px; right: 8px;
--mdc-icon-button-size: 24px;
color: var(--secondary-text-color);
}
ha-icon-button {
inset-inline-start: initial; inset-inline-start: initial;
inset-inline-end: 12px; inset-inline-end: 8px;
--mdc-icon-button-size: 40px;
--mdc-icon-size: 20px;
color: var(--secondary-text-color);
direction: var(--direction); direction: var(--direction);
} }
`; `;

View File

@ -111,13 +111,13 @@ export class HaTextSelector extends LitElement {
} }
ha-icon-button { ha-icon-button {
position: absolute; position: absolute;
top: 10px; top: 8px;
right: 10px; right: 8px;
--mdc-icon-button-size: 36px; inset-inline-start: initial;
inset-inline-end: 8px;
--mdc-icon-button-size: 40px;
--mdc-icon-size: 20px; --mdc-icon-size: 20px;
color: var(--secondary-text-color); color: var(--secondary-text-color);
inset-inline-start: initial;
inset-inline-end: 10px;
direction: var(--direction); direction: var(--direction);
} }
`; `;