+ ${this.notifications.length}
+
`
: ""}
`;
@@ -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"