diff options
Diffstat (limited to 'src/components/notifications')
| -rw-r--r-- | src/components/notifications/notifications.scss | 15 | ||||
| -rw-r--r-- | src/components/notifications/notifications.vue | 3 |
2 files changed, 16 insertions, 2 deletions
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 8e3e0721..6ad7ec1e 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -13,6 +13,19 @@ } } + .unseen-count { + display: inline-block; + background-color: rgba(255, 16, 8, 0.8); + text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); + min-width: 1.3em; + border-radius: 1.3em; + margin: 0 0.2em 0 -0.4em; + color: white; + font-size: 0.9em; + text-align: center; + line-height: 1.3em; + } + .notification { // Will have to use pixels here to ensure consistent distance with // pad alone and pad + border, browsers bad at rounding this with em, @@ -64,7 +77,7 @@ } .unseen { - border-left: 4px solid rgba(255, 48, 16, 0.65); + border-left: 4px solid rgba(255, 16, 8, 0.75); padding-left: 6px; } } diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index e0dcb12d..91f6cfdc 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -2,7 +2,8 @@ <div class="notifications"> <div class="panel panel-default base00-background"> <div class="panel-heading base01-background base04"> - Notifications ({{unseenCount}}) + <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span> + Notifications <button @click.prevent="markAsSeen" class="base06 base02-background read-button">Read!</button> </div> <div class="panel-body"> |