base popdown window

3 files changed, 61 insertions, 86 deletions

diff --git a/scss/_lib.scss b/scss/_lib.scss
index d2ad3d0..63bf618 100644
--- a/scss/_lib.scss
+++ b/scss/_lib.scss
@@ -1,5 +1,6 @@
 @use "sass:color";
 @use "scheme";
+@use "font";
 
 $scale: 0.068rem;
 @function s($value: 1) {
@@ -42,3 +43,57 @@ $scale: 0.068rem;
 @mixin ease-in-out {
     transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
 }
+
+@mixin popdown-window($colour) {
+    @include rounded(8);
+    @include border($colour, 0.4, 2);
+    @include shadow;
+    @include font.mono;
+
+    background-color: scheme.$base;
+    color: $colour;
+    padding: s(10) s(12);
+    font-size: s(14);
+
+    .header {
+        @include spacing(8);
+
+        padding: 0 s(5);
+        margin-bottom: s(8);
+        font-size: s(15);
+
+        button {
+            @include rounded(5);
+            @include element-decel;
+
+            padding: s(3) s(8);
+
+            &:hover,
+            &:focus {
+                background-color: scheme.$surface0;
+            }
+
+            &:active {
+                background-color: scheme.$surface1;
+            }
+
+            &.enabled {
+                background-color: $colour;
+                color: scheme.$base;
+
+                &:hover,
+                &:focus {
+                    background-color: color.mix($colour, scheme.$base, 80%);
+                }
+
+                &:active {
+                    background-color: color.mix($colour, scheme.$base, 70%);
+                }
+            }
+        }
+    }
+
+    .icon {
+        font-size: s(32);
+    }
+}
diff --git a/scss/notifications.scss b/scss/notifications.scss
index f9cb7ce..e955a4c 100644
--- a/scss/notifications.scss
+++ b/scss/notifications.scss
@@ -14,57 +14,10 @@
 }
 
 .notifications {
-    @include lib.rounded(8);
-    @include lib.border(scheme.$mauve, 0.4, 2);
-    @include lib.shadow;
-    @include font.mono;
+    @include lib.popdown-window(scheme.$mauve);
 
     min-width: lib.s(400);
     min-height: lib.s(600);
-    background-color: scheme.$base;
-    color: scheme.$mauve;
-    padding: lib.s(10) lib.s(12);
-
-    .header {
-        @include lib.spacing(8);
-
-        padding: 0 lib.s(5);
-        margin-bottom: lib.s(8);
-
-        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;
-            }
-
-            &.enabled {
-                background-color: scheme.$mauve;
-                color: scheme.$base;
-
-                &:hover,
-                &:focus {
-                    background-color: color.mix(scheme.$mauve, scheme.$base, 80%);
-                }
-
-                &:active {
-                    background-color: color.mix(scheme.$mauve, scheme.$base, 70%);
-                }
-            }
-        }
-    }
-
-    .icon {
-        font-size: lib.s(32);
-    }
 
     .notification {
         .wrapper {
diff --git a/scss/updates.scss b/scss/updates.scss
index 11f9a3e..12da977 100644
--- a/scss/updates.scss
+++ b/scss/updates.scss
@@ -3,60 +3,27 @@
 @use "lib";
 @use "font";
 
+$accent: scheme.$blue;
+
 .updates {
-    @include lib.rounded(8);
-    @include lib.border(scheme.$blue, 0.4, 2);
-    @include lib.shadow;
-    @include font.mono;
+    @include lib.popdown-window($accent);
 
     min-width: lib.s(600);
     min-height: lib.s(400);
-    background-color: scheme.$base;
-    color: scheme.$blue;
-    padding: lib.s(10) lib.s(12);
-    font-size: lib.s(14);
 
     .wrapper {
         @include lib.element-decel;
 
         &:hover,
         &:focus {
-            color: color.mix(scheme.$blue, scheme.$base, 80%);
+            color: color.mix($accent, scheme.$base, 80%);
         }
 
         &:active {
-            color: color.mix(scheme.$blue, scheme.$base, 60%);
+            color: color.mix($accent, scheme.$base, 60%);
         }
     }
 
-    .header {
-        @include lib.spacing(8);
-
-        padding: 0 lib.s(5);
-        margin-bottom: lib.s(8);
-        font-size: lib.s(15);
-
-        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;
-            }
-        }
-    }
-
-    .icon {
-        font-size: lib.s(32);
-    }
-
     .repos {
         @include lib.spacing($vertical: true);