Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Notifications

Browse source
This commit is contained in:
John O'Nolan 2014-07-30 08:12:17 +03:00
parent 2f4b0bee1c
commit a513392db5
2 changed files with 132 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
core/client/assets/sass/components/notifications.scss Normal file
View file

@ -0,0 +1,131 @@
//
// Notifications
// --------------------------------------------------
// Wrapper
.notifications {
@media (min-width: 401px) {
position: absolute;
bottom: 0;
left: 0;
z-index: 980;
width: 300px;
}
@media (max-width: 400px) {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
}
}
// TODO: What is this? Docs plz.
.js-bb-notification {
@include transform(translateZ(0));
}
//
// Base Notification
// --------------------------------------------------
.notification {
@include icon($i-notification) {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 44px;
padding: 14px 15px;
text-align: center;
color: rgba(255,255,255,0.8);
background: rgba(0,0,0,0.1);
};
width: 100%;
min-height: 40px;
max-height: 253px;
margin: 0 0 15px 0;
color: rgba(255,255,255,0.9);
background: $blue;
position: relative;
box-shadow: $shadow;
@include transform(translateZ(0));
@media (max-width: 400px) {
margin-bottom: 1px;
}
.notification-message {
display: block;
padding: 10px 43px 10px 57px;
max-height: 253px;
overflow: auto;
}
.close {
@include icon-after($i-close) {
padding: 6px;
position: absolute;
top: 8px;
right: 9px;
};
color: rgba(255,255,255,0.6);
&:hover {
color: #fff;
}
}
a {
color: inherit;
text-decoration: underline;
}
}
//
// Individual Notifications
// --------------------------------------------------
.notification-success {
@extend .notification;
@include icon($i-success);
background: $green;
&.notification-passive {
@include animation(fade-out 1s linear);
@include animation-delay(3s);
@include animation-iteration-count(1);
@include animation-fill-mode(forwards);
}
&.notification-passive:hover {
@include animation(fade-in-snap 0.2s linear);
}
}
.notification-error {
@extend .notification;
@include icon($i-error);
background: $red;
}
.notification-warn {
@extend .notification;
@include icon($i-info);
background: $orange;
}
.notification-info {
@extend .notification;
@include icon($i-info);
background: $blue;
}
// Hide extra space taken up by update notification
.update-available main {
bottom: 56px;
}

1
core/client/assets/sass/screen.scss
View file

@ -32,6 +32,7 @@
@import "components/navigation"; @import "components/navigation";
@import "components/modals"; @import "components/modals";
@import "components/notifications";
@import "components/dropdowns"; @import "components/dropdowns";