notifications: make popup window

1 files changed, 10 insertions, 74 deletions

diff --git a/scss/notifpopups.scss b/scss/notifpopups.scss
index 25e52e1..cec24a4 100644
--- a/scss/notifpopups.scss
+++ b/scss/notifpopups.scss
@@ -21,86 +21,22 @@
     min-width: lib.s(410);
     padding-left: lib.s(10); // So notifications can overshoot for init animation
 
-    .wrapper {
-        padding-top: lib.s(10);
-    }
-
     .notification {
-        @include lib.rounded(8, $tr: 0, $br: 0);
-        @include lib.shadow;
-        @include font.main;
-        @include popup(scheme.$lavender);
-
-        background-color: scheme.$base;
-        color: scheme.$text;
-        padding: lib.s(10) lib.s(12);
-
-        @include lib.spacing($vertical: true);
-
-        &.low {
-            @include popup(scheme.$overlay0);
-        }
-
-        &.critical {
-            @include popup(scheme.$red);
+        .wrapper {
+            padding-top: lib.s(10);
         }
-    }
-
-    .header,
-    .content {
-        padding: 0 lib.s(5);
-    }
-
-    .header {
-        @include font.mono;
-        @include lib.spacing(5);
-    }
-
-    .content {
-        @include lib.spacing(10);
-    }
-
-    .app-icon {
-        font-size: lib.s(18);
-    }
-
-    .image {
-        @include lib.rounded(10);
-
-        background-size: cover;
-        background-position: center;
-        min-width: lib.s(64);
-        min-height: lib.s(64);
-        margin-top: lib.s(3);
-    }
-
-    .summary {
-        @include font.title;
-
-        font-size: lib.s(16);
-    }
-
-    .body {
-        font-size: lib.s(14);
-    }
-
-    .actions {
-        @include lib.spacing;
-
-        & > * {
-            @include lib.rounded(5);
-            @include lib.element-decel;
 
-            padding: lib.s(5) lib.s(10);
-            background-color: scheme.$surface0;
+        .inner {
+            @include lib.rounded(8, $tr: 0, $br: 0);
+            @include lib.shadow;
+            @include popup(scheme.$lavender);
 
-            &:hover,
-            &:focus {
-                background-color: scheme.$surface1;
+            &.low {
+                @include popup(scheme.$overlay0);
             }
 
-            &:active {
-                background-color: scheme.$surface2;
+            &.critical {
+                @include popup(scheme.$red);
             }
         }
     }