scss: add popover styles

For GTK emoji picker

1 files changed, 85 insertions, 0 deletions

diff --git a/scss/common.scss b/scss/common.scss
new file mode 100644
index 0000000..88f3326
--- /dev/null
+++ b/scss/common.scss
@@ -0,0 +1,85 @@
+@use "scheme";
+@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;
+            }
+        }
+    }
+}