Notifications

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

@@ -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;
+}

core/client/assets/sass/screen.scss

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