diff options
| -rw-r--r-- | src/components/notifications/notifications.scss | 17 | ||||
| -rw-r--r-- | src/components/notifications/notifications.vue | 1 |
2 files changed, 16 insertions, 2 deletions
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index fcc0c3d4..26455ffb 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -26,9 +26,22 @@ color: var(--text, $fallback--text); } - .unseen { + .notification { + position: relative; + + .notification-overlay { + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + } - background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px) + &.unseen { + .notification-overlay { + background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px) + } + } } } diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 7a4322f9..eb6c4dd0 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -13,6 +13,7 @@ </div> <div class="panel-body"> <div v-for="notification in visibleNotifications" :key="notification.action.id" class="notification" :class='{"unseen": !notification.seen}'> + <div class="notification-overlay"></div> <notification :notification="notification"></notification> </div> </div> |