notifications: make popup window

1 files changed, 74 insertions, 4 deletions

diff --git a/scss/widgets.scss b/scss/widgets.scss
index 39ab490..e54a117 100644
--- a/scss/widgets.scss
+++ b/scss/widgets.scss
@@ -17,6 +17,78 @@ label.icon {
     @include font.icon;
 }
 
+.notification {
+    .inner {
+        @include lib.rounded(8);
+        @include font.main;
+
+        background-color: scheme.$base;
+        color: scheme.$text;
+        padding: lib.s(10) lib.s(12);
+
+        @include lib.spacing($vertical: true);
+    }
+
+    .header,
+    .content {
+        padding: 0 lib.s(5);
+    }
+
+    .header {
+        @include font.mono;
+        @include lib.spacing(8);
+    }
+
+    .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;
+            }
+        }
+    }
+}
+
 separator,
 .separator {
     @include lib.rounded(2);
@@ -112,9 +184,6 @@ tooltip {
 
 scrollbar {
     trough {
-        @include lib.rounded(1000);
-
-        min-width: lib.s(12);
         background-color: transparent;
     }
 
@@ -122,12 +191,13 @@ scrollbar {
         @include lib.rounded(1000);
         @include lib.element-decel;
 
-        min-width: lib.s(6);
+        min-width: lib.s(3);
         min-height: lib.s(30);
         background-color: color.change(scheme.$overlay0, $alpha: 0.3);
 
         &:hover,
         &:focus {
+            min-width: lib.s(6);
             background-color: color.change(scheme.$overlay0, $alpha: 0.4);
         }