From 56c1920cc167b3c15d7ca734e52676571ab7f98d Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Thu, 14 Feb 2019 23:16:09 -0600
Subject: [PATCH] css is dumb

---
 package.json                                  |  1 -
 .../notifications/hui-notifications-button.ts | 26 +++++++++++++++----
 yarn.lock                                     | 11 --------
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index f986dc0baa..29f016bb22 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,6 @@
     "@polymer/iron-pages": "^3.0.1",
     "@polymer/iron-resizable-behavior": "^3.0.1",
     "@polymer/neon-animation": "^3.0.1",
-    "@polymer/paper-badge": "^3.0.1",
     "@polymer/paper-button": "^3.0.1",
     "@polymer/paper-card": "^3.0.1",
     "@polymer/paper-checkbox": "^3.0.1",
diff --git a/src/panels/lovelace/components/notifications/hui-notifications-button.ts b/src/panels/lovelace/components/notifications/hui-notifications-button.ts
index 169c1cc4c1..8d72ef1623 100644
--- a/src/panels/lovelace/components/notifications/hui-notifications-button.ts
+++ b/src/panels/lovelace/components/notifications/hui-notifications-button.ts
@@ -6,7 +6,6 @@ import {
   CSSResult,
   property,
 } from "lit-element";
-import "@polymer/paper-badge/paper-badge";
 import "@polymer/paper-icon-button/paper-icon-button";
 import { fireEvent } from "../../../../common/dom/fire_event";
 
@@ -22,7 +21,9 @@ class HuiNotificationsButton extends LitElement {
       ></paper-icon-button>
       ${this.notifications
         ? html`
-            <paper-badge .label="${this.notifications.length}"></paper-badge>
+            <span class="indicator">
+              <div>${this.notifications.length}</div>
+            </span>
           `
         : ""}
     `;
@@ -34,9 +35,24 @@ class HuiNotificationsButton extends LitElement {
         :host {
           position: relative;
         }
-        paper-badge {
-          left: 23px !important;
-          top: 0px !important;
+
+        .indicator {
+          position: absolute;
+          top: 0px;
+          right: -3px;
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          background: var(--accent-color);
+          pointer-events: none;
+          z-index: 1;
+        }
+
+        .indicator > div {
+          right: 7px;
+          top: 3px;
+          position: absolute;
+          font-size: 0.55em;
         }
       `,
     ];
diff --git a/yarn.lock b/yarn.lock
index 4a19d56968..318b196f2c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1148,17 +1148,6 @@
     "@polymer/iron-selector" "^3.0.0-pre.26"
     "@polymer/polymer" "^3.0.0"
 
-"@polymer/paper-badge@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-badge/-/paper-badge-3.0.1.tgz#ea973090342c66f99ea6ef1d32fc534ee40630e8"
-  integrity sha512-9lHB/AFPuDAY/+OPNio1Mi6JUAM8yQqzJEAkk99IwcCl9VB6uCjlrXVfistrYIv7z+Wy4SZHNEtA6xR1+FhCDg==
-  dependencies:
-    "@polymer/iron-flex-layout" "^3.0.0-pre.26"
-    "@polymer/iron-icon" "^3.0.0-pre.26"
-    "@polymer/iron-resizable-behavior" "^3.0.0-pre.26"
-    "@polymer/paper-styles" "^3.0.0-pre.26"
-    "@polymer/polymer" "^3.0.0"
-
 "@polymer/paper-behaviors@^3.0.0-pre.27":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@polymer/paper-behaviors/-/paper-behaviors-3.0.1.tgz#83f1cd06489f484c1b108a2967fb01952df722ad"