From 84835bbe30934d6330c506cea13dcce3182d0791 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Sun, 30 Mar 2025 11:30:52 +0200
Subject: [PATCH] Button style improvments.

---
 assets/sass/components/button/_button.scss | 29 ++++++----------------
 assets/sass/mobilemenu.scss                |  9 ++-----
 2 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/assets/sass/components/button/_button.scss b/assets/sass/components/button/_button.scss
index 1d67134..970cb62 100644
--- a/assets/sass/components/button/_button.scss
+++ b/assets/sass/components/button/_button.scss
@@ -27,7 +27,7 @@ button,
   color: var(--color-button-text);
   text-shadow: var(--color-button) 0 1px 0;
   background: linear-gradient(var(--color-button), var(--color-button-hover));
-  border: 1px solid var(--color-button);
+  border: 1px solid var(--color-button-hover);
   border-radius: var(--radius-s);
 
   &:hover,
@@ -39,6 +39,10 @@ button,
     text-shadow: var(--color-button-hover) 0 1px 0;
     background: linear-gradient(var(--color-button-hover), var(--color-button));
   }
+
+  &:active {
+    box-shadow: inset 2px 2px 5px var(--color-black-40);
+  }
 }
 
 // Add button variations here.
@@ -51,38 +55,21 @@ button,
 
   &--alt {
     color: var(--color-button-text-hover);
-    background-color: var(--color-button-hover);
+    background: var(--color-button-hover);
 
     &:hover,
     &:focus-visible,
     &:active {
       color: var(--color-button-text);
-      background-color: var(--color-button);
+      background: var(--color-button);
     }
   }
 
   &--outline {
     color: var(--color-button);
-    background-color: var(--color-button-text);
-    border-color: var(--color-button);
-
-    &:hover,
-    &:focus-visible,
-    &:active {
-      color: var(--color-button-text);
-      background-color: var(--color-button);
-    }
+    background: var(--color-button-text);
   }
 
-  &--shadow {
-    &:hover {
-      box-shadow: 2px 2px 5px 1px var(--color-button-disabled);
-    }
-
-    &:active {
-      box-shadow: inset 2px 2px 5px 1px var(--color-button);
-    }
-  }
 
   &--plain {
     appearance: none;
diff --git a/assets/sass/mobilemenu.scss b/assets/sass/mobilemenu.scss
index 7a6312c..3d80c94 100644
--- a/assets/sass/mobilemenu.scss
+++ b/assets/sass/mobilemenu.scss
@@ -40,22 +40,17 @@
     position: absolute;
     top: var(--gutters);
     right: var(--gutters);
-    margin: 0;
     padding: 0 .3rem;
     border-color: var(--color-button-text-hover);
-    font-weight: var(--fw-bold);
     z-index: 22;
     pointer-events: auto;
 
     &:hover,
-    &:focus-visible {
+    &:focus-visible,
+    &:active {
       svg {
         fill: var(--color-button-text-hover);
       }
-
-      &.button--outline {
-        border-color: var(--color-button-text-hover);
-      }
     }
   }