Fix bell Icon Badge

This commit is contained in:
Raven Scott
2026-05-30 19:14:53 -04:00
parent 9974202c39
commit 6d94b9c16b
2 changed files with 20 additions and 10 deletions
+1 -1
View File
@@ -84,8 +84,8 @@
<div class="admin-alerts-wrap"> <div class="admin-alerts-wrap">
<button type="button" id="admin-alerts-button" class="admin-topbar-action admin-alerts-bell" title="Alerts" aria-label="Alerts" aria-expanded="false" aria-haspopup="true"> <button type="button" id="admin-alerts-button" class="admin-topbar-action admin-alerts-bell" title="Alerts" aria-label="Alerts" aria-expanded="false" aria-haspopup="true">
<i class="fas fa-bell" aria-hidden="true"></i> <i class="fas fa-bell" aria-hidden="true"></i>
<span id="admin-alerts-badge" class="admin-alerts-badge">0</span>
</button> </button>
<span id="admin-alerts-badge" class="admin-alerts-badge" aria-hidden="true">0</span>
<div id="admin-alerts-panel" class="admin-alerts-panel" role="dialog" aria-label="Alerts"> <div id="admin-alerts-panel" class="admin-alerts-panel" role="dialog" aria-label="Alerts">
<header class="admin-alerts-panel-header"> <header class="admin-alerts-panel-header">
<h3 class="admin-alerts-panel-title">Alerts</h3> <h3 class="admin-alerts-panel-title">Alerts</h3>
+19 -9
View File
@@ -1455,6 +1455,7 @@ dialog > .dialog-notifications > * {
padding: 0 1rem; padding: 0 1rem;
border-bottom: 1px solid var(--admin-border); border-bottom: 1px solid var(--admin-border);
background: var(--admin-bg-muted); background: var(--admin-bg-muted);
overflow: visible;
} }
.admin-topbar-spacer { .admin-topbar-spacer {
@@ -1496,10 +1497,14 @@ dialog > .dialog-notifications > * {
/* Alerts bell + dropdown */ /* Alerts bell + dropdown */
.admin-alerts-wrap { .admin-alerts-wrap {
position: relative; position: relative;
display: inline-flex;
flex-shrink: 0;
overflow: visible;
} }
.admin-alerts-bell { .admin-alerts-bell {
position: relative; position: relative;
overflow: visible;
} }
.admin-alerts-bell--active { .admin-alerts-bell--active {
@@ -1514,23 +1519,28 @@ dialog > .dialog-notifications > * {
.admin-alerts-badge { .admin-alerts-badge {
display: none; display: none;
position: absolute; position: absolute;
top: -0.25rem; top: -0.3125rem;
right: -0.25rem; right: -0.4375rem;
min-width: 1.125rem; z-index: 2;
height: 1.125rem; min-width: 1.25rem;
padding: 0 0.3125rem; height: 1.25rem;
padding: 0 0.375rem;
border-radius: var(--radius-full); border-radius: var(--radius-full);
border: 2px solid var(--admin-bg-muted);
background: var(--admin-warning); background: var(--admin-warning);
color: #0a0e1a; color: #0a0e1a;
font-size: 0.625rem; font-size: 0.6875rem;
font-weight: 700; font-weight: 700;
line-height: 1.125rem; line-height: 1;
text-align: center; white-space: nowrap;
align-items: center;
justify-content: center;
pointer-events: none; pointer-events: none;
box-sizing: border-box;
} }
.admin-alerts-badge--visible { .admin-alerts-badge--visible {
display: block; display: inline-flex;
} }
.admin-alerts-panel { .admin-alerts-panel {