scss: add popover styles

For GTK emoji picker

1 files changed, 12 insertions, 82 deletions

diff --git a/scss/widgets.scss b/scss/widgets.scss
index f12cd15..254b0fa 100644
--- a/scss/widgets.scss
+++ b/scss/widgets.scss
@@ -3,88 +3,6 @@
 @use "lib";
 @use "font";
 
-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;
-        margin-top: lib.s(3);
-        min-width: lib.s(64);
-        min-height: lib.s(64);
-
-        &.small {
-            min-width: lib.s(48);
-            min-height: lib.s(48);
-        }
-    }
-
-    .summary {
-        @include font.title;
-
-        font-size: lib.s(16);
-    }
-
-    .body {
-        font-size: lib.s(14);
-        color: scheme.$subtext0;
-    }
-
-    .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);
@@ -199,3 +117,15 @@ scrollbar {
         }
     }
 }
+
+popover {
+    @include -appear;
+    @include lib.rounded(10);
+    @include lib.border(scheme.$yellow, 0.4);
+    @include font.mono;
+
+    padding: lib.s(8);
+    background-color: scheme.$base;
+    color: scheme.$text;
+    font-size: lib.s(14);
+}