feat(firefox): remove dotted line for good

affects: @fremtind/jkl-accordion, @fremtind/jkl-button, @fremtind/jkl-core, @fremtind/jkl-dropdown, @fremtind/jkl-hamburger, @fremtind/portal
fremtind · Aug 1, 2019 · 67187a6 · 67187a6
1 parent 9e26f74
commit 67187a6
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 38 deletions.
diff --git a/packages/accordion/accordion.scss b/packages/accordion/accordion.scss
@@ -38,10 +38,6 @@ $chevron-weight--hover: rem(2px);
         font-family: inherit;
         background-color: inherit;
         color: inherit; // stops Safari from changing color on :active
-        /* fix dotted border on keyboard focus in Firefox: */
-        &:-moz-focusring {
-            outline: 0;
-        }
 
         border: $border-width solid transparent;
         padding: $title-vertical-padding ($horizontal-padding - $border-width);

diff --git a/packages/button/button.scss b/packages/button/button.scss
@@ -38,15 +38,6 @@ $button-height--small: 2.5rem;
     transition: transform $animation-timing;
     position: relative;
 
-    // get rid of dotted border on Firefox
-    &::-moz-focus-inner {
-        border: 0;
-    }
-
-    &:-moz-focusring {
-        outline: none;
-    }
-
     html:not([data-mousenavigation]) &:focus,
     &:hover {
         transform: scale(1.05);

diff --git a/packages/core/links.scss b/packages/core/links.scss
@@ -4,9 +4,6 @@
 .jkl-link {
     appearance: none;
     outline: none;
-    :-moz-focusring {
-        outline: none;
-    }
     color: currentColor;
 
     &--inline {

diff --git a/packages/core/normalize.scss b/packages/core/normalize.scss
@@ -232,14 +232,34 @@ button::-moz-focus-inner,
 }
 
 /**
- * Restore the focus styles unset by the previous rule.
+ * Remove dotted lines around object, especially for firefox
  */
 
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-    outline: 1px dotted ButtonText;
+a:hover,
+a:active,
+a:focus,
+a:link,
+a:visited {
+    outline: 0;
+    outline: 0 !important;
+    outline-style: none;
+}
+
+button,
+object,
+embed {
+    outline: 0;
+}
+
+/* All Input elements */
+input::-moz-focus-inner {
+    outline: 0;
+}
+
+/* Or more specifically*/
+input[type="submit"]::-moz-focus-inner,
+input[type="button"]::-moz-focus-inner {
+    outline: 0;
 }
 
 /**

diff --git a/packages/dropdown/dropdown.scss b/packages/dropdown/dropdown.scss
@@ -53,10 +53,6 @@ $dropdown-total-height: $label-height + $value-height + $bottom-padding;
         &::ms-expand {
             display: none;
         }
-        /* remove Firefox dotted border */
-        &::-moz-focus-inner {
-            outline: none !important;
-        }
         &:-moz-focusring {
             color: transparent;
             text-shadow: 0 0 0 $border-color;

diff --git a/packages/hamburger/hamburger.scss b/packages/hamburger/hamburger.scss
@@ -16,14 +16,6 @@ $button-focus-ring-color: $himmel;
     height: 100%;
     width: 100%;
 
-    &:-moz-focusring {
-        outline: none !important;
-    }
-
-    &::-moz-focus-inner {
-        border: 0;
-    }
-
     &:hover,
     &--is-active:hover {
         opacity: 0.7;

diff --git a/portal/src/components/Layout/Layout.scss b/portal/src/components/Layout/Layout.scss
@@ -67,10 +67,6 @@ $portal-max-width: 1200px;
         @include small-device {
             margin: 0 $component-spacing--large;
         }
-
-        :-moz-focusring {
-            outline: none;
-        }
     }
 }