fix(button): update focus styles to use box-shadow (#4867)

carbon-design-system · Jan 6, 2020 · 8495b36 · 8495b36
1 parent 7663fe6
commit 8495b36
Showing 1 changed file with 3 additions and 4 deletions.
diff --git a/packages/components/src/components/button/_mixins.scss b/packages/components/src/components/button/_mixins.scss
@@ -26,8 +26,7 @@
   text-align: left;
   text-decoration: none;
   transition: all $duration--fast-01 motion(entrance, productive);
-  outline: $button-outline-width solid transparent;
-  outline-offset: -4px;
+  outline: none;
   position: relative;
   max-width: rem(320px);
 
@@ -72,7 +71,7 @@
 
   &:focus {
     border-color: $focus;
-    outline-color: $ui-02;
+    box-shadow: inset 0 0 0 $button-outline-width $ui-02;
   }
 
   &:disabled:hover,
@@ -83,7 +82,7 @@
     background-color: $disabled-02;
     border-color: $disabled-02;
     text-decoration: none;
-    outline-color: $disabled-02;
+    box-shadow: none;
   }
 
   &:active {