bluetoothdevices: make popup window

4 files changed, 145 insertions, 0 deletions

diff --git a/scss/popdowns/bluetoothdevices.scss b/scss/popdowns/bluetoothdevices.scss
new file mode 100644
index 0000000..e426b27
--- /dev/null
+++ b/scss/popdowns/bluetoothdevices.scss
@@ -0,0 +1,43 @@
+@use "sass:color";
+@use "../scheme";
+@use "../lib";
+@use "../font";
+
+$-accent: scheme.$rosewater;
+
+.bluetooth-devices {
+    @include lib.popdown-window($-accent);
+
+    min-width: lib.s(500);
+    min-height: lib.s(400);
+
+    .list {
+        @include lib.spacing($vertical: true);
+
+        color: scheme.$text;
+
+        .device {
+            @include lib.spacing(8);
+
+            .icon {
+                font-size: lib.s(18);
+            }
+
+            button {
+                @include lib.rounded(5);
+                @include lib.element-decel;
+
+                padding: lib.s(3) lib.s(8);
+
+                &:hover,
+                &:focus {
+                    background-color: scheme.$surface0;
+                }
+
+                &:active {
+                    background-color: scheme.$surface1;
+                }
+            }
+        }
+    }
+}
diff --git a/scss/popdowns/index.scss b/scss/popdowns/index.scss
new file mode 100644
index 0000000..81855d3
--- /dev/null
+++ b/scss/popdowns/index.scss
@@ -0,0 +1,3 @@
+@forward "notifications";
+@forward "updates";
+@forward "bluetoothdevices";
diff --git a/scss/popdowns/notifications.scss b/scss/popdowns/notifications.scss
new file mode 100644
index 0000000..c7914c2
--- /dev/null
+++ b/scss/popdowns/notifications.scss
@@ -0,0 +1,58 @@
+@use "sass:color";
+@use "../scheme";
+@use "../lib";
+@use "../font";
+
+@mixin popup($accent) {
+    .separator {
+        background-color: $accent;
+    }
+
+    .image {
+        @include lib.border($accent, 0.05);
+    }
+}
+
+.notifications {
+    @include lib.popdown-window(scheme.$mauve);
+
+    min-width: lib.s(400);
+    min-height: lib.s(600);
+
+    .notification {
+        .wrapper {
+            padding-bottom: lib.s(10);
+        }
+
+        .inner {
+            background-color: color.mix(scheme.$surface0, scheme.$base, 70%);
+
+            &.low {
+                @include popup(scheme.$overlay0);
+            }
+
+            &.normal {
+                @include lib.border(scheme.$lavender, 0.3);
+                @include popup(scheme.$lavender);
+            }
+
+            &.critical {
+                @include lib.border(scheme.$red, 0.5);
+                @include popup(scheme.$red);
+            }
+        }
+
+        .actions > * {
+            background-color: scheme.$surface1;
+
+            &:hover,
+            &:focus {
+                background-color: scheme.$surface2;
+            }
+
+            &:active {
+                background-color: scheme.$overlay0;
+            }
+        }
+    }
+}
diff --git a/scss/popdowns/updates.scss b/scss/popdowns/updates.scss
new file mode 100644
index 0000000..d11a551
--- /dev/null
+++ b/scss/popdowns/updates.scss
@@ -0,0 +1,41 @@
+@use "sass:color";
+@use "../scheme";
+@use "../lib";
+@use "../font";
+
+$-accent: scheme.$blue;
+
+.updates {
+    @include lib.popdown-window($-accent);
+
+    min-width: lib.s(600);
+    min-height: lib.s(400);
+
+    .wrapper {
+        @include lib.element-decel;
+
+        &:hover,
+        &:focus {
+            color: color.mix($-accent, scheme.$base, 80%);
+        }
+
+        &:active {
+            color: color.mix($-accent, scheme.$base, 60%);
+        }
+    }
+
+    .repos {
+        @include lib.spacing($vertical: true);
+
+        .repo {
+            .header {
+                font-size: lib.s(16);
+            }
+
+            .list {
+                color: scheme.$text;
+                margin-left: lib.s(12);
+            }
+        }
+    }
+}