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.
2018-12-18 15:58:16 +00:00
parent 76f9204417
commit 3d99a64e96
1 changed files with 13 additions and 0 deletions
@@ -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';