From 0fbf3e965d7723610eee386e3c2520a4a09c6874 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sun, 15 Aug 2021 09:25:31 -0700
Subject: [PATCH] Move editor CSS out to its own file.

---
 src/editor.ts                | 35 +++++------------------------------
 src/frigate-card-editor.scss | 27 +++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 30 deletions(-)
 create mode 100644 src/frigate-card-editor.scss

diff --git a/src/editor.ts b/src/editor.ts
index 7d21ff59..0b3fca00 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -6,13 +6,15 @@ import {
   property,
   TemplateResult,
   CSSResult,
-  css,
   state,
+  unsafeCSS,
 } from 'lit-element';
 import { HomeAssistant, fireEvent, LovelaceCardEditor } from 'custom-card-helpers';
 
 import { FrigateCardConfig } from './types';
 
+import frigate_card_editor_style from './frigate-card-editor.scss'
+
 const options = {
   required: {
     icon: 'tune',
@@ -236,35 +238,8 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
     fireEvent(this, 'config-changed', { config: this._config });
   }
 
+  // Return compiled CSS styles (thus safe to use with unsafeCSS).
   static get styles(): CSSResult {
-    return css`
-      .option {
-        padding: 4px 0px;
-        cursor: pointer;
-      }
-      .row {
-        display: flex;
-        margin-bottom: -14px;
-        pointer-events: none;
-      }
-      .title {
-        padding-left: 16px;
-        margin-top: -6px;
-        pointer-events: none;
-      }
-      .secondary {
-        padding-left: 40px;
-        color: var(--secondary-text-color);
-        pointer-events: none;
-      }
-      .values {
-        padding-left: 16px;
-        background: var(--secondary-background-color);
-        display: grid;
-      }
-      ha-formfield {
-        padding-bottom: 8px;
-      }
-    `;
+    return unsafeCSS(frigate_card_editor_style);
   }
 }
diff --git a/src/frigate-card-editor.scss b/src/frigate-card-editor.scss
new file mode 100644
index 00000000..f32ca7c1
--- /dev/null
+++ b/src/frigate-card-editor.scss
@@ -0,0 +1,27 @@
+.option {
+  padding: 4px 0px;
+  cursor: pointer;
+}
+.row {
+  display: flex;
+  margin-bottom: -14px;
+  pointer-events: none;
+}
+.title {
+  padding-left: 16px;
+  margin-top: -6px;
+  pointer-events: none;
+}
+.secondary {
+  padding-left: 40px;
+  color: var(--secondary-text-color);
+  pointer-events: none;
+}
+.values {
+  padding-left: 16px;
+  background: var(--secondary-background-color);
+  display: grid;
+}
+ha-formfield {
+  padding-bottom: 8px;
+}
\ No newline at end of file