From 2f4e7b388b19f14417b404776b3975b8e765307a Mon Sep 17 00:00:00 2001
From: Nico Hirsch <30938717+noxhirsch@users.noreply.github.com>
Date: Tue, 10 Nov 2020 18:01:33 +0100
Subject: [PATCH] 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>
---
 src/components/ha-dialog.ts | 1 +
 src/resources/ha-style.ts   | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index c94fbb2115..75676269f7 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -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);
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index 0f0c7e2dbb..7167bde061 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -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>`;