chore: change appearance of hamburger icon on hover/focus

1 files changed, 44 insertions, 0 deletions

diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss
index 3cfb727..0d0d6c0 100644
--- a/src/components/MainNav/MainNav.module.scss
+++ b/src/components/MainNav/MainNav.module.scss
@@ -33,6 +33,15 @@
   width: 100%;
   height: 100%;
 
+  &:hover {
+    span,
+    span::before,
+    span::after {
+      background: var(--color-primary-lighter);
+      box-shadow: 2px 2px 0 0 var(--color-shadow);
+    }
+  }
+
   @include mix.media("screen") {
     @include mix.dimensions("md") {
       display: none;
@@ -49,6 +58,23 @@
   opacity: 0;
   cursor: pointer;
 
+  &:hover {
+    ~ .label {
+      span,
+      span::before,
+      span::after {
+        background: var(--color-primary-lighter);
+        box-shadow: 2px 2px 0 0 var(--color-shadow);
+      }
+    }
+  }
+
+  &:focus {
+    ~ .label {
+      outline: var(--color-primary-light) solid fun.convert-px(3);
+    }
+  }
+
   @include mix.media("screen") {
     @include mix.dimensions("md") {
       display: none;
@@ -281,3 +307,21 @@
     }
   }
 }
+
+.checkbox:checked {
+  ~ .label:hover {
+    span {
+      background: none;
+      box-shadow: none;
+    }
+  }
+
+  &:hover {
+    ~ .label {
+      span {
+        background: none;
+        box-shadow: none;
+      }
+    }
+  }
+}