From 3d99a64e9675aa9620f265117f32f1862e0ab5ae Mon Sep 17 00:00:00 2001
From: Ian Oxley <ijoxley@gmail.com>
Date: Tue, 18 Dec 2018 15:58:16 +0000
Subject: [PATCH] Fix outline around dropdown toggle menu in Firefox

When the menu is open and has the focus shift the outline to the
`.habitica-menu-dropdown-toggle` child element.
---
 website/client/components/ui/customMenuDropdown.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/website/client/components/ui/customMenuDropdown.vue b/website/client/components/ui/customMenuDropdown.vue
index 87c3dbc1f9..6d8d114e49 100644
--- a/website/client/components/ui/customMenuDropdown.vue
+++ b/website/client/components/ui/customMenuDropdown.vue
@@ -18,6 +18,19 @@ A simplified dropdown component that doesn't rely on buttons as toggles  like bo
     color: $white !important;
   }
 }
+
+// Firefox outline fix for dropdown menu
+@supports (-moz-appearance:meterbar) and (all:initial) {
+  .habitica-menu-dropdown.open {
+    &:focus {
+      outline: none;
+
+      .habitica-menu-dropdown-toggle {
+        outline: 1px dotted #fff;
+      }
+    }
+  }
+}
 </style>
 <style lang='scss' scoped>
 @import '~client/assets/scss/colors.scss';