浏览代码

Add menu item styling

sbkwgh 8 年之前
父节点
当前提交
e5cb6bd4fc
共有 1 个文件被更改,包括 25 次插入1 次删除
  1. 25 1
      src/components/NotificationButton.vue

+ 25 - 1
src/components/NotificationButton.vue

@@ -26,7 +26,15 @@
 				:class='{ "notification_button__small_triangle--empty": !notifications.length}'
 			></div>
 			<div class='notification_button__menu'>
-				<div v-for='notification in notifications' class='notification_button__menu__item'>qwertyuiopasdfghjkl</div>
+				<div v-for='notification in notifications' class='notification_button__menu__item'>
+					<div class='notification_button__menu__item__header'>
+						<span>New mention</span>
+						<span class='notification_button__menu__item__header__date'>{{new Date() | formatDate }}</span>
+					</div>
+					<div>
+						<span class='notification_button__menu__item__user'>@John</span> wrote "Message here 123..."
+					</div>
+				</div>
 				<div class='notification_button__menu__empty' v-if='!notifications.length'>
 					<span>{{emojis[emojiIndex % 6]}}</span>
 					No notifications
@@ -187,6 +195,22 @@
 				&:active {
 					background-color: $color__lightgray--darker;
 				}
+
+				
+				@at-root #{&}__user {
+					font-weight: 400;
+					cursor: pointer;
+				}
+
+				@at-root #{&}__header {
+					display: flex;
+					justify-content: space-between;
+					font-size: 0.9rem;
+
+					@at-root #{&}__date {
+						color: $color__text--secondary;
+					}
+				}
 			}
 		}