Add dialog backdrop blur theme variable (#7635)

* Add dialog backdrop blur theme var

* Update src/components/ha-dialog.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Add backdrop-filter to iron-overlay-backdrop

* Revert change from opacity to rgba

* Add comment "for paper-dialog"

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Nico Hirsch 2020-11-10 18:01:33 +01:00 committed by GitHub
parent 2e289cd152
commit 2f4e7b388b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 0 deletions

View File

@ -40,6 +40,7 @@ export class HaDialog extends MwcDialog {
.mdc-dialog {
--mdc-dialog-scroll-divider-color: var(--divider-color);
z-index: var(--dialog-z-index, 7);
backdrop-filter: var(--dialog-backdrop-filter, none);
}
.mdc-dialog__actions {
justify-content: var(--justify-action-buttons, flex-end);

View File

@ -113,6 +113,11 @@ documentContainer.innerHTML = `<custom-style>
paper-dialog-scrollable.can-scroll > .scrollable {
-webkit-overflow-scrolling: touch !important;
}
/* for paper-dialog */
iron-overlay-backdrop {
backdrop-filter: var(--dialog-backdrop-filter, none);
}
</style>
</custom-style>`;