Ghost/core/client/assets/sass/components/notifications.scss

143 lines
2.9 KiB
SCSS
Raw Normal View History

2014-07-30 09:12:17 +04:00
//
// Notifications
// --------------------------------------------------
// Wrapper
.notifications {
@media (min-width: 401px) {
position: absolute;
bottom: 0;
left: 0;
z-index: 980;
width: 300px;
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
body.right-outlet-expanded & {
transform: translate3d(350px, 0px, 0px);
}
2014-07-30 09:12:17 +04:00
}
@media (max-width: 400px) {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
body.right-outlet-expanded & {
transform: translate3d(100%, 0px, 0px);
}
2014-07-30 09:12:17 +04:00
}
}
// TODO: What is this? Docs plz.
.js-bb-notification {
transform: translateZ(0);
2014-07-30 09:12:17 +04:00
}
//
// Base Notification
// --------------------------------------------------
%notification {
2014-07-30 09:12:17 +04:00
@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;
transform: translateZ(0);
2014-07-30 09:12:17 +04:00
@media (max-width: 400px) {
margin-bottom: 1px;
}
.notification-message {
display: block;
padding: 10px 43px 10px 57px;
max-height: 253px;
overflow: auto;
}
.close {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 34px;
2014-07-30 09:12:17 +04:00
@include icon-after($i-close) {
padding: 10px;
2014-07-30 09:12:17 +04:00
position: absolute;
top: 4px;
right: 1px;
2014-07-30 09:12:17 +04:00
};
color: rgba(255,255,255,0.6);
&:hover {
color: #fff;
}
} // .close
2014-07-30 09:12:17 +04:00
a {
color: inherit;
text-decoration: underline;
}
}
//
// Individual Notifications
// --------------------------------------------------
.notification-success {
@extend %notification;
2014-07-30 09:12:17 +04:00
@include icon($i-success);
background: $green;
&.notification-passive {
animation: fade-out 1s linear;
animation-delay: 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
2014-07-30 09:12:17 +04:00
}
&.notification-passive:hover {
animation: fade-in-snap 0.2s linear;
2014-07-30 09:12:17 +04:00
}
}
.notification-error {
@extend %notification;
2014-07-30 09:12:17 +04:00
@include icon($i-error);
background: $red;
}
.notification-warn {
@extend %notification;
2014-07-30 09:12:17 +04:00
@include icon($i-info);
background: $orange;
}
.notification-info {
@extend %notification;
2014-07-30 09:12:17 +04:00
@include icon($i-info);
background: $blue;
}
// Hide extra space taken up by update notification
.update-available main {
bottom: 56px;
}