ghost/core/client/app/styles/components/notifications.scss

// ------------------------------------------------------------
// Notifications
//
// Styles for notifications
//
// * Wrappers
// * Base Notification
// * Individual Notifications
// ------------------------------------------------------------


//
// Wrappers
// --------------------------------------------------

.notifications.top {
    // Remove margins from top notifications so there's no space underneath
    .notification-success,
    .notification-error,
    .notification-warn,
    .notification-info {
        margin: 0;
    }

    // Transition position of top notifications when the a settings menu or navigation is open
    transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);

    @media (max-width: 900px) {
        transition: transform 0.4s cubic-bezier($settings-menu-bezier);
    }

    body.global-nav-expanded & {
        transform: translate3d(260px, 0px, 0px);
    }

    body.settings-menu-expanded & {
        @media (max-width: 350px) {
            transform: translate3d(-100%, 0px, 0px);
        }
        @media (min-width: 351px) {
            transform: translate3d(-350px, 0px, 0px);

            &:before {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                z-index: 1000;
                width: 1px;
                background: #EDECE4;
            }
        }
    }
}

// Top notifications, usually the update notification
@media (max-width: 900px) {
    .notifications.top {
        position: relative;
        z-index: 20;
    }

    .viewport[data-notification-count='1'] {
        top: 43px;

        .settings-view-header,
        .settings-subview-header,
        .post-preview-header {
            top: 43px;
        }
    }
}

@media (min-width: 901px) {
    .notifications.top {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 20;
    }

    .viewport[data-notification-count='1'] {
        .page-content {
            top: 103px;
        }
    }
}

// Bottom notifications, which is 99% of them
.notifications.bottom {
    @media (max-width: 400px) {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
    }

    @media (min-width: 401px) {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 800;
        width: 300px;
    }
}


//
// 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: $box-shadow;
    transform: translateZ(0);

    @media (max-width: 400px) {
        margin-bottom: 1px;
    }

    .notification-message {
        display: block;
        padding: 10px 43px 10px 57px;
        max-height: 253px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .close {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 34px;
        color: rgba(255,255,255,0.6);
        @include icon-after($i-close) {
            padding: 10px;
            position: absolute;
            top: 4px;
            right: 1px;
        }

        &:hover {
            color: #fff;
        }
    } // .close

    a {
        color: inherit;
        text-decoration: underline;
    }
}//%notification


//
// Individual Notifications
// --------------------------------------------------

.notification-success {
    @extend %notification;
    @include icon($i-success);
    background: $green;

    &.notification-passive {
        animation: fade-out 1s linear;
        animation-delay: 3s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    &.notification-passive:hover {
        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;
}

.notification-upgrade {
    color: $red;

    a {
        color: $red;
        text-decoration: underline;
    }
}