TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-24 03:14:03 +03:00
Code Issues Projects Releases Wiki Activity

First pass new notification component

Browse Source
This commit is contained in:
John O'Nolan 2015-05-18 00:01:36 +01:00 committed by Hannah Wolfe
parent 9798a012f3
commit 3c3360c4f0
2 changed files with 52 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
ghost/admin/app/styles/components/notifications.css
View File

@ -1,2 +1,49 @@
/* Notifications
/* ---------------------------------------------------------- */
.gh-notification {
position: fixed;
bottom: 20px;
left: 20px;
display: flex;
padding: 4px;
width: 220px;
border: #e1e1e1 1px solid;
background: rgba(255,255,255,0.93);
border-radius: 4px;
box-shadow: rgba(0,0,0,0.06) 0 1px 7px;
color: #828282;
font-size: 1.2rem;
line-height: 1.4em;
}
.gh-notification-content {
flex-grow: 1;
padding: 10px 15px;
border-radius: 3px;
transition: background 0.2s ease;
}
.gh-notification:hover {
cursor: pointer;
}
.gh-notification:hover .gh-notification-content {
background: color(var(--blue) lightness(+34%));
}
.gh-notification-close {
position: absolute;
top: 0;
right: 0;
padding: 6px 6px 5px 5px;
background: #fff;
border-radius: 0 4px 0 4px;
font-size: 7px;
line-height: 5px;
}
.gh-notification-close:hover {
background: #fff;
color: var(--red);
}

10
ghost/admin/app/templates/components/gh-notification.hbs
View File

@ -1,6 +1,6 @@
<section class="js-notification {{typeClass}}">
<span class="notification-message">
<article class="gh-notification js-notification {{typeClass}}">
<div class="gh-notification-content">
{{message.message}}
</span>
<button class="close icon-x" {{action "closeNotification"}}><span class="hidden">Close</span></button>
</section>
</div>
<button class="gh-notification-close icon-x" {{action "closeNotification"}}><span class="hidden">Close</span></button>
</article>