notification popups

4 files changed, 130 insertions, 3 deletions

diff --git a/scss/_lib.scss b/scss/_lib.scss
index 19a2867..8c39778 100644
--- a/scss/_lib.scss
+++ b/scss/_lib.scss
@@ -1,3 +1,6 @@
+@use "sass:color";
+@use "scheme";
+
 $scale: 0.068rem;
 @function s($value: 1) {
     @return $value * $scale;
@@ -12,6 +15,14 @@ $scale: 0.068rem;
     border: s($width) $style $colour;
 }
 
+@mixin outer-border($colour, $alpha: 0.7, $width: 2, $style: solid) {
+    border: s($width) $style color.change($colour, $alpha: $alpha);
+}
+
+@mixin shadow($colour: scheme.$mantle, $alpha: 0.4, $x: 2, $y: 3, $blur: 8, $spread: 0) {
+    box-shadow: s($x) s($y) s($blur) s($spread) color.change($colour, $alpha: $alpha);
+}
+
 @mixin spacing($val: 5, $vertical: false) {
     $dir: if($vertical, bottom, right);
 
diff --git a/scss/bar.scss b/scss/bar.scss
index 618944a..9b4c60d 100644
--- a/scss/bar.scss
+++ b/scss/bar.scss
@@ -5,7 +5,7 @@
 
 .bar {
     @include lib.rounded(10, $tl: 0, $tr: 0);
-    @include lib.border(color.change(scheme.$rosewater, $alpha: 0.7), 2);
+    @include lib.outer-border(scheme.$rosewater);
     @include lib.spacing(10);
     @include font.mono;
 
@@ -27,8 +27,6 @@
     }
 
     label.icon {
-        @include font.icon;
-
         font-size: lib.s(18);
     }
 
diff --git a/scss/notifpopups.scss b/scss/notifpopups.scss
new file mode 100644
index 0000000..b8e2565
--- /dev/null
+++ b/scss/notifpopups.scss
@@ -0,0 +1,107 @@
+@use "sass:color";
+@use "scheme";
+@use "lib";
+@use "font";
+
+@mixin popup($colour) {
+    @include lib.outer-border($colour);
+
+    border-right: none;
+
+    .separator {
+        background-color: $colour;
+    }
+
+    .image {
+        @include lib.border(color.change($colour, $alpha: 0.05));
+    }
+}
+
+.notifpopups {
+    margin-top: lib.s(50); // Bar offset
+    min-width: lib.s(410);
+    padding-left: lib.s(10); // So notifications can overshoot for init animation
+
+    .wrapper {
+        padding-bottom: lib.s(10);
+    }
+
+    .popup {
+        @include lib.spacing($vertical: true);
+        @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);
+
+        &.low {
+            @include popup(scheme.$overlay0);
+        }
+
+        &.critical {
+            @include popup(scheme.$red);
+        }
+    }
+
+    .header,
+    .content {
+        padding: 0 lib.s(5);
+    }
+
+    .header {
+        @include lib.spacing(5);
+        @include font.mono;
+    }
+
+    .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;
+
+            &:hover,
+            &:focus {
+                background-color: scheme.$surface1;
+            }
+
+            &:active {
+                background-color: scheme.$surface2;
+            }
+        }
+    }
+}
diff --git a/scss/widgets.scss b/scss/widgets.scss
index 0e11f46..4eb9f3f 100644
--- a/scss/widgets.scss
+++ b/scss/widgets.scss
@@ -3,6 +3,17 @@
 @use "lib";
 @use "font";
 
+label.icon {
+    @include font.icon;
+}
+
+.separator {
+    @include lib.rounded(2);
+
+    min-width: lib.s(0.5);
+    min-height: lib.s(0.5);
+}
+
 @keyframes appear {
     from {
         opacity: 0;